onblur and onhover to change CSS properties for divs?

ajhauser · 09-13-2012, 05:50 AM

I am fixing a website for a client, and we are working on some javascript "product maps". If you look at the following page in IE 9 - even in compatibility view - when you click on a "node" the background changes to the red dot accordingly.

http://030ba35.netsolhost.com/lmk-pr...al-t-liner.php

This is done with the following code:

Code:

<div class="Node" style="top: 7px; left: 122px;" onclick="Tliner_5()" onfocus="style.backgroundImage='url(images/item_maps/glow-ball-selected.gif)';" onblur="style.backgroundImage='url(images/item_maps/glow-ball.gif)';"></div>

I'm having trouble with the onfocus and onblur parts in FireFox and Chrome though. Apparently they don't allow you to apply this to a div. I will have several divs with the class "Node" for each product - but I only want the CLICKED div to change background image.

Is there a way that I could make this work without going "Node-1", "Node-2", "Node-3", "Node-4",... and bloating my CSS file?

Thanks very much!

vwphillips · 09-13-2012, 10:50 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.ball {
  width:50px;height:50px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
}

.active {
  background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif);
}

/*]]>*/
</style>
</head>
<div class="ball" ></div>
<br />
<div class="ball" ></div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcBall(cls,acls){
  var reg=new RegExp('\\W'+cls+'\\W'),els=document.getElementsByTagName('DIV'),z0=0;
  this.cls=[cls,cls+' '+acls];
  this.lst=document.createElement('DIV');
  for (; z0<els.length;z0++){
   if(reg.test(' '+els[z0].className+' ')){
    this.addevt(els[z0],'mouseover','swap',els[z0]);
    this.addevt(els[z0],'mouseout','swap',els[z0]);
    this.addevt(els[z0],'mouseup','swap',els[z0]);
   }
  }


}

zxcBall.prototype={

 swap:function (e,obj){
  if (e.type=='mouseup'){
   this.lst.className=this.cls[0];
   this.lst=obj;
  }
  obj.className=this.cls[e.type=='mouseout'&&this.lst!==obj?0:1];
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }

}



new zxcBall('ball','active');

/*]]>*/
</script>
<body>

</body>

</html>

ajhauser · 09-13-2012, 02:38 PM

Hi Vic - thank you for the post, but I must be missing something. When I copy/paste this into a blank file so I can see it run I have a blank screen.

Does this script just change the class of the clicked div to .active?

Thank you.

vwphillips · 09-13-2012, 03:09 PM

try using your own background images

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.ball {
  width:22px;height:22px;background-Image:url(http://030ba35.netsolhost.com/images/item_maps/glow-ball.gif);
}

.active {
  background-Image:url(http://030ba35.netsolhost.com/images/item_maps/glow-ball-selected.gif);
}

/*]]>*/
</style>
</head>
<div class="ball" ></div>
<br />
<div class="ball" ></div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcBall(cls,acls){
  var reg=new RegExp('\\W'+cls+'\\W'),els=document.getElementsByTagName('DIV'),z0=0;
  this.cls=[cls,cls+' '+acls];
  this.lst=document.createElement('DIV');
  for (; z0<els.length;z0++){
   if(reg.test(' '+els[z0].className+' ')){
    this.addevt(els[z0],'mouseover','swap',els[z0]);
    this.addevt(els[z0],'mouseout','swap',els[z0]);
    this.addevt(els[z0],'mouseup','swap',els[z0]);
   }
  }


}

zxcBall.prototype={

 swap:function (e,obj){
  if (e.type=='mouseup'){
   this.lst.className=this.cls[0];
   this.lst=obj;
  }
  obj.className=this.cls[e.type=='mouseout'&&this.lst!==obj?0:1];
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }

}



new zxcBall('ball','active');

/*]]>*/
</script>
<body>

</body>

</html>