thanks... sounds like alot of work, dont exactly know where to put that span thing
Theres a bit I dont understand like the "position of the spans to absolute"?
And to "uniquely ID either the li elements or the spans that they contain" are you talking about the items locations and what pictures they are?
thanks for the helpOkay :lol3 something like this
HTML
<html>
<div id="myRollover">
<ul>
<li id="link1"><a href="#"><span> </span>Link 1 Text</a></li>
<li id="link2"><a href="#"><span> </span>Link 2 Text</a></li>
<li id="link3"><a href="#"><span> </span>Link 3 Text</a></li>
</ul>
</div>
</html>
Then the CSS could be something like this:
CSS
/* Set up the box for the rollover content */
#myRollover {
position:relative;
width:750px;
border:0;
margin:0;
padding:10px;
}
/* Adjust the display of the unordered list */
#myRollover ul {
margin:0;
list-style:none;
}
#myRollover li {
margin:0;
padding:2em 3em;
}
#myRollover li a:link,
#myRollover li a:visited {
color:#fff;
}
#myRollover li a:hover,
#myRollover li a:active {
color:#f00;
}
/* set up the span elements */
#myRollover li span {
visibility:hidden;
position:absolute;
width:600px;
height:400px;
top:10px;
right:10px;
}
/* set the hover state to show the span elements */
#myRollover #link1 a:hover span {
visibility:visible;
background:url(http://username.smugmug.com/photo/XXXXXXX-L.jpg)
}
#myRollover #link2 a:hover span {
visibility:visible;
background:url(http://username.smugmug.com/photo/YYYYYYY-L.jpg)
}
#myRollover #link3 a:hover span {
visibility:visible;
background:url(http://username.smugmug.com/photo/ZZZZZZZZ-L.jpg)
}
You'll have to customize it to suit and there may be unknown hurdles yet to be cleared, but this is a start and it'll be difficult to visualize problems until it is live.