Jump to content

Onclick Remains Until New Mouse Click

Recommended Posts

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.

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

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.

Edited by ApocalypeX
Link to post
Share on other sites

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?

Edited by mboehler3
Link to post
Share on other sites

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

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.

  • Create New...