change class of an object

@supercainJul 26.2006

hello

what was the code to make change the class of an object when the mouse come over another object on the same page (such a button or link)?

I would appreciate your help.

to post a comment

JavaScript

14 Comments(s) _↴

@sbarrettJul 26.2006 — #<Div id='MyDiv' "onmouseover=Element_OnMouseOver('MyDiv')">

Move mouse here

</DIV>

...

function Element_OnMouseOver(p_sElement)

{

document.getElementById(sElement).className = "MyStyleSheetClass";

}

@KorJul 26.2006 — #<div onmousover="this.className='newclass'" onmouseout="this.className='defaultclass'">blahbla</div>

take care [B]sbarrett[/B], your code is incorrect as you have used different cases for tags and you have quoted the event along with the function

@supercainauthorJul 26.2006 — #thanks guys. But isnt that code to change the class of an object when hovering the SAME object? what im trying to do is to have an object that when is mouseovered change the class of a DIFFERENT object. Or is the same code for both?

@KorJul 26.2006 — #Try this kinda

<i>
 </i>&lt;script type="text/javascript"&gt;
 function changeClass(id){
 var obj = document.getElementById(id);
 obj.className=obj.className=='defaultClass'?'newClass':'defaultClass';
 }
 &lt;/script&gt;
 
 &lt;div onmouseover="changeClass('myDiv')" onmouseout="changeClass('myDiv')"&gt;change class for myDiv element&lt;/div&gt;
 ...
 &lt;div id="myDiv" class="defaultClass"&gt;mydiv&lt;/div&gt;

@supercainauthorJul 26.2006 — #it really worked great!! thanks so much!!

@supercainauthorJul 26.2006 — #sorry, one more question. Sorry if i sound too annoying. With your code (excellent by the way), when you hover the link actually the object in question doesnt change class at that moment but after you mouseout the link. Also the object remains switched to the new class until you hover the link again. Any modification possible to make:

1. the class of the object change AT the moment you hover the link, and

2. that the object returns to its original class once you mouseout the link.

I know it sounds annoying but thats the only thing i would need to have this working perfectly.

Thanks again!

@tabzterJul 26.2006 — #Quite Simple Really:

"Kor" simply left out an 'e' from onmous[B]e[/B]over, otherwise its fine:

heres the new code - with e replaced (and 1 minor change)

[B]<script type="text/javascript">

function changeClass(id){

var obj = document.getElementById(id);

obj.className=(obj.className=='defaultClass')?'newClass':'defaultClass';

}

</script>

<div onmous[U]e[/U]over="javascript:changeClass('myDiv')" onmouseout="javascript:changeClass('myDiv')">change class for myDiv element</div>

...

<div id="myDiv" class="defaultClass">mydiv</div>[/B]

@KorJul 26.2006 — #Quite Simple Really:

"Kor" simply left out an 'e' from onmous[B]e[/B]over, otherwise its fine:

heres the new code - with e replaced (and 1 minor change)

[B]<script type="text/javascript">

function changeClass(id){

var obj = document.getElementById(id);

obj.className=(obj.className=='defaultClass')?'newClass':'defaultClass';

}

</script>

<div onmous[U]e[/U]over="javascript:changeClass('myDiv')" onmouseout="javascript:changeClass('myDiv')">change class for myDiv element</div>

...

<div id="myDiv" class="defaultClass">mydiv</div>[/B][/QUOTE]
Yeap, mistyped that "e"

On the other hand, no, there is no need to use [B]javascript:[/B] "pre-code". It is to be used only when substitutes a HTML action, for instance:

<a href="javascript:void(somefunction())">

...which is not quite a good method, as it is better to leave a link out there for people with javascript disabled, and use rather [B]onclick[/B] event, ended with a [B]return false[/B] along.

So that:

<i>
 </i>&lt;script type="text/javascript"&gt;
 function changeClass(id){
 var obj = document.getElementById(id);
 obj.className=obj.className=='defaultClass'?'newClass':'defaultClass';
 }
 &lt;/script&gt;
 
 &lt;div onmouseover="changeClass('myDiv')" onmouseout="changeClass('myDiv')"&gt;change class for myDiv element&lt;/div&gt;
 ...
 &lt;div id="myDiv" class="defaultClass"&gt;mydiv&lt;/div&gt;

should do the job

@supercainauthorJul 27.2006 — #hi, thanks again. I tried to modify the code to achieve the following:

1. the class of the object changes AT the moment you hover the link

2. the object returns to its original class once you mouseout the link.

without success, any ideas?

Thanks.

@KorJul 27.2006 — #If not, try this:

<i>
 </i>&lt;script type="text/javascript"&gt;
 function changeClass(id){
 var obj = document.getElementById(id);
 obj.className='newClass';
 obj.onmouseout = function(){this.className='defaultClass';}
 }
 &lt;/script&gt;
 
 &lt;div onmouseover="changeClass('myDiv')"&gt;change class for myDiv element&lt;/div&gt;
 ...
 &lt;div id="myDiv" class="defaultClass"&gt;mydiv&lt;/div&gt;

@supercainauthorJul 27.2006 — #hmm im afraid to say it didnt work. Now it changes class once and it doesnt return to its original state even if you mouseout the link.

Im stating what value is for each variable, so we can prevent any confusions

<i>
 </i>&lt;script type="text/javascript"&gt;
 function changeClass(img1)
 {
 var obj = document.getElementById(img1);
 obj.className='opacity2';
 obj.onmouseout = function(){this.className='opacity1';}
 }
 &lt;/script&gt;

an the link

<i>
 </i>&lt;a href="#" onmousover="changeClass('img1')"&gt;CHANGE "img1" CLASS&lt;/a&gt;

where:

img1 is the ID of the object to change class

opacity1 is the original class

opacity2 is the new class

It should work, or not?

@KorJul 27.2006 — #

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <style type="text/css">
 .opacity1{
 color:#ff0000;
 }
 .opacity2{
 color:#00ff00;
 }
 </style>
 <script type="text/javascript">
 function changeClass(a,id)
 {
 var obj = document.getElementById(id);
 obj.className='opacity2';
 a.onmouseout = function(){obj.className='opacity1';}
 }
 </script>
 </head>
 <body>
 <a href="#" onmouseover="changeClass(this,'img1')">CHANGE "img1" CLASS</a>
 <br>
 <br>
 <div id="img1" class="opacity1">MYDIV</div>
 </body>
 </html> 
 [/code]

@supercainauthorJul 27.2006 — #sorry! i had the code wrong! i was missing the E in "mouse"

thank you.

@KorJul 27.2006 — #Anyway, my last code is what you want. I have misunderstood in previous posts

Also in #JavaScript _↴

From 'getElementById' to 'getElementsByClassName'Need sytex for java script Email Validation - Numberic values and specific domain.

Success!

Help @supercain spread the word by sharing this article on Twitter...

Tweet This

change class of an object

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

change class of an object

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