Jump to content

Javascript Multiple Rollovers


Recommended Posts

Can someone tell me where the error is in this code? - the "venues" rollover works but now the "home" rollover does not - i.e. how do add multiple rollovers - I understand there is a shorter way of coding this but I just need to keep to what I understand for now.. Many Thanks in advance :)Catherine <script language="JavaScript"><!--Rollimage = new Array ()Rollimage[0] = new Image (87,44)Rollimage[0].src = "home.gif"Rollimage[1] = new Image (87,44)Rollimage[1].src = "homerollover.gif"function SwapOut(){ document.Home.src = Rollimage[1].src; return true; }function SwapBack(){ document.Home.src = Rollimage[0].src; return true; } Rollimage = new Array () Rollimage[2] = new Image (83,44)Rollimage[2].src = "venues.gif"Rollimage[3] = new Image (83,44)Rollimage[3].src = "venuesrollover.gif"function SwapOut(){ document.Venues.src = Rollimage[3].src; return true; }function SwapBack(){ document.Venues.src = Rollimage[2].src; return true; }

  • Like 1
Link to post
Share on other sites

The syntax isn't right. You haven't declared a property "Home" or "Venues" in the document element. In simpler terms: There's no such thing document.Home or document.Values. You have to set them. You need to target elements using DOM methods and properties. This, though, is a task so simple it can be done without Javascript. Learn CSS and then use the CSS image sprites technique.

Link to post
Share on other sites

thanks for the reply, but one the rollovers works so I dont see why the other wouldn't - the document.Home.src is referred in the HTML later using:<a href="index.html" onMouseOver="SwapOut()" onMouseOut="SwapBack()"><img name="Home" I realise its probably not the 'correct' way of doing it but its currently the only way I know - Basically I did the "Home" rollover first - worked fine then tried to add the "Venues" rollover after and now only the "Venues" one works - Any suggestions by editing the current code? Thanks again

Link to post
Share on other sites

There's no such thing as the Name attribute on the <img> element. And even if there was, most browsers don't turn elements into variables because that's not a standard. I think it's only an Internet Explorer feature. I gave you links to the proper way to access elements which will work on all browsers. The reason why the first one doesn't work is because you're overwriting the function with a new function. The SwapOut() and SwapBack() functions get overwritten every time you define them. There are two solutions: give the function a different name, or make one function which accepts a parameter that tells it which element to modify.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...