Forum Moderators: open

Message Too Old, No Replies

Mouseover image

text problem

         

RangertG

1:18 pm on Nov 10, 2006 (gmt 0)

10+ Year Member



Hi, I have made a small script that turns a thumbnail to a larger image on mouseover, and it works perfectly in both IE and FF.
But I have a problem with the larger image - when open it slides under the text on my site :(

You can see it here: <snip>
My code:
<html>
<head><title></title>
<script type="text/javascript">
<!--
Image1=new Image();
Image1.src="460_01b.bmp";
Image2=new Image();
Image2.src="460_01.bmp";
function MouseOver(image,status,mous){
document.images[mous].src=image;
window.status=status;
}

function MouseOut(image,status,mous){
document.images[mous].src=image;
window.status=status;
}

//-->
</script>
</head>
<body>
<a href="" onMouseOver="MouseOver('460_01.bmp','','mouse1'); return true;" onMouseOut="MouseOut('460_01b.bmp','','mouse1'); return true;"><img src="460_01b.bmp" name="mouse1" alt=""></a>
</body>
</html

[edited by: encyclo at 6:25 pm (utc) on Nov. 11, 2006]
[edit reason] no personal URLs please, see forum charter [/edit]

eelixduppy

2:46 pm on Nov 10, 2006 (gmt 0)



Welcome to WebmasterWorld, RangertG.

I don't think there is anything you can do about this other than trying a different method. I generally use onClick and open a new window with an image with larger dimensions.

Resizing it right there in the window doesn't seem to be the best way.

Good luck!

RangertG

12:14 pm on Nov 23, 2006 (gmt 0)

10+ Year Member



I got the z-index value wrong.
The text z-index value was higher than the image z-index value.

rocknbil

5:55 pm on Nov 23, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard RangertG, two comments that may be of help: you proabably shouldn't use .bmp images if you plan to publish becasue they have no compression and will slow down your page load. Use an optimized indexed color palette in .gif or .png, or an RGB .jpg format.

Second here's a favorite post by Fotiman [webmasterworld.com] where you can completely remove the mouseover code from the link itself, allowing you to use clean html code that's not cluttered up with Javascript. Basically you attach a behavior to the document by defining the behavior first.