Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I like to use a custom "foreach" function of sorts for these kinds of things:</p> <pre><code>function Each( objs, func ) { if ( objs.length ) for ( var i = 0, ol = objs.length, v = objs[ 0 ]; i &lt; ol &amp;&amp; func( v, i ) !== false; v = objs[ ++i ] ); else for ( var p in objs ) if ( func( objs[ p ], p ) === false ) break; } </code></pre> <p>(Can't remember where I found the above function, but it has been quite useful.)</p> <p>Then after fetching your objects (to <code>elements</code> in this example) just do</p> <pre><code>Each( elements, function( element ) { element.addEventListener( "mouseover", function() { element.classList.add( "active" ); //element.setAttribute( "class", "active" ); element.setAttribute( "src", "newsource" ); }); // Remove class and new src after "mouseover" ends, if you wish. element.addEventListener( "mouseout", function() { element.classList.remove( "active" ); element.setAttribute( "src", "originalsource" ); }); }); </code></pre> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/element.classList" rel="nofollow"><code>classList</code></a> is a simple way for handling elements' classes. Just needs a shim for a few browsers. If you must use <code>setAttribute</code> you must remember that whatever is set with it <strong>will</strong> overwrite the previous values.</p> <p>EDIT: Forgot to mention that you need to use <code>attachEvent</code> instead of <code>addEventListener</code> on some IE versions. Test with <code>if ( document.addEventListener ) {...}</code>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload