mouseOver text to change image in display area...

[Dusty Monkey]

I am new to JavaScript and I am having a difficult time finding what I thought would be easy to find (so please forgive me if this has been posted somewhere else...)

I have 4 text strings that when a user runs his/her mouseOver, I'd like to display a corresponding picture in a display area. I thought that would be easy enough. However, it gets a bit complicated for me since I am also using CSS to position the display area. For some reason all I can find out there are examples using HTML tables for display image positioning. I don't want to use tables. I'm not sure if this will make a difference but my style sheet is external. Also, the text does not link/go to another page.

I REALLY hope that made sense. Someone please help me!

[bluewalrus]

You could use the hover css state for the element but you'd need a javascript solution still for ie.

[Dusty Monkey]

Wouldn't the css hover need to consist of a link? My text doesn't lead to anywhere. I'm sooooo confused.

[bluewalrus]

You can do hovers on other elements beside the "a", but IE doesn't support it. So you'd need javascript as well for the hover to work in IE.

span:hover img {
visibility:visible;
position:relative;
top:where ever;
left:where ever;
}
span img {
visibility:hidden;
height:0;
width:0;
}

<span>TEXT TO DISPLAY<img src="" alt="image will appear when text is hovered where ever you set position to go to" /></span>

[Dusty Monkey]

I don't know what javaScript code to use.

[bluewalrus]

This might do it... This is a guess and alteration of suckerfish from alistapart.

<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
mouseRoot = document.document.getElementsByClassName("show");
for (i=0; i<mouseRoot.childNodes.length; i++) {
node = mouseRoot.childNodes[i];
if (node.nodeName=="span") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>


<span class="show">TEXT TO DISPLAY<img src="" alt="image will appear when text is hovered where ever you set position to go to" /></span>

.show:hover img {
visibility:visible;
position:relative;
top:where ever;
left:where ever;
}
.show img {
visibility:hidden;
height:0;
width:0;
}

[davelf]

Hi bluewalrus i have the same problem here, i've already try your suggestion

You could use the hover css state for the element

this is my code:

.ya a {
position:fixed;
display:block;
width:400px;
height: 20px;
background:no-repeat;
margin-left:-50px;
margin-top:-100px;
}
.ya a:hover {
position:absolute;
display:block;
width:400px;
height: 200px;
background: transparent url(openImgInHover.png) no-repeat;
background-position:bottom right;
padding-bottom:100px;
padding-right:80px;
}

this what i put in the body

<td colspan="2" rowspan="3" align="right" valign="middle" class="ya">
         <a href="indexCarousel.html" onmouseover="document.images['s1a'].src='images/homeFlash/carousel-icon-hover.png';" onmouseout="document.images['s1a'].src='images/homeFlash/carousel-icon.png';">
                 <img src="images/homeFlash/carousel-icon.png" name="s1a" id="s1a" border="0" title="carousel-flash definition" />
          </a>
</td>

and it's true ie looks like a mess, is there some code to fix this problem or may be there's something wrong with my css code.