1 reply [Last post]
GPleat
Offline
newbie
Last seen: 11 years 40 weeks ago
Timezone: GMT-5
Joined: 2009-12-04
Posts: 1
Points: 2

So I have a rollover sprite that's working just fine in all browsers. What I would like to do is make it so when one rolls over one of the links, text will be displayed below the sprite. So like, somebody rolls over the link labeled "Physical Therapy", and as they do so, below the image sprite is displayed a brief description of Physical Therapy; I need the same to happen for two other links.

I'm using the following code:

 
   <style type="text/css">
 
        .slide {
        position: relative;
        }
 
        a.ban_1 {
        display: block;
        width: 625px;
        height: 36px;
        overflow: hidden;
        }
 
        a.ban_1 img {
        width: auto;
        height: auto;
        border: none;
        }
 
        a.ban_2 {
        display: block;
        width: 625px;
        height: 44px;
        overflow: hidden;
        }
 
        a.ban_2 img {
        width: auto;
        height: auto;
        margin-top: -37px;
        border: none;
        }
 
        a.ban_3 {
        display: block;
        width: 625px;
        height: 38px;
        overflow: hidden;
        }
 
        a.ban_3 img {
        width: auto;
        height: auto;
        margin-top: -82px;
        border: none;
        }
 
        a.ban_1:hover img, a.ban_1:focus img, a.ban_1 img.hover,
        a.ban_2:hover img, a.ban_2:focus img, a.ban_2 img.hover, 
        a.ban_3:hover img, a.ban_3:focus img, a.ban_3 img.hover {
        margin-left: -626px;
        }
 
    </style>

and

<script type="text/javascript"> 
        // set and reset hover classes in IE5-6				
oIcon = {
        setHoverClass : function() {
                this.className = 'hover';
        },
        resetHoverClass : function() {
                this.className = '';
        }
};
// bind functions to events
var elm = document.getElementById('banner');
if (elm) {
        elm.onmouseover = elm.onfocus = oIcon.setHoverClass;
        elm.onmouseout = elm.onblur = oIcon.resetHoverClass;
}
</script>

and

   <span class="slide">
     <a href="/shps/nursing.htm" class="ban_1">
        <img src="/shps/images/ProgBanV1.2.jpg" id="banner" alt="Nursing" name=
        "Nursing" target="_blank" />
     </a> 
     <a href="/shps/hsa.htm" class="ban_2">
        <img src="/shps/images/ProgBanV1.2.jpg" id="banner" alt=
        "Health Sciences &amp; Administration" name=
        "Health Sciences &amp; Administration" target="_blank" />
     </a>
     <a href="/shps/pt.htm" class="ban_3">
	<img src="/shps/images/ProgBanV1.2.jpg" id="banner" alt="Physical Therapy" name=
	"Physical Therapy" target="_blank" />
     </a>
   </span>

metaslug001
metaslug001's picture
Offline
Regular
Seattle/Oakland/Berlin
Last seen: 11 years 33 weeks ago
Seattle/Oakland/Berlin
Timezone: GMT+1
Joined: 2010-01-06
Posts: 28
Points: 28

RE: Can I create a 'double rollover' with multiple targets?

GPleat,

You can add the description text in the link on a second line, and use CSS rules to restrain the height of the link so that it doesn't show the description. Then on rollover you can again use CSS (or Javascript if you like) to change the height of the link so that it 'opens' or 'stretches' to show the hidden content. Does that make sense?