Javascript AddEventListener

[Otaku Ichise]

Someone can give me details for the AddEventListener javascript code? (for images) im new to this yet, i have the simple mouseout/ mouseover functions yet on my site because i dont know anything much of javascript, just very basic stuff.

Sample site containing the basic functions mouseover/ mouseout (sadly its slow loading 2nd image because of being too much javascript code calling same function?): http://otakushrine.elementfx.com/falcom/eiyuu densetsu 6/legend_of_heroes_fc.html

Thats why i wanted to try learn how to work with AddEventListener... (need help with a little detail of the code, i searched but couldnt find nothing explaning it in detail)

 

[misson]

The Mozilla Developer Center has good documentation on addEventListener. Note that older browsers (IE6) don't support addEventListener. You can write your own wrapper (if document.addEventListener doesn't exist, test for & use attachEvent) or use a JS library, such as mootools, Prototype, jQuery, Dojo, or Yahoo UI. The libraries will also provide more complex functionality, such as transition effects.

If all you want is a rollover effect, consider using CSS and the :hover selector rather than JS. Here are some other articles on the same technique.

 

[Otaku Ichise]

Shall see that later for curiosity altough i feel there will be always more slow, didnt try specificaly that way tough so wont talk much about it yet.

Here is what i used and have the advantage to have the event of 3 pics for each button: (loads faster than it could)

<script type="text/javascript">
var story_a = new Image; story_a.src = "http://forums.x10hosting.com/images/sc_story3.gif";
var story_b = new Image; story_b.src = "http://forums.x10hosting.com/images/sc_story2.gif";
var character_a = new Image; character_a.src = "http://forums.x10hosting.com/images/sc_character3.gif";
var character_b = new Image; character_b.src = "http://forums.x10hosting.com/images/sc_character2.gif";
var system_a = new Image; system_a.src = "http://forums.x10hosting.com/images/sc_system3.gif";
var system_b = new Image; system_b.src = "http://forums.x10hosting.com/images/sc_system2.gif";
var download_a = new Image; download_a.src = "http://forums.x10hosting.com/images/sc_download3.gif";
var download_b = new Image; download_b.src = "http://forums.x10hosting.com/images/sc_download2.gif";
var playguide_a = new Image; playguide_a.src = "http://forums.x10hosting.com/images/sc_playguide3.gif";
var playguide_b = new Image; playguide_b.src = "http://forums.x10hosting.com/images/sc_playguide2.gif";
function mouseOver(button)
{
if (button=="story")
{document.story.src = story_b.src;}
if (button=="character")
{document.character.src = character_b.src;}
if (button=="system")
{document.system.src = system_b.src;}
if (button=="download")
{document.download.src = download_b.src;}
if (button=="playguide")
{document.playguide.src = playguide_b.src;}
}
function mouseOut(button)
{
if (button=="story")
{document.story.src = story_a.src;}
if (button=="character")
{document.character.src = character_a.src;}
if (button=="system")
{document.system.src = system_a.src;}
if (button=="download")
{document.download.src = download_a.src;}
if (button=="playguide")
{document.playguide.src = playguide_a.src;}
}
</script>

last all you need is give the onmouseOver/Out with reference('name') to the <a> and name="" to <img>

 

[misson]

This thread's a little old, but some comment on the above code will be helpful for anyone coming across this.

Shall see that later for curiosity altough i feel there will be always more slow, didnt try specificaly that way tough so wont talk much about it yet.

I believe CSS rollovers are generally faster than JS rollovers overall, except the first time an image is changed. If you use the sprite approach (as outlined in the previous links), where the rollover pictures are stored in a single file, then CSS is faster all around.

The sequence of "if" statements is inefficient. There are two alternatives: use a switch statement and use object properties. The switch statement is potentially just as inefficient, depending on how switches are implemented internally. Efficiency of switches depends on whether they compare the value to each case, just like a sequence of ifs, or use a computed jump.

Here's one way of implementing rollover using object properties.

<script type="text/javascript">
var rolloverItems = ["story", "character", "system", download", "playguide"];
var rolloverImages = {};
for (var i=0; i<rolloverItems.length; ++i) {
  rolloverImages[rolloverItems[i]] = {over: new Image(), out: new Image()};
  rolloverImages[rolloverItems[i]].over.src = "http://forums.x10hosting.com/images/sc_" + p + "2.gif";
  rolloverImages[rolloverItems[i]].out.src  = "http://forums.x10hosting.com/images/sc_" + p + "3.gif";
}

function mouseOver(button)
{
  document.getElementById(button).src = rolloverImages[button].over.src;
}
function mouseOut(button)
{
  document.getElementById(button).src = rolloverImages[button].out.src;
}
</script>

If you alter how mouseOver() and mouseOut() are called, you can pass a reference to the button rather than having to retrieve it.

<script type="text/javascript">
...
function mouseOver(button)
{
  button.src = rolloverImages[button.id].over.src;
}
function mouseOut(button)
{
  button.src = rolloverImages[button.id].out.src;
}
</script>
...
<img id="story" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" alt=""/>