473,604 Members | 2,686 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 5496
"OysterCrac ker" <oc@sc.rr.nonon ono.com> wrote in message
news:jP******** *************** @twister.southe ast.rr.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.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.
Jul 20 '05 #2
"McKirahan" <Ne**@McKirahan .com> wrote in message
news:t4CKb.7655 12$Fm2.732119@a ttbi_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"'>L INK</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="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.
Jul 20 '05 #3
"McKirahan" <Ne**@McKirahan .com> wrote in message
news:t4CKb.7655 12$Fm2.732119@a ttbi_s04...
"OysterCrac ker" <oc@sc.rr.nonon ono.com> wrote in message
news:jP******** *************** @twister.southe ast.rr.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.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.


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.no w> 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&&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 .
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
13452
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. -----------------This is my code: <a href="nextpage.html" onMouseOver="document.green.src='red.gif'" onMouseOut="document.green.src='green.gif'">
8
38785
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 now return to google, in case I missed heaps. ;) Regards, PhilM
2
1551
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 page loads and then I do allow. But the swap still does not show up, just the first image. Also, is there a more advanced example that has multiple swap buttons in a menu (maybe in an array)? Help appreciated. <code> <head> <title>Cool...
2
1883
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 over the dot image it swaps to the mouseover dot 2. When the mouse goes out of the dot image it restores back to the original img 3. When the img is clicked the dot image is swapped with another image
2
3466
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 image onmouseover. Is this possible? What is the syntax?
5
2784
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() {document.images.image1.src=/images/2ndimage.gif;} </script> </head><body> <a href=url onMouseOver=swapImage(); onMouseOut=swapBack();>
3
5664
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 few buttons. I'm creating interfaces now with many more buttons than "just a few". I solved the maintenance problem by having generic button images, one for each state, and having them be background images for text containers, DIVs in this...
3
19493
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 mouseover entire image, I want it on each hotspot only, so an image pertaining to each link shows up. I have done it in JavaScript, but the website I'm using doesn't use JavaScript. Y'all are obviously light-years more knowledgeable then me on html...
1
6303
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 TheMap1.jpg is now the default image not the TheMap.jpg. So after I click for information, and mouseOut of that area TheMap1.jpg will stay as all the MouseOuts Until I click another area of the map say TheMap10.jpg once clicked TheMap10.jpg will become...
0
7997
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8419
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8274
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
5882
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5441
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
3954
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2433
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1522
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1262
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.