1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:40 pm May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Trouble with targeted className change onMouseOver

ClassName onMouseOver

         

el_roboto

1:03 pm on Feb 20, 2007 (gmt 0)

10+ Year Member



Trying to change the class of a div when users mouseOver the parent div, as follows 


<div class="servicetab" style="margin: 0 4px 0 0;" onMouseOver="document.procurement.className='svc1picon'" onMouseOut="document.procurement.className='svc1pic'">
<div class="svc1head"></div>
<div id="procurement" class="svc1pic" ></div>
<div class="svcbody">
Hello<br/><br/><br/><br/><br/>
</div>
<a href="" target="_self" title="IT Procurement"><div class="svc1info"></div></a>
</div>

This isn't working though, don't seem to be able to target the element properly.

I can change the class easily if I put the mouseOver statement in the div which I want to change and do it this way: 


<div class="servicetab" style="margin: 0 4px 0 0;" >
<div class="svc1pic" onMouseOver="this.className='svc1picon'" onMouseOut="this.className='svc1pic'"></div>
<div class="svcbody">
Hello<br/><br/><br/><br/><br/>
</div>
<a href="" target="_self" title="IT Procurement"><div class="svc1info"></div></a>
</div>

How do I achieve this effect?

Robin_reala

1:44 pm on Feb 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, el_roboto!

document.procurement implies a global array of elements with id attributes, which isn't the case in non-IE browsers. You probably mean document.getElementById("procurement")?

[edited by: Robin_reala at 1:45 pm (utc) on Feb. 20, 2007]

Birdman

2:04 pm on Feb 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Oddly, I couldn't get it working with getElementById(). It should!

But, using childNodes, worked fine for me:

<div class="servicetab" style="margin: 0 4px 0 0;" onMouseOver="this.childNodes[3].className='svc1picon'" onMouseOut="this.childNodes[3].className='svc1pic'">
<div class="svc1head"></div>
<div class="svc1pic"></div>
<div class="svcbody">
Hello<br/><br/><br/><br/><br/>
</div>
<a href="" target="_self" title="IT Procurement"><div class="svc1info"></div></a>
</div>

By the way, welcome to WebmasterWorld!

[edited by: Birdman at 2:05 pm (utc) on Feb. 20, 2007]

el_roboto

2:29 pm on Feb 20, 2007 (gmt 0)

10+ Year Member



Brilliant!

thanks for the help, and the welcome

el_roboto

4:55 pm on Feb 20, 2007 (gmt 0)

10+ Year Member



Has a strange effect in IE6 on PC, duplicating that div directly below the parent.

is there a common issue with childNodes for IE?

Birdman

6:02 pm on Feb 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



[see below]Turns out that IE is interpreting the newlines (or any whitespace) as nodes. It sounds like it's adding a classname to a whitespace node.

As a quick test, I would remove all newlines (put the whole parent div code on one line) and then try it. Obviously, this isn't a long term fix though. Probably should consider using the getElementById approach after all. I'm sure it must work.

Sorry, I have that backwards. Mozilla interprets the whitespace as nodes, not IE. This explains to me why I had to use chilNodes[3] with my Konqueror browser.

[edited by: Birdman at 6:08 pm (utc) on Feb. 20, 2007]

Birdman

6:49 pm on Feb 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try this one:

(put this in the <head> of your page)

<script type="text/javascript">
function classchange(newclassname){
document.getElementById("test").className=newclassname;
}
</script>

Then:

<div class="servicetab" style="margin: 0 4px 0 0;" onMouseOver="classchange('svc1picon')" onMouseOut="classchange('svc1pic')">
<div class="svc1head"></div>
<div id="test" class="svc1pic"></div>
<div class="svcbody">
Hello<br/><br/><br/><br/><br/>
</div>
<a href="" target="_self" title="IT Procurement"><div class="svc1info"></div></a>
</div>

Fotiman

