View Full Version : mouseover making image appear elsewhere

07-25-2005, 10:59 PM
Hey Gang,

I'm using Dreamweaver MX but I can't figure out how to mouseover a button and make an image appear elsewhere. Take a look a denon.com and you will see exactly what I am talking about. Please help....

07-26-2005, 07:32 AM
looks right to me?
I mouse-over a country name and the map appears where the globe is

07-26-2005, 08:30 AM
...he's asking how to do it.

Well you'll be looking at a javascript solution I guess.

This looks like it could help you, with slight tweaking -

In this example they've changed the picture on the same image, but you want to change the picture on a different image to the one you are mousing-over?

eg. They have -

<a href="javascript:void(0)"
<img name="ImageOnly" src="logo50.gif" border=0>

But you want to do something like this -

<a href="javascript:void(0)" onMouseOver="ImageOnly.src='js.gif'">
<img src="theimageyouwanttomouseover.gif"</a>
<img name="ImageOnly" src="theimageyouwanttochange.gif" border=0>

Hope that helps!

07-26-2005, 04:08 PM
You've asked the same question a little while ago in this thread (http://www.codingforums.com/showthread.php?t=63461); if my answer didn't suffice, why didn't you simply dig that one up instead of starting a new one?

07-26-2005, 07:02 PM

I think I'm getting closer to accomplishing what I have been dying to do. Dreamweaver "lesson files" calls it a "disjointed rollover". You insert an image and then you another image elsewhere. Then have to play with behaviors inserting another image where you inserted the elsewhere image (not the first one) then you proceed with --> swap image and swap image restore.... I'm just trying to figure out the order in which this has to be applied. Does anybody know step by step?
Pls help

07-26-2005, 07:46 PM
just a thought, but maybe you could create a class or an id (depending on if you only need it for one or more pictures) for the image that you want to appear elsewhere.
something of this caliber:
#swap {
position: absolute;
top: ?px;
left: ?px;
apply that to your mouse-over and it might work. or maybe use a relative position where the px would add up to the last position.
and you could make the last image dissapear by applying a class/id to that.
a.swapster:hover {
visbility: hidden;

Just a thought, not a pro yet, but I have learned to love and hate (when it doesn't work in IE) CSS positioning.