Onclick Change Onmouseover

[chasethemetal]

Hey all. I am trying to write a little script that changes the values of onmouseover, onmouseout, and onclick when someone clicks. Let me show you what I mean... <a href="#" class="a_one><div class="one" onmouseover="this.className='one-over'" onmouseout="this.className='one'" onClick="this.className='two'"></div></a> This works of course, BUT when someone clicks.... I need the code to switch to this..... <a href="#" class="a_two><div class="two" onmouseover="this.className='two-over'" onmouseout="this.className='two'" onClick="this.className='one'"></div></a> The end goal is to have a link with a roll over effect, when clicked the image changes to another image with a rollover effect, and back and forth also changing the a href class value... Any pointers would be awesome! I know this could be done with css image sprites... but I couldn't find a good example online where the 2 different images in question have the same position....

[chasethemetal]

In the perfect world there would be a this.onmouseoverName="value" or a this.onmouseoverValue="value"

[justsomeguy]

Which part do you need help with? You can change the anchor class, the div class, and the event handlers through Javascript. If you want to use custom attributes you can use getAttribute and setAttribute to deal with those.

[chasethemetal]

I guess I'm confused to how that works. I'm assuming it would look something like if className = two then setAttribute.mouseover='two-over' and setAttribute.mouseout='two' and setAttribute.onClick='one'. I am going to investigate this, but if you know of any articles dealing with it, point them my way.

[chasethemetal]

I'm searching for a way to change the event handler onmouseover with the onclick event. So that way when you click it changes all of the onmouseover and onmouseout AND the onclick events. Basically swapping styles. I guess a good example for what I trying to do would be to picture this as a play button. When your mouse is over the play, the play button changes color. When you click play it turns into a pause button, but then stays a pause button, and then when you click it again it turns into a play button.

[ShadowMage]

An easier way would be to define the styles and their hover effects in CSS, then just toggle the class with the onclick. In your CSS you would define class one and two. Then the one-over and two-over classes would be defined as one:hover and two:hover. This way, you eliminate two class names and the need for onmouseover/out. Then in your JavaScript you would define a function that toggles the class:

function toggleClass(elem) {   if (elem.className == 'one') {	  elem.className == 'two';   } else {	  elem.className == 'one';   }}

The function accepts one parameter, an element reference. It checks the passed element's class, and if it's 'one' set it to 'two', otherwise set it to 'one'.Then apply the function like this:<div class="one" onclick="toggleClass(this);">...passing this (ie, the element being clicked) to the function.

[chasethemetal]

Ah I see! Thanks!

[chasethemetal]

i might be missing something here. But my script looks like this, and the toggle doesn't work. <script type="text/javascript"> function toggleClass(elem) { if (elem.className == 'one') { elem.className == 'two'; } else { elem.className == 'one'; }} </script><style type="text/css">.one{width:50px;height:50px;background-color:#000;cursor:pointer;} .one:hover{width:50px;height:50px;background-color:#CCC;cursor:pointer;} .two{width:50px;height:50px;background-color:#F00;cursor:pointer;} .two:hover{width:50px;height:50px;background-color:#00F;cursor:pointer;}</style> <div class="one" onClick="toggleClass(this);"></div>

[justsomeguy]

The methods for dealing with CSS classes differ across browsers. Search online for some examples of changing CSS classes with Javascript and you should find a discussion about the different methods for different browsers.

[chasethemetal]

Ok thanks I'll look into it. It doesn't appear to be working in Safari, Chrome or Firefox.

[justsomeguy]

Right, className is what IE uses.

[chasethemetal]

But the question now is why does this work? <div class="one" onClick="className='two'"></div> This obviously doesn't have the desired toggle effect. but it does change the class...

[dsonesuk]

When you hover over the element its class changes to 'two-over' and you are comparing to 'two' or 'one'

[dsonesuk]

ALL browsers recognise className

function swap(elem){elem.className=="one_over" ? (elem.parentNode.className='a_one', elem.className="two_over",  elem.setAttribute("onmouseover", "this.className='two-over'"),  elem.setAttribute("onmouseout", "this.className='two'") ) : (elem.parentNode.className='a_two', elem.className="one_over",  elem.setAttribute("onmouseover", "this.className='one-over'"),  elem.setAttribute("onmouseout", "this.className='one'"));}

<a href="#" class="a_one"><span class="two" onmouseover="this.className='two-over'" onmouseout="this.className='two'" onclick="swap(this)">hhhh</span></a>

Note: is not valid to have block element(div) within inline element(a)

[chasethemetal]

The code I'm using must be with <div>'s. I'm not sure if the above example will help? Also the code works to change the class, BUT does not toggle it back n forth if I adjust the function to have single '=' and not '==' function toggleClass(elem) {if (elem.className = 'one') {elem.className = 'two';} else {elem.className = 'one';}}

[dsonesuk]

Ok! but does the anchor have to be used, or can it be a block element instead as its not linking to anything <div class="a_one"><div class="two" onmouseover="this.className='two-over'" onmouseout="this.className='two'" onclick="swap(this)">hhhh</div></div> OR swap around, wont make any difference to js code <div class="a_one"><a href="#" class="two" onmouseover="this.className='two-over'" onmouseout="this.className='two'" onclick="swap(this)">hhhh</a></div> just change anchor to block element .a_one, .a_two {width:50px; height; 25px;}.a_one a, .a_two a {display:block; height:100%;}

[thescientist]

that's because you = is an assignment operator. == or === is for comparison.http://www.w3schools.com/js/js_operators.asphttp://www.w3schools.com/js/js_comparisons.asp

[justsomeguy]

Also the code works to change the class, BUT does not toggle it back n forth if I adjust the function to have single '=' and not '=='

That's because your adjustment is always assigning "one" to the className, it's not checking the current value. The = operator is the assignment operator, not the comparison operator.

[ShadowMage]

My bad. I originally posted my function with all '==' operators. It should actually look like this:

function toggleClass(elem) {   if (elem.className == 'one') {	   elem.className = 'two';   } else {	   elem.className = 'one';   }}

Others have already explained the difference between '=' and '==' EDIT: Oh,

The methods for dealing with CSS classes differ across browsers. Search online for some examples of changing CSS classes with Javascript and you should find a discussion about the different methods for different browsers.

...className is what IE uses.

I've never had any trouble with using just className. It seems to work just fine in FF, IE, C, O and S....

[chasethemetal]

The Mage wins!!! Thanks so much. I thought I adjusted and tried all = or == combos, but I must have not because this has the desired simple effect. Thanks for everyone's thoughts. However the simple function above creates a simple toggle between classes, while using :hover to handle the rollover. Clean and simple, thanks guys!

[justsomeguy]

I've never had any trouble with using just className. It seems to work just fine in FF, IE, C, O and S....

I wrote that without looking it up, I had that confused with using setAttribute to set the class. IE requires className in that situation, but other browsers support "class" as the attribute name.