two links one image rollover

Forum Moderators: not2easy

Message Too Old, No Replies

two links one image rollover

How can I change the image from multiple links?

Wayder

1:53 pm on Nov 10, 2010 (gmt 0)

<a href="/page1.html"><div id="image1"></div></a>
<h2>header</h2>
<p>text.</p>
<a href="/page1.html">View page here.</a>

#image1 {
display:block;
width:200px;
height:150px;
float:right;
margin-top:1.75em;
margin-right:4em;
margin-left:3em;
background:url("/images/image1.jpg") 0 0 no-repeat;
}

#image1:hover {
background:url("/image1.jpg") -200px 0;
}

The image changes because of :hover. How can I get the image to change using the second link?

Thanks

SuzyUK

3:35 pm on Nov 10, 2010 (gmt 0)

remove the div id element, instead add a class to the links themselves and put a span inside them, then position the span. by adding a class to the span also you can then change the background images if they're different for your links

Sample Code using colors instead of images:

<style type="text/css" media="screen">
#wrap { /* position this element relative so that the absolute spans know where to take their position from */
position: relative;
background: #ccc;
width: 500px;
}

.popup span {
position: absolute;
top: 10px;
right: 10px;
/* left: -9999px; uncomment to hide this at start if required */
width:200px;
height:150px;
background: #d00;
}

.popup:hover span {
position: absolute;
z-index: 1; /* to make sure the hovered span is always on top */
left: auto; /* to unhide it */
background:#dad;
}
</style>
</head>
<body>
<div id="wrap">
<p><a class="popup" href="#">a link here <span></span></a></p>
<h2>header</h2>

<p>text.</p>
<p><a class="popup" href="#">View same link here <span></span></a></p>
</div>
</body>

e.g. whenever a link with the class of "popup" is hovered over the span (probably with the background image you want to show) is shown in the same place

Wayder

4:55 pm on Nov 10, 2010 (gmt 0)

An excellent and simple solution of placing one span over another that works perfectly.

Thank you for your help.