Question not answered

[riderchick17]

Ok so I posted this question last week but never seem to get an answer. I don't know if it's too difficult or what. But here's the plan. I need to do an image mouseover swap without any images in the markup. Here is the markup:

<div id="menu">
<nobr>
<div id="menu1"><a href="index.htm" id="about" onmouseover=s_show('about',event) onmouseout=s_hide()><i>About TLC</i></a></div>
<div id="menu2"><a href="facultysupport.htm" id="faculty" onmouseover=s_show('faculty',event) onmouseout=s_hide()><i>Faculty Support</i></a></div>
<div id="menu3"><a href="facilities.htm" id="facilities" onmouseover=s_show('facilities',event) onmouseout=s_hide()><i>Facilities</i></a></div>
<div id="menu4"><a href="events.htm" id="events" onmouseover=s_show('events',event) onmouseout=s_hide()><i>Events</i></a></div>
<div id="menu5"><a href="video.htm" id="video" video onmouseover=s_show('video',event) onmouseout=s_hide()><i>Video Conferencing</i></a></div>
<div id="menu6"><a href="online.htm" id="online" onmouseover=s_show('online',event) onmouseout=s_hide()><i>Online Resources</i></a></div>
<div id="menu7"><a href="SELECTVLC.htm" id="SELECT" onmouseover=s_show('select',event) onmouseout=s_hide()><i>SELECT-VLC</i></a></div>
</nobr>
</div>

When you mouseover a the links I want to change a centered image. Once again this must be done using CSS. An example of what I'm looking for is at [ctl.standford.edu...]

[Bonusbana]

What you are describing is not possible with CSS (I think). The easiest way is definitely javascript.

Please dont post personal URLs here, especially broken ones.

[DrDoc]

It is possible with CSS... depending on what you mean by "image swap". Do you want to change the background image of the hovered element, or simply change the image in an arbitrary element located elsewhere on the page?

[SuzyUK]

Hi riderchick17

sorry your question got missed the first time around..

Yes it's possible using CSS :)

try this demo [meyerweb.com] to see if that's what you're after.

I know it has the images in the HTML, but you could get creative and give each link a <span> (see the text demo [meyerweb.com] for the way to do it using spans) and an individual ID. Then set the image as a background image to the span in the CSS..

also I wonder if it could be done by having all the images already placed (again using the span technique) and just not use display: none; but have the z-index change on hover, thus the images would be "pre-loaded"?
Note: I haven't tried this it's just a thought...

Let us know how you get on

Suzy

[riderchick17]

Thank you all for your quick responses. Our internet was down yesterday so I was unable to post.

Please dont post personal URLs here, especially broken ones.

It is not a personal url and I'm sorry that it was broken. Here is the correct url so that you can all see what I'm trying to accomplish : [ctl.stanford.edu ]

Do you want to change the background image of the hovered element, or simply change the image in an arbitrary element located elsewhere on the page?

Change the image in an arbitrary element located elsewhere on the page, the image could be placed in the same div tag but that doesn't seem to be working too well.

but have the z-index change on hover

not possible because in order to have the images overlap the link list would also overlap

[SuzyUK]

riderchick..

>>z-index
that was only a theory and on further testing it didn't work easily for many other reasons (IE mainly..:))

but That article on CSS popups will do it (I've recreated the stanford menu with CSS) the only caveat being where Eric Meyer says there is a problem/bug in IE.. holding the images after "mouseout", there is and it's not just images it's anything with a background,

I've found it can be easily worked around by using the "visibility" property instead of the "display" property..

Suzy

[SuzyUK]

here's a basic example.. I've use background colors on the rollovers, but the same works with images.

(note though in my stanford mock-up I didn't use seperate images for the links I joined the images together and had them just change their background position on hover to avoid preload problems and "flicker")

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#nav {
background: #eee;
border: 1px solid #000;
position: relative;
margin: 0 200px;
height: 200px;
}

ul {
list-style: none;
margin: 0 0 0 30px;
padding: 0;
}

ul li a {display: block;
width: 200px;
height: 30px;
line-height: 30px;
background: #fff;
color: #00f;
}

ul li a:hover {
background: #ccc;
color: #000;
}

ul li a span {
width: 200px;
height: 100px;
position: absolute;
right: 20px;
top: 20px;
visibility: hidden;
}

ul li#one a span {background: #cfc; visibility: visible; /* if you want to keep first one always visible */}
ul li#two a span {background: #fcf;}
ul li#three a span {background: #ffc;}

ul li a:hover {text-indent: 0;}
/* something is required here for IE bug with the span technique
so just use a browser default that's wont affecting anything */

ul li a:hover span {
visibility: visible;
}

</style>
</head>
<body>
<div id="nav">
<ul>
<li id="one"><a href="/">link 1<span></span></a></li>
<li id="two"><a href="/">link 2<span></span></a></li>
<li id="three"><a href="/">link 3<span></span></a></li>
</ul>
</div>
</body>
</html>

Suzy