473,395 Members | 1,639 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,395 software developers and data experts.

Image Swap on Mouseover

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
8 5472
"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
"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
"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
> 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
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
"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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: John | last post by:
Imagine this: I have a gif-image with text, coloured green. When MouseOver occurs the gif will swap to another gif with red colourded text. On MouseOut the gif turns back to the green text. ...
8
by: PhilM | last post by:
Having googled myself silly, I now ask, if only to confirm my conclusions Is it possible to emulate the <javascript>mouseover in css, to replace link images with an alternate? Having asked, I...
2
by: Frank Bishop | last post by:
I have been trying to do image swaps and my second image does not show up, it just goes to a blank image on the mouseover. I have Windows XP SP2 and it prompts me to allow blocked content when the...
2
by: Matthew | last post by:
Hi all I'm looking for a solution that can be used in a calendar/gig guide scenario where each day is represented by a dot image. Now this dot must do the following 1. When the mouse goes...
2
by: hadAnet | last post by:
Here is my question: I can swap an image with the following line under Page_Load. ImageButton1.Attributes.Add("onmouseover", "this.src='menu1on.gif'") What I want is to swap more than one...
5
by: Ed Jay | last post by:
Why doesn't the following swap images? <head> <javascript type="text/javascript"> function swapImage() {document.images.image1.src=/images/1stimage.gif;} function swapBack()...
3
by: seamlyne | last post by:
The first method I ever used for multiple state buttons was to create a graphic for each button for each state: AboutUs_on, AbooutUs_over, AboutUs_out, etc. That works great when there are just a...
3
by: Annette Acquaire | last post by:
I have and image map with a dozen hotspot links on it that I'm trying to get to open a new image over existing one on mouseover of each COORD. The only thing I was able to do was swap image on...
1
by: wkerplunk | last post by:
On mouseover it goes to the correct map say TheMap1.jpg and then on mouseOut it defaults back to map, I need to do a onClick that sets the TheMap1.jpg mouseOver to the default TheMap.jpg so the...
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: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
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
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
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.