Mouse-Over + Image Map

[Isadore]

I'm not having too much luck over at the Java forum with this, so thought I'd post here since the problem is a combination of Java and dot NET.

Its an important issue, and if resolved, can open up an array of mouse over events (pop ups, etc).

The idea is simple. You have an image. Just below the images are several Hyperlinks that cause the image to change on "mouse over".

Now, the trick is this; to change the ImageMap at the same time. Here's what I have:

Dim strMap As String
Sub Page Load...
...
strMap = &quot;<area... image map ...>&quot; &_
&quot;<area... &quot; &quot; ...>&quot; & _
&quot;<area... and so on ...>&quot;

...then, in the image tags, I have the following:

<img src='MO1.png' name=&quot;Image1&quot; width=&quot;380&quot; height=&quot;200&quot; border=&quot;0&quot; usemap=&quot;#map1&quot;>
<map name=&quot;map1&quot;>
<%=strMap%>
</map>

When the page loads, the initial image has the proper Imagemap associated with it.

Now, when I mouse over the sublabels to change the image, can I get the image map to swap out at the same time as the image?

 

[crazyboybert]

Isadore

Sorry I know this isnt what you are looking for but as far as I know the Image Map is not part of the DOM so you wont be able to change it client-side...I guess you would have to postback to the server and rewrite it there which kinda defeats the point a bit...

One thing you could do is have a number of maps in already in your page and then when you change the image you can change the map too. if you change the image by updating the src then you [red]may[/red] be able to update the usemap property clientside - i don't know....but you could certainly hide one image and show another which had a different usemap property...

hth

Rob

------------------------------------

On with the dance! let joy be unconfined;
No sleep till morn, when Youth and Pleasure meet
To chase the glowing hours with flying feet.
-Byron

------------------------------------

 

[Isadore]

Crazy --

Don't mind storing all the maps on the intial page, but how so? Put them in a textbox? Cahce? Session? HTML? The trick would be to go get them on mouse-over -- and that's my problem.

How 'bout this. Put the maps in Cache (for public use) on Page load (you can check on page load if Cache IsNothing, if so, load 'em). Do you think you could change and/or call for the Cache name on client-side? A rapid return to the Server to pick up a Cached map would work.

Or possibly even better, is just read the Image map from an XML file on the server - at any rate, the trick would be that the mouse-over event would swap images and then trigger the current image map to update itself (server post back not a real issue - just how to take care of this rather cleanly).

Appreciate your feedback.

 

[crazyboybert]

Ok. Two methods then...

1) Client-Side Only

When you create your page output ALL the Image maps that may be used on the page into the head of the document as HTML.

Have ALL the images you wish to map in the page as HTML and use CSS to swith display:none on. This will have the effect of hiding the images though the HTML will still be in the source - makwe sure these images are already mapped to the image maps int he head.

Onmouseover of the label fire a Javascript function such as below passing in an ID relating to the image.

//this will need to be set to the id of image first displayed...
var displayedImageID = "10";
function ChangeImage(imgID){
  document.getElementById(imgID).style.display = 'inline';
  document.getElementById(displayedImageID ).style.display = 'none';
  displayedImageID = imgID;
}

2) Server-Side

Set a mouse over for the label and rewrite the contents of a literal with the new image map on the server. change the image to the new one required and update the usemap attribute.


I don't know what to recommend. both have plus and down sides. Clientside is quicker fo the change between maps and images but will initally take much longer to download as all the images and maps come at once even if they are niot all used. Alterntive is a round trip to the server so....your call i guees

hth

Rob

------------------------------------

On with the dance! let joy be unconfined;
No sleep till morn, when Youth and Pleasure meet
To chase the glowing hours with flying feet.
-Byron

------------------------------------

 

[Isadore]

I'm sure there's a better way to do this -- and I'm not sure Crazy exactly how to set it up with your suggestion -- though its probably effecive.

What I did was as follows:

First stored the ImageMap (string) in a Java Function, q.v.,

function changeText(theSpan,text){
if(text==&quot;MO1&quot{
document.getElementById(theSpan).innerHTML = &quot;<area shape='rect' coords='62,23,79,32' OnMouseOver='openWinA()' onMouseOut='closeWin()'>&quot;
document.getElementById(theSpan).innerHTML += &quot;<area shape='rect' coords='62,34,83,43' OnMouseOver='openWinB()' onMouseOut='closeWin()'>&quot;
document.getElementById(theSpan).innerHTML += &quot;<area shape='rect' coords='62,45,83,54' OnMouseOver='openWinC()' onMouseOut='closeWin()'>&quot;
document.getElementById(theSpan).innerHTML += &quot;<area shape='rect' coords='62,56,84,65' OnMouseOver='openWinD()' onMouseOut='closeWin()'>&quot;
document.getElementById(theSpan).innerHTML += &quot;<area shape='rect' coords='62,67,83,76' OnMouseOver='openWinE()' onMouseOut='closeWin()'>&quot;
document.getElementById(theSpan).innerHTML += &quot;<area shape='rect' coords='62,78,83,87' OnMouseOver='openWinF()' onMouseOut='closeWin()'>&quot;
document.getElementById(theSpan).innerHTML += &quot;<area shape='rect' coords='62,89,81,98' OnMouseOver='openWinG()' onMouseOut='closeWin()'>&quot;
document.getElementById(theSpan).innerHTML += &quot;<area shape='rect' coords='62,100,81,109' OnMouseOver='openWinH()' onMouseOut='closeWin()'>&quot;
document.getElementById(theSpan).innerHTML += &quot;<area shape='rect' coords='62,111,84,120' OnMouseOver='openWinI()' onMouseOut='closeWin()'>&quot;
document.getElementById(theSpan).innerHTML += &quot;<area shape='rect' coords='62,122,83,131' OnMouseOver='openWinJ()' onMouseOut='closeWin()'>&quot;;
}

To trigger this Java routine I had the following mouse over java attached to my heading links (heading links, 7 of them, appears under an image. When you mouse over one of the headings a new chart pops up from mouse over -- trick was to get the new ImageMap in place at the same time.

This was done by changing the text in a &quot;span&quot; element. On mouse over of the chart heading:

<asp:HyperLink Text=&quot;AWW&quot; runat=&quot;server&quot; onMouseOver=&quot;MM_swapImage('Image1','','/icaae/images/MO1.png',1);changeText('theSpan','MO1')&quot;/>

Then the span was placed within the ImageMap iteself:

<img src='images/MO1.png' name=&quot;Image1&quot; width=&quot;380&quot; height=&quot;200&quot; border=&quot;0&quot; usemap=&quot;#map1&quot;>
<map name=&quot;map1&quot;>
<span id=&quot;theSpan&quot; style=&quot;visibility: hidden&quot;>'<%=strMap%>'</span>
</map>

The <%=strMap%> call is the &quot;first&quot; ImageMap that I want loaded, in the Page Load event I populated the string variable strMap with this string and sent it to the span element.

...that's it. Only took 1 day to get this right.

My first image has a legend, the legend titles are java senstive (mouse over). When you change to other images, the ImageMap is reduced to &quot;&quot;.

If you want to see an example go to:

http://frontpage.auburn.edu/icaae/index.aspx