Jump to content

hover buttons, background in div.

daveoffy

By daveoffy
in Javascript Help

Recommended Posts

daveoffy Regular Member

daveoffy

Posted
Posted

I have a set of buttons, all in a div. The buttons are transparent over the div, so the div has the background I want to switch from. button and buttonhover are the divs. it is like this so far

 

<div class="button"><img src="image.png"><img src="image1.png"></div>

 

I want so when I hover that the class changes.

Link to comment
https://forums.phpfreaks.com/topic/148837-hover-buttons-background-in-div/
Share on other sites
daveoffy Regular Member

daveoffy

Posted
  • Author
Posted

*could not modify*

 

Ok so, When I have an image in that div of the class, when I am over the image it wont switch.

 

<div class="buttonbg">
<img src="../skin/images/editor.png" width="15px" height="15px" onclick="addText('editor', '<html>\n<head>\n<title></title>\n</head>\n<body>\n\n</body>\n</html>');">
</div>

daveoffy Regular Member

daveoffy

Posted
  • Author
Posted

the javascript

 

<script type="text/javascript">
var classname = 'buttonbg';
var classname1 = 'buttonbg';
var classname2 = 'hoverbuttonbg';
var feature = 'single';
function getElementsByClassName(needle)
{
   var my_array = document.getElementsByTagName("*");
   var retvalue = new Array();
   var i;
   var j;

   for (i=0,j=0;i<my_array.length;i++)
   {
      var c = " " + my_array[i].className + " ";
      if (c.indexOf(" " + needle + " ") != -1) retvalue[j++] = my_array[i];
   }
   return retvalue;
}

function toggle()
{
   var divs = getElementsByClassName(classname)
   for(i=0; i <divs.length;i++)
   {
      if(divs[i].className == classname1)
      {
         divs[i].className = classname2;
         classname = classname2;
      }
      else
      {
         divs[i].className = classname1;
         classname = classname1;
      }
   }
}

function rollon(e)
{
   var srcId, srcElement, targetElement;
   if (window.event) e = window.event;
   srcElement = ( e.srcElement ) ? e.srcElement : e.target;

   if ( srcElement.className == classname1 )
   {
      if ( feature == 'all' )
      {
         toggle();
      }
      else if ( feature == 'single' )
      {
         srcElement.className = classname2;
         classname = classname2;
      }
   }
}
function rolloff(e)
{
   var srcId, srcElement, targetElement;
   if (window.event) e = window.event;
   srcElement = ( e.srcElement ) ? e.srcElement : e.target;

   if ( srcElement.className == classname2 )
   {
      if ( feature == 'all' )
      {
         toggle();
      }
      else if ( feature == 'single' )
      {
         srcElement.className = classname1;
         classname = classname1;
      }
   }
}
document.onmouseover = rollon;
document.onmouseout = rolloff;
</script>

darkfreaks Advanced Member

darkfreaks

Posted
Posted

Dot-notation is most commonly used in JS to access properties of objects, which means that the property name is given after a full stop character.

 

For example:

 

Given:

 

<form id="myForm" action="/">

  <div><input name="foo"></div>

</form>

 

We can say:

 

var myForm = document.getElementById("myForm");

var input = myForm.foo;

 

Here we call the getElementById property of the document object as a function, and then we take the foo property of the form (which is the input with the name "foo").

darkfreaks Advanced Member

darkfreaks

Posted
Posted

also some of your if statements are missing curly brackets {}  ;)

 

var classname = 'buttonbg';
var classname1 = 'buttonbg';
var classname2 = 'hoverbuttonbg';
var feature = 'single';
function getElementsByClassName(needle)
{
   var my_array = document.getElementsByTagName("*");
   var retvalue = new Array();
   var i;
   var j;

   for (i=0,j=0;i<my_array.length;i++)
   {
      var c = " " + my_array[i].className + " ";
      if (c.indexOf(" " + needle + " ") != -1)retvalue[j++] = my_array[i];
   }
   return retvalue;
}

function toggle()
{
   var divs = getElementsByClassName(classname);
   for(i=0; i <divs.length;i++)
   {
      if(divs[i].className == classname1)
      {
         divs[i].className = classname2;
         classname = classname2;
      }
      else
      {
         divs[i].className = classname1;
         classname = classname1;
      }
   }
}

function rollon(e)
{
   var srcId, srcElement, targetElement;
   if (window.event) e = window.event;
   srcElement = ( e.srcElement ) ? e.srcElement : e.target;

   if ( srcElement.className == classname1 )
   {
      if ( feature == 'all' )
      {
         toggle();
      }
      else if ( feature == 'single' )
      {
         srcElement.className = classname2;
         classname = classname2;
      }
   }
}
function rolloff(e)
{
   var srcId, srcElement, targetElement;
   if (window.event) e = window.event;
   srcElement = ( e.srcElement ) ? e.srcElement : e.target;

   if ( srcElement.className == classname2 )
   {
      if ( feature == 'all' )
      {
         toggle();
      }
      else if ( feature == 'single' )
      {
         srcElement.className = classname1;
         classname = classname1;
      }
   }
}
document.onmouseover = rollon;
document.onmouseout = rolloff;

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.