• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 460
  • Last Modified:

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
0
steva
Asked:
steva
  • 6
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
put the ID of the image inside simple quote :

onmouseover="showImage('sib_1_tn')" onmouseout="hideImage('sib_1_tn')
0
 
leakim971PluritechnicianCommented:
<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

0
 
leakim971PluritechnicianCommented:
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

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
leakim971PluritechnicianCommented:
0
 
stevaAuthor Commented:
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
0
 
leakim971PluritechnicianCommented:
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
0
 
stevaAuthor Commented:
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.).
0
 
leakim971PluritechnicianCommented:
very nice, good luck, don't forget the fun
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now