By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,718 Members | 1,196 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,718 IT Pros & Developers. It's quick & easy.

Image Swap on Mouseover

P: n/a
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 to
ImageB when I mouseover a text link. How do I do those?
Thanks,
~OC~
Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies

P: n/a
"OysterCracker" <oc@sc.rr.nononono.com> wrote in message
news:jP***********************@twister.southeast.r r.com...
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 to ImageB when I mouseover a text link. How do I do those?
Thanks,
~OC~

Perhaps?

<html>
<head>
<title>ABC.htm</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"'>LINK</a>
</body>
</html>
Watch for word-wrap.

Also, adjust the image names and "width=" and "height=" attributes as well
as the "href=" values.
Jul 20 '05 #2

P: n/a
"McKirahan" <Ne**@McKirahan.com> wrote in message
news:t4CKb.765512$Fm2.732119@attbi_s04...
<snip>
<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"'>LINK</a>

<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="document.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.images)&&(img = document.images.AB)){
img.src = url;
}
}
</script>
....
onmouseover="swapABimage('B.gif');"

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.
Jul 20 '05 #3

P: n/a
"McKirahan" <Ne**@McKirahan.com> wrote in message
news:t4CKb.765512$Fm2.732119@attbi_s04...
"OysterCracker" <oc@sc.rr.nononono.com> wrote in message
news:jP***********************@twister.southeast.r r.com...
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 to
ImageB when I mouseover a text link. How do I do those?
Thanks,
~OC~

Perhaps?

<html>
<head>
<title>ABC.htm</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"'>LINK</a>
</body>
</html>
Watch for word-wrap.

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


Wow, that was easy! Thought I needed to define a function. It worked great.
Thanks for your help.
~OC~
Jul 20 '05 #4

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

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.
Jul 20 '05 #5

P: n/a
On Tue, 06 Jan 2004 21:22:35 +0000, McKirahan wrote:
Wow, that was easy! Thought I needed to define a function. It worked

great.
Thanks for your help.
~OC~


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.


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.

Jul 20 '05 #6

P: n/a
"Ivan Marsh" <an*****@you.now> wrote in message
news:pa****************************@you.now...
On Tue, 06 Jan 2004 21:22:35 +0000, McKirahan wrote:

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.


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


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~
Jul 20 '05 #7

P: n/a
McKirahan wrote:
Wow, that was easy! Thought I needed to define a function. It worked


great.
Thanks for your help.
~OC~


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.


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

Jul 20 '05 #8

P: n/a
Brian Genisio wrote:
McKirahan wrote:
[...] I found this approach a few years ago.

It sure beats the "function MM_swapImage()" I see on so many sites.
Although that seems nearly impossible, it is far worse than that function.
Perhaps, someone will read this post and inform us if there's any downside.
I am pretty sure that MM_swapImage() is an auto-generated function, by
one of the WYSIWYG editors, (MacroMedia, I believe).


Macromedia Dreamweaver.
In that case, it is probably a lot easier to do it that way, from
what I know about auto-generated code.
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&&parent.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.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.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.
The human author is not writing any javascript in this case.


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
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.