brainstorming - dual access rollover images

**rekk** · 12-12-2009, 05:06 PM

<a href="http://www.miniboom.net/jon/">http://www.miniboom.net/jon/</a>

So the goal is that I will have a single rollover image accessible from two points. The first point will be from the bottom menu. Using javascript, I can rollover the menu item and the photo assigned to that menu item will swap. In addition, rolling over the assigned image will cause it to swap as well.
Each isolated action (css image swap for rolling over the image OR javascript "onMouseOver" command for the menu/image link) I know how to do, what I don't know how to do is to combine it so that a single swap image can be triggered from two different locations. What do you think? Am I going to need to use hot spots somehow? Any other ideas. It's just me, so bouncing ideas back and forth would be great.
Cheers!

**jscheuer1** · 12-12-2009, 05:58 PM

If your onclick event is robust enough, most are, you may run it as any event on any element on the page. What's it look like?

**twQ** · 12-12-2009, 06:16 PM

Wait are you simply saying that you have 2 items images, divs, whatever and you want EACH of them to change the same image? I'm probably misunderstanding this as it seems very simple.

IF I'm not here's an example: http://fassist.comyr.com/rolloverexample/

the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>rollover example</title>
<script type="text/javascript">
var prevSrc;
var img;

function changeImg(id,newimg) {
img = document.getElementById(id);

prevSrc = img.src;

img.src = newimg;
}

function changeImgBk() {
img.src=prevSrc;
}
</script>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<a href=#" onMouseOver="changeImg('image1','untitled2.JPG');" onMouseOut="changeImgBk();">
link 1</a>
<a href=#" onMouseOver="changeImg('image1','untitled2.JPG');" onMouseOut="changeImgBk();">
link 2</a>
<img id="image1" src="untitled.JPG">
</body>
</html>

A very simple script, changeImg the first part is what the ID of the image you want to change is the second part is the new images src. Then the changeImgBk command simply changes it back to the original image. Hope it helps some if it's not what you wanted maybe it will help you on your way!

Tim

**rekk** · 12-12-2009, 08:14 PM

John and Tim, thanks for helping me thing about this. John, I guess I'm not sure by what you mean by robust. And the example, sorry tried to link to it using html tags, it's right here, http://www.miniboom.net/jon
Once you're there, you'll see there's a photo collage with a menu at the bottom. Each menu item is associated with one of the photos, roll over the menu item and one of the photos changes to a black-and-white version. That I know how to do with javascript since it's an active link... BUT I also want to have the option that if a person rolls over the "hot" photo, it also switches to the B&W version - that I know how to do with CSS, but to have both on the same photo seems like my coding would break down. Elegant solutions?

**jscheuer1** · 12-12-2009, 08:32 PM

Actually, you need (because of css issues with IE prior to IE 8 or it might be prior to 7) a link to do a css rollover. And the image must be a child of that link. However, you don't need a link to do a javascript image rollover. An image may have its own onmouseover and onmouseout events, ex:

Code:

<img src="color_1.jpg" alt="" onmouseover="this.src = 'B_W_1.jpg';" 
onmouseout="this.src = 'color_1.jpg';">

In fact, if you have a link somewhere else on the page that you want to do the same thing to that image:

Code:

<img id="image_1" src="color_1.jpg" alt="" onmouseover="this.src = 'B_W_1.jpg';" 
onmouseout="this.src = 'color_1.jpg';">

And elsewhere:

Code:

<a href="whatever.htm" onmouseover="document.getElementById('image_1').src = 'B_W_1.jpg';" 
onmouseout="document.getElementById('image_1').src = 'color_1.jpg';">Link Text</a>

**rekk** · 12-12-2009, 09:00 PM

Now that look s like it should work. Thanks for helping me out on this. I really haven't gone as far in javascript as I'd like. I'll try it out. Even if I manage to screw it up, your explanation is clear enough. I think I understand it a bit better. Thank you!

**twQ** · 12-15-2009, 05:38 PM

I'm confused? Did the code I provided not do what he asked?

Thread: brainstorming - dual access rollover images

Thread Tools

Search Thread

brainstorming - dual access rollover images

I think we're getting here

Bookmarks

Bookmarks

Posting Permissions