Jump to content

hover buttons, background in div.

daveoffy

By daveoffy
in Javascript Help

 Share

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
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>

Link to comment
Share on other sites
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>

Link to comment
Share on other sites
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").

Link to comment
Share on other sites
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;

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.