asked on

Rollover JavaScript not working in Safari and Chrome

I have a page that displays a thumbnail image when you roll over a link.

The JavaScript routines for rollove rand rollout are simply:

<script type="text/javascript" language="javascript">

function showImage(image) {
image.style.visibility="visible";
}

function hideImage(image) {
image.style.visibility="hidden";
}
</script>

And the HTML is:

<img id="sib_1_tn" class="thumb" src="images/Siblings/sib_1_tn.jpg" />
<a href="sib_1.php" onmouseover="showImage(sib_1_tn)" onmouseout="hideImage(sib_1_tn)">Sibling 1 </a>

=================

This works fine in IE and Firefox but neither Chrome nor Safari display the thumbnail image when you roll over the link. Does anyone run an idea what the problem might be?

Thanks for any suggestions.

Steve

leakim971

put the ID of the image inside simple quote :

onmouseover="showImage('sib_1_tn')" onmouseout="hideImage('sib_1_tn')

leakim971

<img id="sib_1_tn" class="thumb" src="images/Siblings/sib_1_tn.jpg" />
<a href="sib_1.php" onmouseover="showImage('sib_1_tn')" onmouseout="hideImage('sib_1_tn')">Sibling 1 </a>

Open in new window

leakim971

an update to the function in this case : http://jsfiddle.net/QXJWn/

function showImage(image) {
    document.getElementById(image).style.visibility="visible"; 
}
    
function hideImage(image) {
    document.getElementById(image).style.visibility="hidden";  
}

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

steva

ASKER

Thanks Leakim. The basic problem was that I was just using the passed in ID to access the DOM element (image.style.visibility="visible") instead of going through getElementById(). For some reason Firefox and IE let you get away with this, but not Safari and Chrome.

Thanks. I gave you the points.

Steve

leakim971

Hi Steve,

What's up? Yes, you used shorcut references for your fields.
It's a good pratice to use :

document.getElementsByName("NAME_ATTRIBUTE")[0]
or :
document.getElementById("ID_ATTRIBUTE")

please note the << [0] >> on the first one and the << s >> after element
You can have multiple fields with the same name in a page ( [0] for the first one, [1] for the second and so on )

ID should/MUST be unique so there's no getElementsById

Thanks for the points
Best Regards

steva

ASKER

Got it! Thanks.

(I'm fine. When I'm not doing web pages for people I'm working my "software" through Microsoft's "Certified For" program to give it credibility. I hope all is well with you.).

leakim971

very nice, good luck, don't forget the fun