Javascript Multiple Rollovers

[marisc88]

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; }

[Ingolme]

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.

[marisc88]

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

[Ingolme]

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.

[marisc88]

Excellent thank you!So I just changed "function SwapOut to function "SwapOu " just to test and they now both work