onmouseover

[Sven Hanefeld]

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?

[DB McGee]

"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'.

[Thomas 'PointedEars' Lahn]

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.

[Yann-Erwan Perio]

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 :-)

[Sven Hanefeld]

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 :-)

[Thomas 'PointedEars' Lahn]

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

[Yann-Erwan Perio]

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;
}
}

[Thomas 'PointedEars' Lahn]

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

[Yann-Erwan Perio]

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.