Jump to content

Image swap acting 'funky' in IE


SmokingMan
 Share

Recommended Posts

I think this is a JS problem but I could be mistaken.I have nav buttons where I use js to change the display properties to show one image or another. It works just fine in FF & Opera. But in IE it get weird (imagine that). The button will disappear when you hover on it, and will reappear when you hover over another one, but then that one disappears and so on. I can't figure it out.Here's a link to the site in question. It's still under construction so be kind. :) Here's the image scripts in question:

function welcomeOff(){  document.getElementById("welcomebutton-on").style.display="none";  document.getElementById("welcomebutton-off").style.display="inline";  }  function welcomeOn(){  document.getElementById("welcomebutton-off").style.display="none";  document.getElementById("welcomebutton-on").style.display="inline";  }function linkOff(){  document.getElementById("linkbutton-on").style.display="none";  document.getElementById("linkbutton-off").style.display="inline";  }  function linkOn(){  document.getElementById("linkbutton-off").style.display="none";  document.getElementById("linkbutton-on").style.display="inline";  }function stuffOff(){  document.getElementById("stuffbutton-on").style.display="none";  document.getElementById("stuffbutton-off").style.display="inline";  }  function stuffOn(){  document.getElementById("stuffbutton-off").style.display="none";  document.getElementById("stuffbutton-on").style.display="inline";  }function contactOff(){  document.getElementById("contactbutton-on").style.display="none";  document.getElementById("contactbutton-off").style.display="inline";  }  function contactOn(){  document.getElementById("contactbutton-off").style.display="none";  document.getElementById("contactbutton-on").style.display="inline";  }

There has to be something IE doesn't like, but I can't find it. I need a new set of eyes. :)

Link to comment
Share on other sites

Well, for one thing:

	  <img alt="Welcome Button" src="images/buttons/WelcomeButtonOff.gif" class="buttonimg" 		 height="24" width="120"  onmouseover="welcomeOn()" onmouseout="welcomeOff()" />

What's happening here is that you're putting the mouse over, and then the image disappears. I have no idea what effect it might have, but it definitely is the root of the problem.Maybe you should try a different approach instead, because trying to detect the mouse getting on or off an element that's disappearing may turn out to be a problem. Maybe instead of changing the div, just change the image source, and forget about the welcomebutton-on div

	  <img alt="Welcome Button" src="images/buttons/WelcomeButtonOff.gif" class="buttonimg" 		 height="24" width="120"  onmouseover="buttonOn(this)" onmouseout="buttonOff(this)" />

function buttonOn(_obj) {_obj.src = "images/buttons/WelcomeButtonOn.gif";}function buttonOff(_obj) {_obj.src = "images/buttons/WelcomeButtonOff.gif";}

You can preload images in Javascript like this:

myImg = new Image();myImg.src = "images/buttons/WelcomeButtonOn.gif";

Link to comment
Share on other sites

In other words, toggling the display property is NOT the normal way to do rollover buttons. Remember that when display is OFF, the object might as well not exist. It cannot post a mouseout event. I don't know why you think these methods work well in FF, because on mine they are slooooooooow. Google some better rollover methods. They exist. Image swapping is the usual engine.Me, I would use the :hover property in CSS to achieve this effect. Just google it, you'll find plenty of examples. But do remember to preload the "on" images as Ingolme says. There are CSS hacks for doing that also, or continue to use JS.

Link to comment
Share on other sites

I'll definitely try what Ingolme has suggested. But they work very quick for me in FF & Opera.....don't know why :) That's why I couldn't see why it wasn't working in IE. I wasn't surprised IE was giving me problems, just didn't know why.I can do the image swap thing, but I thought I would try another approach. I guess that's what I get for trying to reinvent something that works. :)

Link to comment
Share on other sites

I working on the single image CSS rollovers now. I found a good tutorial to follow and I thought I'd go ahead and post it in case someone else needed help with this. I have to re-work the pages and positioning, but this seems to be what I need to do to get it working with all browsers.Here's the link to the site. It's easy to read and follow. Hope this helps someone. If it helped someone as thick headed as me....who knows :)

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