Jump to content

Onmouseover Works In Firefox But Not Ie


Tim Grollman
 Share

Recommended Posts

Hi, I have a bit of code which makes an image, ot at least the Alt text, appear when you mouseover an item on a list, and disappear when you mouseout. It works fine in Firefox, but I get nothing in IE or Safari. Here is a simplified version which exhibits the same fault. Can anyone tell me what I am missing please?Thanks<head> <title>MouseOver test</title> <script type="text/javascript"> function picPW() {document.getElementById("picA").style.visibility="visible";} function picCT() {document.getElementById("picB").style.visibility="visible";} function picGolf() {document.getElementById("picC").style.visibility="visible";} function picOffPW() {document.getElementById("picA").style.visibility="hidden";} function picOffCT() {document.getElementById("picB").style.visibility="hidden";} function picOffGolf() {document.getElementById("picC").style.visibility="hidden";} </script></head><body> <table> <tr> <th>Choose design:</th> <td > <select> <option> </option> <option onMouseOver="picPW()" onMouseout="picOffPW()">Choice A</option> <option onMouseover="picCT()" onMouseout="picOffCT()">Choice B</option> <option onMouseover="picGolf()" onMouseout="picOffGolf()">Choice C</option> </select> </td> </tr></table> <div> <img id="picA" src="images/ChoiceA.gif" alt="Choice A" style="position: absolute; visibility: hidden" /> <img id="picB" src="images/ChoiceB.gif" alt="Choice B" style="position: absolute; visibility: hidden" /> <img id="picC" src="images/ChoiceC.gif" alt="Choice C" style="position: absolute; visibility: hidden" /></div> </body>

Link to comment
Share on other sites

I don't know the answer to the question, but you should consider making one function that is a bit more extensible. For example, give each option a value which is the same as the id of the image associated with it, and when you call the mouseover/out function, do it like this:onmouseover="picShow(this)" and onmouseout="picShow(this)"Then the function would look like:function picShow(el) {pic = document.getElementById(el.value);if (pic.style.visibility="hidden") {pic.style.visibility="visible") } else if (pic.style.visibility="visible") {pic.style.visibility="hidden") }}Then you can reuse the one function as many times as you need provided you have an option with the same value as the image it is associated with. If you only ever want it for those three images, then don't bother lol.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...