Multiple Mouseover Events

[kahaj]

How do I have multiple mouseover events at the same time? Here's what I have so far.

<a href="assets/Ads/agapeCreations.pdf" />
  <img src="assets/Ads/agapeCreationsNorm.jpg" alt="Agape Creations Photography" 
  onmouseover="this.src='assets/Ads/agapeCreationsMouseOver.jpg' 'self.status='Agape Creations Photography';return true" 
  onmouseout="this.src='assets/Ads/agapeCreationsNorm.jpg';return true" 
  width="725" height="80" border="0" border=0 /></a><br />

I have the images swapping fine, but the self.status isn't working.

[~s.o.s~]

Inline javascript code is really not recommended.

Firstly it is difficult to maintain since it clutters the already cluttered markup. Secondly, it absolutely lacks the separation of logic and presentation, something which you should definitely try to achieve always. Thirdly changing the logic may require changing the code at multiple locations. Having the functionality packed up or encapsulated inside a single function is much recommended.

Attach a listener to your onmouseover event handler to do the required job for you and encapsulate your image swapping logic in that listener.

[kahaj]

Hmm. I'll have to do some looking up on listeners. I've not heard of them before. I'm obviously quite new to JavaScript though.

Thanks!

[adorosh]

try window.status='' instead

[kahaj]

From what I've been able to see, listeners aren't supported thoroughly yet. Are they a good universal thing to use right now?

Also, I've changed what I'm trying to accomplish. I'm trying to get the images to swap out when the mouse is rolled over. I'd really rather not have to use a mousedown. But this mouseover doesn't seem to be working for me:

<a href="assets/Ads/agapeCreations.pdf"
  onmouseover="this.src='assets/Ads/agapeCreationsMouseOver.jpg';return true"
  onmouseout="this.src='assets/Ads/agapeCreationsNorm.jpg';return true">
  <img src="assets/Ads/agapeCreationsNorm.jpg" alt="Agape Creations Photography" width="725" height="80" border="0"></a>

[~s.o.s~]

> From what I've been able to see, listeners aren't supported thoroughly yet. Are they a
> good universal thing to use right now?
There are two ways of attaching a listener to an event handler of an HTML element.

One is to directly assign a function to that event handler which would then act as a listener. An example would be:

window.onload = function() {
    initEvents();
    initGlobals();
}

The disadvantage here is that you can't attach multiple event handlers to the listener in a clean and simple manner since assigning another listener would result in the previous one being erased.

Another way is to use the functions provided by the event object such as attachEvent[IE only] or addEventListener [Gecko based browsers]. So, in a sense you are right in saying that the listener function is not supported by non-Gecko browsers like IE. Here I would be presenting a simple wrapper which would attach events in a almost transparent manner and should work on almost all browsers out there.

/**
 * Attaches a event listener
 * @author sos
 * @param el {HTMLElement} The element to which you would attach this listener
 * @param ev {String} The event name (eg. click)
 * @param fn {Function} The event listener function
 */
function addEvent(el, ev, fn) {
    if(el.addEventListener) {
        el.addEventListener(ev, fn, false);
    }
    else {
        el.attachEvent('on' + ev, fn);
    }
}

And oh, BTW, you don't need Javascript to get the rollover effect. It can be done very well achieved using a pure CSS solution.

[kahaj]

Okay, but for curiosity's sake, if I were to use JavaScript for the rollover effect, would the above be correct?

[~s.o.s~]

The problem is that you are trying to access the src property of the anchor ( <a> ) element instead of the image element. Move the mouseover and mouseout declarations from the <a> tag to the <img> tag and it should work out to be fine. But then again, it's not the best of methods, you have been warned.