Image Swap on Mouseover

**McKirahan** · Jul 20 '05, 01:14 PM

Re: Image Swap on Mouseover

"OysterCrac ker" <oc@sc.rr.nonon ono.com> wrote in message
news:jPBKb.2366 93$I53.11159304 @twister.southe ast.rr.com...[color=blue]
> Hi - I've previously used js to swap images on mouseover in a menu. I'm
> stumped on a different situation and would appreciate some advice. I would
> like to swap imageA to ImageB when I mouseover imageC. Also, swap imageA[/color]
to[color=blue]
> ImageB when I mouseover a text link. How do I do those?
> Thanks,
> ~OC~[/color]

Perhaps?

<html>
<head>
<title>ABC.ht m</title>
</head>
<body>
<br><img src="A.gif" name="AB" border="0" width="10" height="10" alt="">
<br><a href="#" onMouseOver='AB .src="B.gif"'>< img src="C.gif" border="0"
width="10" height="10" alt=""></a>
<br><a href="#" onMouseOver='AB .src="B.gif"'>L INK</a>
</body>
</html>

Watch for word-wrap.

Also, adjust the image names and "width=" and "height=" attributes as well
as the "href=" values.

**Richard Cornford** · Jul 20 '05, 01:14 PM

Re: Image Swap on Mouseover

"McKirahan" <News@McKirahan .com> wrote in message
news:t4CKb.7655 12$Fm2.732119@a ttbi_s04...
<snip>[color=blue]
><br><img src="A.gif" name="AB" border="0" width="10"
> height="10" alt="">
><br><a href="#" onMouseOver='AB .src="B.gif"'>< img src="C.gif"
>border="0" width="10" height="10" alt=""></a>
><br><a href="#" onMouseOver='AB .src="B.gif"'>L INK</a>[/color]
<snip>

Because you are using the name of the image element that is to have its
SRC swapped as an *unqualified* identifier this code is relying on one
of two non-standard mechanisms. Either it is assuming that named element
references will be made available as global variables with corresponding
names, or it is relying of the internally generated event handling
functions being provided with special scope handling mechanisms so they
can resolve the identifier as a named property at some other point in
the DOM (probably as named properties of the document object).

And many browsers provide one, or both, of these mechanisms (though the
special scope resolution for event handling functions is implemented
very differently between browses). However, there are browses that would
otherwise happily handle the image swapping but do not support the
identifier resolution required by you code (You would get the equivalent
of "AB is null or not an object" error reports (assuming the browser
reports script errors)).

The widest support for referencing a named image element would be as a
named property of the (W3C HTML DOM specified) - document.images -
collection:-

onmouseover="do cument.images['AB'].src = 'B.gif';"

- but some really ancient browsers (along with some incomplete XHTML
implementations ) do not provide an images collection. For those older
browsers there is just no way of accessing the image elements so the
image swapping could not happen anyway, but there is no reason to
generate JavaScript error reports in the absence of the required
collections. That would be easiest achieved by passing the image
swapping task to a function that checked for the existence of the -
document.images - collection prior to attempting to use it.:

<script type="text/javascript">
function swapABimage(url ){
var img;
if((document.im ages)&&(img = document.images .AB)){
img.src = url;
}
}
</script>
....
onmouseover="sw apABimage('B.gi f');"

Should function on all HTML browsers that are capable of swapping images
and not error (or do anything) on browsers that cannot. The function
design could be modified to be more general, perhaps passing the name of
the image as a parameter along with the URL (and using bracket notation
instead of dot notation to reference the named images collection
property).

Richard.

**OysterCracker** · Jul 20 '05, 01:14 PM

Re: Image Swap on Mouseover

"McKirahan" <News@McKirahan .com> wrote in message
news:t4CKb.7655 12$Fm2.732119@a ttbi_s04...[color=blue]
> "OysterCrac ker" <oc@sc.rr.nonon ono.com> wrote in message
> news:jPBKb.2366 93$I53.11159304 @twister.southe ast.rr.com...[color=green]
> > Hi - I've previously used js to swap images on mouseover in a menu. I'm
> > stumped on a different situation and would appreciate some advice. I[/color][/color]
would[color=blue][color=green]
> > like to swap imageA to ImageB when I mouseover imageC. Also, swap[/color][/color]
imageA[color=blue]
> to[color=green]
> > ImageB when I mouseover a text link. How do I do those?
> > Thanks,
> > ~OC~[/color]
>
>
> Perhaps?
>
> <html>
> <head>
> <title>ABC.ht m</title>
> </head>
> <body>
> <br><img src="A.gif" name="AB" border="0" width="10" height="10" alt="">
> <br><a href="#" onMouseOver='AB .src="B.gif"'>< img src="C.gif" border="0"
> width="10" height="10" alt=""></a>
> <br><a href="#" onMouseOver='AB .src="B.gif"'>L INK</a>
> </body>
> </html>
>
>
> Watch for word-wrap.
>
> Also, adjust the image names and "width=" and "height=" attributes as well
> as the "href=" values.
>
>[/color]

Wow, that was easy! Thought I needed to define a function. It worked great.
Thanks for your help.
~OC~

**McKirahan** · Jul 20 '05, 01:14 PM

Re: Image Swap on Mouseover

> Wow, that was easy! Thought I needed to define a function. It worked
great.[color=blue]
> Thanks for your help.
> ~OC~[/color]

Isn't it! I found this approach a few years ago.

It sure beats the "function MM_swapImage()" I see on so many sites.

Perhaps, someone will read this post and inform us if there's any downside.

**Ivan Marsh** · Jul 20 '05, 01:14 PM

