473,756 Members | 5,656 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 5506
"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
13455
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
38796
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
1559
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
1889
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
3471
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
2796
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
5669
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
19498
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
6314
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
9454
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
10028
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
9868
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9707
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...
0
8709
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5139
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5301
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3804
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
2
3352
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.