•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 375,195 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,163 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1467 | Replies: 7
 |
•
•
Join Date: Sep 2005
Location: St. Louis
Posts: 139
Reputation: 
Rep Power: 3
Solved Threads: 0
Junior Poster
Multiple Mouseover Events How do I have multiple mouseover events at the same time? Here's what I have so far.
I have the images swapping fine, but the self.status isn't working.
<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.
•
•
Join Date: Jun 2006
Location: India
Posts: 6,732
Reputation: 
Rep Power: 23
Solved Threads: 323
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.
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.
"I don't accept change. I don't deserve to live."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
•
•
Join Date: Sep 2005
Location: St. Louis
Posts: 139
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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!
Thanks!
•
•
Join Date: Dec 2007
Location: Russia
Posts: 11
Reputation:
Rep Power: 1
Solved Threads: 1
Newbie Poster
try window.status='' instead
•
•
Join Date: Sep 2005
Location: St. Louis
Posts: 139
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
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:
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>
•
•
Join Date: Jun 2006
Location: India
Posts: 6,732
Reputation:
Rep Power: 23
Solved Threads: 323
> 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:
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.
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.
> 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:
javascript Syntax (Toggle Plain Text)
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.
"I don't accept change. I don't deserve to live."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
•
•
Join Date: Sep 2005
Location: St. Louis
Posts: 139
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster
Okay, but for curiosity's sake, if I were to use JavaScript for the rollover effect, would the above be correct?
•
•
Join Date: Jun 2006
Location: India
Posts: 6,732
Reputation:
Rep Power: 23
Solved Threads: 323
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. "I don't accept change. I don't deserve to live."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
•
•
•
•
afghanistan ajax asp bbc blair bush conservatives cross-browser javascript menu with few lines of code daniweb developer development election events firefox home html internet iraq itv javascript javascript smooth scrolling scroll smoothly window document position javascript tab menu with rounded corners generator jbennet microsoft msdn news office on politics prevent javascript menu from getting hidden under flash movies scrollintoview after postback events serunson site software sql terror terrorist vista voters war web week wmd
- Previous Thread: Trouble with AJAX including PHP
- Next Thread: server side scripting with Javascript
