mouseovers using functioning imagemaps

[khaki]

Hi guys...

There was a question posted in another thread:

http://forums.webdeveloper.com/showthread.php?s=&threadid=7440

... which brings an interesting dilemma into play:

How can you use an imagemap (with the usemap part implemented) on a page that alters the image (imagemap) based on mousing-over different links on the page?

In other words (and this was already explained in the other thread):

If the user mouses-over link A, an image is replaced by an imagemap (fully functional with links and coordinates)...

and if the user mouses-over link B, a different image (imagemap) then replaces the other imagemap (link A's imagemap).
(i was able to have mouseover and mouseout produce and maintain the image... but that ain't the final answer :rolleyes: duh!)

:confused:

Is there a way to do this?

(all of the necessary 10% disclaimers have already been addressed in the other thread... so only a solution is needed at this point. LOL!)

This one seems like a doozy (well... no one in the other thread even sniffed it).
So... okay Javascript hotshots... let's check you out and see what ya got!
;) k

[viravan]

Have you considered putting the image map inside of a div with a specified ID, then use the document.write to update the contents of the div (the href, the new map, etc) when needed?

:)

V.V.

[khaki]

hmmm...

no... i didn't (slick thinking V.V.!)

well... i guess that i have something else to play with later then.

thanks V.V.
i'll see if i can figure-out how to do that.

;) k

EDIT: sorry Jona... i edited-out the "monkey and circus clown" comments...
it was too silly even by my standards :rolleyes:

[Jona]

Originally posted by khaki
....
(umm...V.V... can i say that your avatar scares me? kinda like monkeys and circus clowns.
i'm not being mean... it's just so.... green, or something. i don't know.
....

:D Heh... this is off-topic, but I know what you mean by "circus clowns" and "monkeys." Pinocchio and Snow White & the Seven Dwarfs used to give me nightmares...

[KayC4]

Hi Guys,

thanks so much for putting those braincells into action, I appreciate it! here's a response I received at another board (YES! I've put this question all over the internet! LOL)

What I would reccomend to do is:
<span id="changeMe"><img src="filename.jpg" name="image" usemap="var1"></span>

<a href="file.html" onMouseover="document.images['image'].src='newimage1.jpg'; changeSpan('Link1'); return true;">Link 1</a>

function changeSpan(Link1) {
var obj = eval("document.all.changeMe");
obj.innerHTML = "<img src='filename.jpg' name='image' usemap='" + Link1 + "'>"
}

I implemented this method in my html file and it works, but only using IE. if anyone has an idea that will work in both netscape and IE, I'd LOVE to hear it!!!! Thanks bunches!

[viravan]

Remember that a div to IE is a layer to NN....

:)

V.V.

[Jona]

That's basically what V.V. said... :) But now you've got the whole code for IE.

As for Netscape.... I dunno. Imagemaps have never been my thing (images haven't ever been my thing either), but I'll look at it anyways..

[viravan]

Just remember that a div to IE is just a layer to NN -- so, there you have it.

:)

V.V.

[Jona]

V.V., does Netscape have a property for layers like IE's innerHTML for divisions?

[viravan]

No..but you can use document.write just the same.

:)

V.V.

[Jona]

But document.write() will wipe out the page completely. Then you'll get an error, "document.images['image'] is null or not an object."

[viravan]

Sorry for not being clear. When I said document write, this is what I mean:


if (document.layers) {
var myDiv = document.layers["tblBody"].document;
myDiv.open();
myDiv.write(str);
myDiv.close();



Oke Doke?

:)

V.V.

[havik]

Netscape 6 uses document.getElementByID more effectively. Actually I don't know if NS6 supports document.all (it should).

Here's an example of how to use both:

NS6 = (document.getElementById&&!document.all)
IE = (document.all)

function changeSpan(Link1) {

if(IE)
var obj = eval("document.all.changeMe");
if(NS6)
var obj = eval("document.getElementByID('changeMe')");
obj.innerHTML = "<img src='filename.jpg' name='image' usemap='" + Link1 + "'>"
}

The changeMe has to be around quotes, so if single quotes won't do try \"

Make these changes to any other relevant code.

Now, getting back to Khaki's original post, I'm not an imagemap type person so I can't help you there sorry :(
But I can offer these links:
http://www.htmlgoodies.com/tutors/im.html
http://www.cris.com/~automata/tutorial.shtml

Hope that helps.

Havik

EDITED: typo errors

[Jona]

I see, so that treats the layer as an inner document? Kinda' like an IFrame without scrollbars (but with CSS you can give it scrollbars ;) )... Hmm, that's neat.