mboehler3 Posted November 21, 2011 Share Posted November 21, 2011 Hi all, I am trying to create a rollover effect for a menu that functions like this: I want the background image to change on when you rollover it, and then change back to its original state when rolled out I want the background image to change when you click it and stay on that image when you roll out I want the new "clicked" image to remain until another image has been clicked, which operates the same way I have my code set up here: http://www.wuzhannanan.com/backend/nov-2011-test-page.html Try it out and you'll see when you click on one of the images, it changes, but then changes back once rolled out. Is this an easy fix or is there a script I can borrow from somewhere? I haven't been able to find anything yet. Thanks in advance for any help you can provide. Link to comment Share on other sites More sharing options...
Ingolme Posted November 21, 2011 Share Posted November 21, 2011 If it were me, I'd try to keep scripts out of the attributes, but a quick fix would be this: onmouseover="if(this.className == 'middle') this.className='middle1'" onmouseout="if(this.className == 'middle1') this.className='middle'" Well, that solves the problem of the image disappearing when the mouse leaves the element. If you want to remove the style when another element is clicked you're going to have to go through all the elements setting their class to the default before changing the element's class. Link to comment Share on other sites More sharing options...
ApocalypeX Posted November 21, 2011 Share Posted November 21, 2011 This is pretty easy. The first point is just css, use the :hover pseudo class - http://www.w3schools...udo_classes.asp The second is similar, add a click event that changes the element, that classes CSS will use the new background image. Then add an onmouseout that removes the class. Third, like before, give a class to the clicked image. When you click to a new image loop through your classes and remove that class, then give that class to the new image. Equally you could just store the id of that image in a variable to speeden up the process. Edit: Haha Ingolme beat me to it. Link to comment Share on other sites More sharing options...
mboehler3 Posted November 22, 2011 Author Share Posted November 22, 2011 Ok I've got the first two steps down: http://www.wuzhannanan.com/backend/nov-2011-test-page.html But I'm having trouble changing the classes when another element is clicked. I can't find any scripts available and I haven't had much luck writing it myself. Can someone please give me an idea of what the code will look like? Link to comment Share on other sites More sharing options...
thescientist Posted November 22, 2011 Share Posted November 22, 2011 why don't you show us what you have so far. Link to comment Share on other sites More sharing options...
mboehler3 Posted November 22, 2011 Author Share Posted November 22, 2011 I figured it out, here's the code I used: <script language="JavaScript" type="text/javascript">var currentDiv = '';var oldClassName = '';function itemClicked(divID, className){if (currentDiv != ''){ document.getElementById(currentDiv).className = oldClassName;}oldClassName = document.getElementById(divID).className;document.getElementById(divID).className = className;currentDiv = divID;}</script> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.