Re: Image Swap on Mouseover

On Tue, 06 Jan 2004 21:22:35 +0000, McKirahan wrote:
[color=blue][color=green]
>> Wow, that was easy! Thought I needed to define a function. It worked[/color]
> great.[color=green]
>> Thanks for your help.
>> ~OC~[/color]
>
> Isn't it! I found this approach a few years ago.
>
> It sure beats the "function MM_swapImage()" I see on so many sites.
>
> Perhaps, someone will read this post and inform us if there's any
> downside.[/color]

The images aren't already preloaded into cache if you do it that way...
not that that's much of a downside.

--
i.m.
The USA Patriot Act is the most unpatriotic act in American history.

**OysterCracker** · Jul 20 '05, 01:15 PM

Re: Image Swap on Mouseover

"Ivan Marsh" <annoyed@you.no w> wrote in message
news:pan.2004.0 1.06.22.50.51.9 35786@you.now.. .[color=blue]
> On Tue, 06 Jan 2004 21:22:35 +0000, McKirahan wrote:[color=green]
> >
> > Isn't it! I found this approach a few years ago.
> >
> > It sure beats the "function MM_swapImage()" I see on so many sites.
> >
> > Perhaps, someone will read this post and inform us if there's any
> > downside.[/color]
>
> The images aren't already preloaded into cache if you do it that way...
> not that that's much of a downside.
>[/color]

Yeah, after McKirahan was kind enough to share the solution, I added a
simple preload script into the <head> of the page. It seemed to work fine,
with no delay in image swapping. Any hidden minefields in this approach?
~OC~

**Brian Genisio** · Jul 20 '05, 01:15 PM

Re: Image Swap on Mouseover

McKirahan wrote:
[color=blue][color=green]
>>Wow, that was easy! Thought I needed to define a function. It worked[/color]
>
> great.
>[color=green]
>>Thanks for your help.
>>~OC~[/color]
>
>
>
> Isn't it! I found this approach a few years ago.
>
> It sure beats the "function MM_swapImage()" I see on so many sites.
>
> Perhaps, someone will read this post and inform us if there's any downside.
>
>[/color]

I am pretty sure that MM_swapImage() is an auto-generated function, by
one of the WYSIWYG editors, (MacroMedia, I believe). In that case, it
is probably a lot easier to do it that way, from what I know about
auto-generated code. The human author is not writing any javascript in
this case.

Also, you should use a function if you want to do anything else. You
see, when you give onMouseOver a function, you are really giving it a
block of code to execute, which runs exactly what you tell it to. If
the function is in global space, it gets called. If, instead, you put
your code in that block, it will work just the same.

In my opinion, using a function is much more readable... A function
named: SwapImage(name, "Img") is easier to read when maintaining code in
the future. Someone else will need to decipher your code to figure out
what it is trying to do, instead of read a useful function name.

Brian

**Thomas 'PointedEars' Lahn** · Jul 20 '05, 01:40 PM

Re: Image Swap on Mouseover

Brian Genisio wrote:
[color=blue]
> McKirahan wrote:[color=green]
>> [...] I found this approach a few years ago.
>>
>> It sure beats the "function MM_swapImage()" I see on so many sites.[/color][/color]

Although that seems nearly impossible, it is far worse than that function.
[color=blue][color=green]
>> Perhaps, someone will read this post and inform us if there's any downside.[/color]
>
> I am pretty sure that MM_swapImage() is an auto-generated function, by
> one of the WYSIWYG editors, (MacroMedia, I believe).[/color]

Macromedia Dreamweaver.
[color=blue]
> In that case, it is probably a lot easier to do it that way, from
> what I know about auto-generated code.[/color]

Maybe it is faster to include, but it is in fact only illegible
line-optimized junk. Here you are (just ask Google next time):

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document;
if((p=n.indexOf ("?"))>0&&paren t.frames.length ) {
d=parent.frames[n.substring(p+1 )].document; n=n.substring(0 ,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.fo rms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.l ayers&&i<d.laye rs.length;i++)
x=MM_findObj(n, d.layers[i].document);
if(!x && document.getEle mentById) x=document.getE lementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_sw apImage.argumen ts; document.MM_sr= new Array;
for(i=0;i<(a.le ngth-2);i+=3)
if ((x=MM_findObj( a[i]))!=null){docum ent.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}

OMFG!

That is line-optimized and thus illegible -- for no valid reason; what's
another byte for disk space or to be transmitted? With a 2 KB/s [the
minimum speed you can get with a 56k modem according to my experience]
it takes about 1/2048 or about *half* *of* *one* *thousandth of a second
longer.) It uses deprecated features. It does not check for objects.
It does not check for properties. It uses a function for finding
layers(!) to reference images, although the document.images[...]
array/collection is available from NN3/IE3 on, and it even does not
check for this. It does not use a well-defined "database" so one cannot
easily extend the set of images to swap without spoiling the namespace.
(Have I forgotten anything?)

There is no excuse for not checking for objects and properties before
accessing them and there is no excuse for such obfuscated code other
than trying not to reveal that MM has coded pure inefficient junk and,
alas, many people who call themselves programmers (but are not at all
but only point-and-click scriptkiddies -- a true hacker would never
use code like that) use it unquestioned and mostly inappropriately .
[color=blue]
> The human author is not writing any javascript in this case.[/color]

Which is *not* an advantage of it, believe it or not.

For we are now talking about the best code, I have the opportunity
to show mine again. Your previous comments have been thankfully
noted [ask Google] and a new, even more flexible version is yet to
come, but new comments are always welcome:

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

PointedEars

Image Swap on Mouseover

Image Swap on Mouseover

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment