473,396 Members | 1,916 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

onmouseover

I would like to change pictures by going over them with the mouse in lighter
ones.
It must be very easy but I can't find the code for the best solution right
now.
Who can help me?
Jul 20 '05 #1
8 3160
"Sven Hanefeld" <ha******@nord-com.net> wrote in message
news:bo**********@news1.ewetel.de...
I would like to change pictures by going over them with the mouse in lighter ones.
It must be very easy but I can't find the code for the best solution right
now.
Who can help me?

Just search google groups for 'image rollovers'.
Jul 20 '05 #2
Sven Hanefeld wrote:
I would like to change pictures by going over them with the mouse in lighter
ones.
It must be very easy but I can't find the code for the best solution right
now.
Who can help me?


http://pointedears.de.vu/scripts/test/hoverMe is a solution but not the best
one (I'm working on v2.1 :-))
PointedEars

P.S.
Your line-break is b0rken (I skipped the rewrapping here.) Set it below
80 characters per line, 72-76 is recommended. And if you use automagic
line-break, avoid manual ones in paragraphs.

Jul 20 '05 #3
Thomas 'PointedEars' Lahn wrote:
I would like to change pictures by going over them with the mouse in lighter
ones.
http://pointedears.de.vu/scripts/test/hoverMe is a solution but not the best
one (I'm working on v2.1 :-))


The route you've taken in the 2.0 is a fine one, although I do have some
suggestions, if you like:
- I'd recommend to add some relatedTarget checks in the script,
- I'd also use some container for the images (in order to keep the
namespace as clean as possible).

It makes me think of a script by Gosha Bine, named "eazyroll.js", which
automated rollovers, but using a completely different conception which
you may find interesting[1].

The idea was to add a handler for the mousemove event and study the
target; if it was an image, then there was a check to see if an
alternate image existed, then a source change according name conventions
(the alternate image had to have "_a" as a postfix).

The immediate benefit was the simplicity for the programmer: he/she just
had to insert a SCRIPT include and that was all (no links, no
mouseover/mouseout coding, nothing else). And of course this was working
on major browsers (NN4+, IE4+).
Cheers,
Yep.

[1] I, for sure, was at the time extremely interested! I was then a
beginner in js (not that I'm an expert now), and his scripts made me
make huge progress and, more generally, fed my interest for programming
(I don't have a technical background). That's all nostalgy for me, when
I was taking the night bus in the Swedish winter, reading printed
scripts :-)
Jul 20 '05 #4
I allready got it now. Just didn't know the expression image rollover.
Thanks for help...
Another question:
Where can you find the the SCRIPT Includes from Gosha Bine, ?
I need the best solution.


"Yann-Erwan Perio" <y-*******@em-lyon.com> schrieb im Newsbeitrag
news:3f***********************@news.free.fr...
Thomas 'PointedEars' Lahn wrote:
I would like to change pictures by going over them with the mouse in lighterones.
http://pointedears.de.vu/scripts/test/hoverMe is a solution but not the

best one (I'm working on v2.1 :-))


The route you've taken in the 2.0 is a fine one, although I do have some
suggestions, if you like:
- I'd recommend to add some relatedTarget checks in the script,
- I'd also use some container for the images (in order to keep the
namespace as clean as possible).

It makes me think of a script by Gosha Bine, named "eazyroll.js", which
automated rollovers, but using a completely different conception which
you may find interesting[1].

The idea was to add a handler for the mousemove event and study the
target; if it was an image, then there was a check to see if an
alternate image existed, then a source change according name conventions
(the alternate image had to have "_a" as a postfix).

The immediate benefit was the simplicity for the programmer: he/she just
had to insert a SCRIPT include and that was all (no links, no
mouseover/mouseout coding, nothing else). And of course this was working
on major browsers (NN4+, IE4+).
Cheers,
Yep.

[1] I, for sure, was at the time extremely interested! I was then a
beginner in js (not that I'm an expert now), and his scripts made me
make huge progress and, more generally, fed my interest for programming
(I don't have a technical background). That's all nostalgy for me, when
I was taking the night bus in the Swedish winter, reading printed
scripts :-)

Jul 20 '05 #5
Sven Hanefeld wrote:
I allready got it now. Just didn't know the expression image rollover.
Another expression for it is `hover (image/)effect'.
Where can you find the the SCRIPT Includes from Gosha Bine, ?
Since his/her website seems not to be available, you could try to send
her/him e-mail:

http://www.google.com/search?q=%22Gosha+Bine%22
I need the best solution.
I do not know if his/her script is the best solution.
What the best solution is, also depends on your needs.

Maybe you want to take hoverMe 2.0 now and upgrade later ;-)
[Top post, TOFU]


Please read http://got.to/quote and avoid top posts in the future.
PointedEars
Jul 20 '05 #6
Sven Hanefeld wrote:
Where can you find the the SCRIPT Includes from Gosha Bine, ?
I need the best solution.


Well, as Thomas said, there isn't any best solution; I've just mentioned
Mr Bine's work to propose an alternate conception, which had
interested me at the time. Reading back the script though, I realize
that I remembered it a bit incorrectly (mousemove being used only for NN4).

You'll find the script below; don't hesitate to use it "as is", it
remains, despite the slight UA detection[1], an excellent piece of code
likely to work in most browsers.

I've rebuilt the wrapping in order to have it displayed correctly in
most newsreaders.
Enjoy,
Yep.

[1] Maybe remove the appVersion test, it doesn't apply anymore.

---

/*
eazy rollovers
(c) gosha bine, 2001

http://www.stereofrog.com/js/

*/

var _iv=parseInt(navigator.appVersion);
if(_iv>3){
var _w=window.onload+"";
window.onload=_w?
new Function("event",
"_iload();"+
_w.substring(_w.indexOf("{")+1,_w.lastIndexOf("}") )
):_iload;
}

var _ib,_is;

function _imov(e){
var hif=0;
for(var ii=0;ii<_ib.length;ii++){
if(_ib[ii] && _ib[ii].complete){
var img=document.images[ii], b=img.border,
b2=b*2, dx=e.pageX-img.x+b, dy=e.pageY-img.y+b;
var s=(dx<0 || dx>(img.width+b2) || dy<0 ||
dy>(img.height+b2) || hif) ? _is[ii]:(hif=1,_ib[ii].src);
if(img.src!=s)img.src=s;
}
}
}

function hiSrc(src,n){
var k=src.lastIndexOf(".");
return (src.substring(0,k)+"_a"+src.substring(k));
}

function _iload(){
var uNav=0,uMoz=0;
if((navigator.appName.indexOf("Netscape")!=-1) &&
(navigator.userAgent.toLowerCase().indexOf("opera" )<0))
(_iv==4)?(uNav=1):(uMoz=1);
_ib=new Array();_is=new Array();
var sp=uMoz?"width":"complete";
for(var ii=0,ia=document.images;ii<ia.length;ii++){
var img=ia[ii],hs=hiSrc(_is[ii]=img.src,ii);
if(hs){
(_ib[ii]=new Image).src=hs;
if(!uNav){
img.onmouseover=
new Function("var i=_ib["+ii+"];if(i."+sp+")this.src=i.src");
img.onmouseout=new Function("this.src=_is["+ii+"]");
}
}
}
if(uNav){
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=_imov;
}
}
Jul 20 '05 #7
Yann-Erwan Perio wrote:
Thomas 'PointedEars' Lahn wrote:
I would like to change pictures by going over them with the mouse in
lighter ones.
[<http://pointedears.de.vu/scripts/test/hoverMe>]


[...] - I'd recommend to add some relatedTarget checks in the script,


-v
- I'd also use some container for the images (in order to keep the
namespace as clean as possible).


hoverMe 2.1 being still beta, I have enhanced
v2.0 a bit -- v2.01 is release is available!

<http://pointedears.de.vu/scripts/test/hoverMe>

See hoverMe-2.0 for the previous version. With Navigation Bar,
you can just click the `Previous' button.
PointedEars
Jul 20 '05 #8
Thomas 'PointedEars' Lahn wrote:
[...] - I'd recommend to add some relatedTarget checks in the script,
-v
Ah, but about what? "Related target" issues[1], or why I'd recommend to
add related checks [2] ;-)

[1] When you define mouse events on elements which contain other
elements, you might be getting 'unexpected' handlers calls, as browsers
(as of IE, Mozilla) consider that before "mousing" over the inner
element you're "mousing" out of the outer element. As a result,
especially for rollovers, you get image flickering.

There are many solutions to this, for instance:
- don't leave any space between tags, like you did in your example;
- don't use mouseover/out but rather mouseenter/leave (support limited
to IE IIRC);
- manage handlers by capturing events, studying the related target
(fromElement/toElement in IE), so that they get called only when a
"real" mouse action has happened.

[2] The solution you've used is certainly the simplest one, but you
cannot, IMHO, expect the programmer to understand this point or even be
willing to adapt his/her HTML presentation (not even structure) to
satisfy the requirements of the javascript, the implementation should
rather take care of the issue.

Hence my suggestion :-)
hoverMe 2.1 being still beta, I have enhanced
v2.0 a bit -- v2.01 is release is available!


