Using Javascript Variable in HTML IMG tag

[KayC]

Hi!

I'm a newbie to Javascript and I'm hoping someone here can help me with my programming problem!

I have an html file that contains an IMG tag that has a "USEMAP" argument. I would like to be able to use a variable for the USEMAP. Here's an example:

I have two maps:
<map name=map1>
<area ....>
<area ....>
</map>
<map name=map2>
<area ....>
<area ....>
</map>

Later in the html I have this img tag

<img src=&quot;filename.jpg&quot; name=&quot;image&quot; usemap=&quot;<here is where I'd like to use a variable&quot;>

Still later in the html

<a href=&quot;file.html&quot; onMouseover=&quot;document.images['image'].src='newimage1.jpg'; return true;&quot;>Link 1</a>
<a href=&quot;file2.html&quot;
onMouseover=&quot;document.images['image'].src='newimage2.jpg'; return true;&quot;>Link 2</a>

So that when the user puts his/her mouse over &quot;Link1,&quot; the image formerly known as 'filename.jpg' is replaced by 'newimage1.jpg' and would use map named 'map1'.

If the user then places the mouse over &quot;Link2,&quot; the image would change and a new map would be used.

I'm stumped!! Any and all help that you can provide would be GREATLY appreciated!!!

Thanks!

Kay

 

[dfrankel]

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

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

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

Something simliar to this.

 

[KayC]

Hi,

Thank you SO much for responding to my question. I've not been very successful in finding help at other sites where I've posed the same question.

I tried what you suggested and I've not be successful in getting this to work. Do you know if the <span> tag only works with certain versions of browsers?

Thanks again for you help!

Kay

 

[KayC]

One more thing...

I was able to get this to work under IE, and thanks again for the help!!! But I'm still unable to get this to work in Netscape. Any ideas?

Thanks!

Kay

 

[atropozzz]

...
function changeLayer() {
// --- code for ie ---
if (document.all) {
document.test.innerHTML = &quot;<img src='images/nav_squares.gif' usemap='#nav_squares_1Map'>&quot;;
}
// --- code for netscape ---
else {
document.test.document.open();
document.test.document.write('<img src=&quot;images/nav_squares.gif&quot; name=&quot;nav_squares_1&quot; usemap=&quot;#nav_squares_1Map&quot;>');
document.test.document.close();
return
}
...
...
...
<!-- here the layer which should be changed by the function above -->
...
<div id=&quot;test&quot; style=&quot;position:absolute;&quot;></div><img name=&quot;nav_squares_1&quot; src=&quot;images/spacer.gif&quot;>


-> regarding the layer as document works in netscape > v4.0 but does not work in netscape 7.0

-> need of a further alternative

thx, atro

 

[atropozzz]

got it!!!

just replace my above mentioned function with:

function changeLayer() {
document.getElementById(&quot;test&quot.innerHTML = &quot;whatever&quot;;
return
}

that rocks ie and netscape!