Change element ID onmouseover/onmouseout any element in a class

Question

I need to change an element's id when I mouseover a different element in a particular class. I then want to change the element id back to what it was previously on mouseout from the same element that I moused over before.

In the code below I propound a basic HTML code to clarify my question. I wish to change <div id="Set1"> to <div id="Set2"> onmouseover of any <div class="tomouseover"> . Onmouseout from that same element I wish to change the original element's id back to <div id="Set1"> .

<div id="Set1">Div to change id</div>
<div class="tomouseover">Mouse over to change Set1 to Set2</div>
<div class="tomouseover">Mouse over to change Set1 to Set2</div>

+1 to ANY ideas! I'm royally stuck...

Answer 1

Pure JavaScript: (credit goes to Nathan's answer)

var ele = document.querySelectorAll(".tomouseover");
for(var i=0; i < ele.length; i++){
    ele[i].addEventListener("mouseover", function(){
        document.querySelector("#Set1").setAttribute("id", "Set2");
    });
    ele[i].addEventListener("mouseout", function(){
        document.querySelector("#Set2").setAttribute("id", "Set1");
    });
}

Answer 2

If you can use jQuery , here's a code that changes the id of #Set1 to #Set2 when the mouse is moved over .tomouseover and changes back to #Set1 when you mouse out:

$('.tomouseover').mouseover(function() {
    $('#Set1').attr('id','Set2');
}).mouseout(function() {
    $('#Set2').attr('id','Set1');
});​

jsFiddle example: http://jsfiddle.net/XNu5H/

Hope this helps!

Answer 3

You can try Derek's answer but you will soon discover that querySelector is not supported by IE8 in quirks mode or IE 7 and lower, and that addEventListener is not supprted by IE 8 and lower at all.

Choices for plain js include writing your own getElementsByClassname function (not particularly difficult) or use event delegation so that you attach only one listener for each event and need a simple hasClass function.

Anyhow, here's an example:

Some standard library functions that any javscripter should have in a library or be able to code in a few minutes:

// Minimalist addEvent function, ok for the current web
function addEvent(el, fn, evt) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false) 
  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, fn);
  } 
}

// Returns true or false depending on whether element el has class classname
function hasClassname(el, classname) {
  var re = new RegExp('(^|\\s)' + classname + '(\\s|$)');
  return re.test(el.className); 
}

A function to do the work:

// Toggle the id. Note that this deals with the case where
// the element to toggle isn't found to prevent errors being thrown
function toggleId(e) {
  e = e || window.event;
  var el = e.target || e.srcElement;
  var o;

  if (hasClassname(el, 'tomouseover')) {

    if (e.type == 'mouseover') {
      o = document.getElementById('set1');

      if (o) o.id = 'set2';

    } else if (e.type == 'mouseout') {
      o = document.getElementById('set2');

      if (o) o.id = 'set1';
    }
  }
}

// Attach the listener onload, could also add from a bottom
// script or inline. If inline, use `toggleId(event)`
window.onload = function() {
  addEvent(document.body, toggleId, 'mouseover');
  addEvent(document.body, toggleId, 'mouseout');
}

The above will work in all browsers back to IE6 and NN 3 or so and will continue to work in future browsers that are either W3C or IE event models.