What about 2.1's beta's release :-p
Regards,
Yep.
Jul 20 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: laurie | last post by:
Hi. I have a DIV section that has many thumbnail images inside it. I have a DIV so all images can fit in a row and the horizontal scroll bar is used to move the thumbnails from left to right. ...
7
by: Richard | last post by:
I know I can have like <a href="#" onclick="dothis" onmouseover="dothat"> But how do you properly code two mouseover's in one statement? <a href="#" onmousever="dothis" onmouseover="dothat"> As...
7
by: windandwaves | last post by:
Hi Gurus I am trying to make this rather complicated maps with an a huge number of mouseovers and the like. I want to set up a function that OnMouseDown swaps the OnMouseOver and OnMouseOut for...
2
by: news.west.cox.net | last post by:
I have been writing a practice sliding div navigation script. I am finding myself in the position where I need to force a div into showing the hover behavior defined in css. So my question is...
3
by: drjackk | last post by:
Hello, I'm trying to change the onmouseover event dynamically. This sets-up the initial onmouseover event: <a href="home.html"> <img border="0" id="img22" src="images/home1.jpg"...
2
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....
7
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....
2
by: Justin Rowe | last post by:
I'm attempting to design a site with alot of dynamic content and intractability, however I've hit a snag when it comes to the function of the onMouseOver and onMouseOut events. Using a bit of code...
1
by: den2005 | last post by:
Hi everybody, I am confused and still looking why this codes is not working. Can anyone notice or know why this code is not working? Thanks in advance. Code working: <form id="form1"...
3
by: oopaevah | last post by:
I have written some dom code to create a list of divs, each with it's own id. I want to set the onmouseover and onmouseout events to highlight the div when the mouse is over it. However I cannot...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.