Jump to content

Javascript Multiple Rollovers


marisc88
 Share

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