8:08 pm on Feb 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Here's a less obtrusive method which works cross browser: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
 <style type="text/css"> 
 #servicetab { 
  margin: 0 4px 0 0; 
 } 
 .svc1picon { background-color: #00f; color: #f00; } 
 .svc1pic { background-color: #f00; color: #00f; } 
 </style> 
 <title>Unobtrusive Example</title> 
 <script type="text/javascript"> 
 function changeClass( idref, classname ) {   
  var el = document.getElementById(idref); 
  var attributeNode = el.getAttributeNode("class"); 
  if( attributeNode ) { attributeNode.value = classname; } 
  else { el.setAttribute("class", classname); } 
 }  
 window.onload = function(){ 
  var serviceTab = document.getElementById('servicetab'); 
  serviceTab.onmouseover = function(){changeClass('procurement','svc1picon');}; 
  serviceTab.onmouseout = function(){changeClass('procurement','svc1pic');}; 
 } 
 </script> 
</head> 
<body> 
<div id="servicetab"> 
<div class="svc1head"></div> 
<div id="procurement" class="svc1pic" >Test</div> 
<div class="svcbody"> 
Hello<br/><br/><br/><br/><br/> 
</div> 
<!-- This next part is not valid... can't have a block level elment within an 
   inline element (the link) so I commented it out --> 
<!-- 
<a href="" target="_self" title="IT Procurement"><div class="svc1info"></div></a> 
--> 
</div>  
</div> 
</body> 
</html>

el_roboto

8:36 pm on Feb 20, 2007 (gmt 0)

10+ Year Member



that works a treat thanks

have ammended the error with the link also

Birdman

8:38 pm on Feb 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes Fotiman, that is better. I did try a similar method but the servicetab was a class(not id) in the original post. That led me to believe that there were going to be more than one of those div blocks, in which case you cannot use a common id. I had tried to loop through with getElementsByTagName('div') and then set event handlers like you did. Unfortunately, I couldn't get it right and was spending too much time on it :)

el_roboto

9:02 pm on Feb 20, 2007 (gmt 0)

10+ Year Member



you're kind of right there - there are 6 of these service tabs, however I've just given each a unique id and defined each in the js

good solution

I like this forum!

Fotiman

9:38 pm on Feb 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Right, you could still give them all a common class if you wanted, as long as each had it's own unique id that you could attach to in the JavaScript. :)

Birdman

10:40 pm on Feb 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That still sounds like it will be bloated:
however I've just given each a unique id and defined each in the js

Ouch! Do I smell code-bloat ;)

Here's the solution that I was working on before but never finished. It doesn't need any ids at all, so may be repeated as many times as you like: 

[pre]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
 <style type="text/css"> 
 .svc1picon { background-color: #00f; color: #f00; } 
 .svc1pic { background-color: #f00; color: #00f; } 
 </style> 
 <title>Unobtrusive AND lightweight Example</title> 
<script type="text/javascript"> 
window.onload = function(){ 
var serviceTab = document.getElementsByTagName('div'); 
for (i in serviceTab){
 if(serviceTab[i].className == 'servicetab'){
 serviceTab[i].onmouseover = function(){
 var nodes = this.childNodes; for (e in nodes) if (nodes[e].className == 'svc1pic') nodes[e].className ='svc1picon'
 }
 serviceTab[i].onmouseout = function(){
 var nodes = this.childNodes; for (e in nodes) if (nodes[e].className == 'svc1picon') nodes[e].className ='svc1pic'
 }
 }
}
} 
 </script> 
</head> 
<body> 
<div class="servicetab"> 
<div class="svc1head"></div> 
<div class="svc1pic" >Test</div> 
<div class="svcbody">Hello 1</div> 
</div> 
<div class="servicetab"> 
<div class="svc1head"></div> 
<div class="svc1pic" >Test</div> 
<div class="svcbody">Hello 2</div> 
</div> 
<div class="servicetab"> 
<div class="svc1head"></div> 
<div class="svc1pic" >Test</div> 
<div class="svcbody">Hello 3</div> 
</div> 
<div class="servicetab"> 
<div class="svc1head"></div> 
<div class="svc1pic" >Test</div> 
<div class="svcbody">Hello 4</div> 
</div> 
<div class="servicetab"> 
<div class="svc1head"></div> 
<div class="svc1pic" >Test</div> 
<div class="svcbody">Hello 5</div> 
</div> 
<div class="servicetab"> 
<div class="svc1head"></div> 
<div class="svc1pic" >Test</div> 
<div class="svcbody">Hello 6</div> 
</div> 
</body> 
</html> [/pre]

[edited by: Birdman at 10:48 pm (utc) on Feb. 20, 2007]

el_roboto

9:16 am on Feb 21, 2007 (gmt 0)

10+ Year Member



that sounds good, however there's a different svc#pic class for each service tab 


<!-- SERVICE -->
<div class="servicetab" id="svc1" style="margin: 0 4px 0 0;">
<div class="svc1head"></div>
<div class="svc1pic" id="svcprocurement"></div>
<div class="svcbody"><p>Hello</p><p>Hello</p></div>
<div class="svc1info" onclick="location.href='somewhere.php';" style="cursor:pointer;" ></div></div>
<!-- SERVICE -->
<div class="servicetab" id="svc2" style="margin: 0 4px 0 0;">
<div class="svc2head"></div>
<div class="svc2pic" id="svcsolutions"></div>
<div class="svcbody"><p>Hello</p><p>Hello</p></div>
<div class="svc2info" onclick="location.href='somewhere.php';" style="cursor:pointer;" ></div></div>
<!-- SERVICE -->
<div class="servicetab" id="svc3" style="margin: 0 4px 0 0;">
<div class="svc3head"></div>
<div class="svc3pic" id="svcmanservices"></div>
<div class="svcbody"><p>Hello</p><p>Hello</p></div>
<div class="svc3info" onclick="location.href='somewhere.php';" style="cursor:pointer;" ></div></div>
<!-- SERVICE -->
<div class="servicetab" id="svc4" style="margin: 0 4px 0 0;">
<div class="svc4head"></div>
<div class="svc4pic" id="svcsupport"></div>
<div class="svcbody"><p>Hello</p><p>Hello</p></div>
<div class="svc4info" onclick="location.href='somewhere.php';" style="cursor:pointer;" ></div></div>
<!-- SERVICE -->
<div class="servicetab" id="svc5" style="margin: 0 4px 0 0;">
<div class="svc5head"></div>
<div class="svc5pic" id="svcdisposal"></div>
<div class="svcbody"><p>Hello</p><p>Hello</p></div>
<div class="svc5info" onclick="location.href='somewhere.php';" style="cursor:pointer;"></div></div>
<!-- SERVICE -->
<div class="servicetab" id="svc6">
<div class="svc6head"></div>
<div class="svc6pic" id="svcleasing"></div>
<div class="svcbody"><p>Hello</p><p>Hello</p></div>
<div class="svc6info" onclick="location.href='somewhere.php';" style="cursor:pointer;"></div></div>

and a js 


 function changeClass( idref, classname ) { 
 var el = document.getElementById(idref); 
 var attributeNode = el.getAttributeNode("class"); 
 if( attributeNode ) { attributeNode.value = classname; } 
 else { el.setAttribute("class", classname); } 
 } 
 window.onload = function(){ 
 var svc1 = document.getElementById('svc1'); 
 svc1.onmouseover = function(){changeClass('svcprocurement','svc1picon');}; 
 svc1.onmouseout = function(){changeClass('svcprocurement','svc1pic');}; 
 
 var svc2 = document.getElementById('svc2');
 svc2.onmouseover = function(){changeClass('svcsolutions','svc2picon');}; 
 svc2.onmouseout = function(){changeClass('svcsolutions','svc2pic');}; 
 
 var svc3 = document.getElementById('svc3');
 svc3.onmouseover = function(){changeClass('svcmanservices','svc3picon');}; 
 svc3.onmouseout = function(){changeClass('svcmanservices','svc3pic');}; 
 
 var svc4 = document.getElementById('svc4');
 svc4.onmouseover = function(){changeClass('svcsupport','svc4picon');}; 
 svc4.onmouseout = function(){changeClass('svcsupport','svc4pic');}; 
 
 var svc5 = document.getElementById('svc5');
 svc5.onmouseover = function(){changeClass('svcdisposal','svc5picon');}; 
 svc5.onmouseout = function(){changeClass('svcdisposal','svc5pic');}; 
 
 var svc6 = document.getElementById('svc6');
 svc6.onmouseover = function(){changeClass('svcleasing','svc6picon');}; 
 svc6.onmouseout = function(){changeClass('svcleasing','svc6pic');}; 
 }

I'm sure there probably is a more efficient way through this

Birdman

12:52 pm on Feb 21, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ah, I see. My previous method could be altered with a regex but to be honest, what you have seems just fine.

The only thing I would do at this point is to move that script to another location and pull it in.

<script type="text/javascript" src="myscript.js"></script>

el_roboto

12:58 pm on Feb 21, 2007 (gmt 0)

10+ Year Member



done :)

thanks for everyones help

thread closed

el_roboto

2:52 pm on Mar 12, 2007 (gmt 0)

10+ Year Member



only just got round to testing this with safari on a mac, doesn't error but the swapover doesn't work

any ideas?

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:40 pm May 14, 2026