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.:confused:

[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.