Link to home
Start Free TrialLog in
Avatar of MrAgile
MrAgileFlag for Australia

asked on

changing the classname of a div

Hi There,

I'm trying to use javascript to change the class name of an object (div) with onmouseover and onmouseout events. I tried the code below which seems to work fine in IE and Safari but FF is returning an error:

ctl00_mainContent_1 is not defined

Can someone post some cross browser code that will perform a similar function without giving me an error?

Sean - thanks in advance

!----- js code
 
function setClassName(objId, className) {
    	document.getElementById(objId.getAttribute("id")).className = className;
}
 
--html code
 
        <div id="ctl00_mainContent_1" class="thumbs"><a href="#" onclick="NextPreviouspage(1);" onmouseover="setClassName(ctl00_mainContent_1,'thumbsGlow');" onmouseout="setClassName(ctl00_mainContent_1,'thumbs');"><img src="images/photography/thumb_1.jpg" border="0" /><a/></div>

Open in new window

Avatar of Pratima
Pratima
Flag of India image

Try like this

 function setClassName(objId, className) {
          document.getElementById(objId).className = className;
}

</script>
<style>
.x
{
 background-color:Aqua;
}

.y
{
 background-color:Lime;
}
</style>

<div id="div1" class="x" onmouseover="setClassName('div1','y')">
     
ASKER CERTIFIED SOLUTION
Avatar of naspinski
naspinski
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of zemond
zemond

onmouseover="setClassName(ctl00_mainContent_1,'thumbsGlow');"

turn into

onmouseover="this.className = 'thumbsGlow'"

Should be fine in modern browsers
Avatar of MrAgile

ASKER

Hi All,

Thanks for the answers. naspinski's answer was the one that worked in all browsers. I appreciate everyone's help.


Sean