#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    44
    Rep Power
    11

    Tabbed Menus - Rollover Descriptions


    Didn't know what to search for this--apologies if it exists somewhere on the board.

    Now, with links, I know you can supply a title="" attribute to them, to get a tooltip to appear on them if you leave the mouse hovering on them for a short period. What I am trying to do is somewhat similar.

    Basically, imagine that you have a column of links, and a large space to the right of them (the background of which is defined elsewhere, but links' descriptions still would show here).

    Some code demonstrating the type of effect I'm grasping for is below:

    Code:
    -- DTD removed for space --
    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    <!--
    body{
    	padding:    0px;
    	margin:     0px;
    }
    .navCol{
    	background: #00FFCC;
    	width:      20.00%;
    }
    .dispInf{
    	position:   absolute;
    	top:        0px;
    	left:       21.00%;
    	width:      79.00%;
    	background: #CCCCCC;
    	height:     65%;
    }
    a:hover span{
    	display:    block;
    	position:   absolute;
    	top:        0px;
    	left:       21.00%;
    	width:      79.00%;
    }
    a span{
    	display: none;
    }
    -->
    </style>
    </head>
    <body>
    <div class="dispInf"></div>
    <div class="navCol">
    	<a href="/site1">Link 1<span>
    	Description 1</span></a>
    	<br />
    	<a href="/site2">Link 2<span>
    	Description 2</span></a>
    </div>
    </body>
    </html>
    Now, my problem is this:
    This does not work in Internet Explorer, at all. Links still function; however, the text that should be appearing over in that right area does not.

    Could anyone please point me in the proper direction to resolve this, if such can be done? I'm only shooting for IE6 and Mozilla compatibility, though the more the merrier.
    Thank you for your time.
  2. #2
  3. Network Engineer
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2004
    Location
    127.0.0.1
    Posts
    733
    Rep Power
    215
    Sounds like a job for a...Javascript Rollover.

    Only downfall, your visitor has to have javascript enabled. Quite a few have it disabled because of the pop-up bas**rds abusing it.

    You can control what's displayed anywhere on your page, when ther mouse pointer hovers on an entirely different part of the page.

    Too much code to go into here. Just search for a GOOD javascript rollover tutorial.

    Hope this helps.

    pwd
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    44
    Rep Power
    11
    Oh, I know I can do it with Javascript, but due to the reasons you described, I want to use CSS if at all possible (Matter of fact, I've got it done with JS already, but I'm hoping someone adept at CSS can prove to me a way to do it without so).

    Thanks for the tip, though.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    I can't seem to get it to work in IE either. I have to remove most of the code and add text-decoration:none to the links for the <span>s to show up on a:hover in IE.

    Anybody else have any ideas?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Location
    Lima, Peru
    Posts
    127
    Rep Power
    10
    Hi Duminas

    Of course IE6 does not even fully support :hover in <a> tags, but adding a .htc file can help you to accomplish your goal. Here's a link that helped me a lot in building my web site without js:

    http://www.xs4all.nl/~peterned/csshover.html

    This behavior file can make IE do anything on hover, not only on <a> tags, but on everything (ul, p, etc). You can dl the htc file from the link above.

    Should you like to see my website and look what you can do with this htc file, please send me a pm. I can also send you the htc file in case you can't dl it from the site.

    Of course, credits are for the kind dutch that shares his htc file and allows css fans to get rid of js. Good luck!

    Regards,

    Carlos

IMN logo majestic logo threadwatch logo seochat tools logo