Changing menu image

[bzi999]

Hi!
I'm trying to create a javaxcript application that changes a image menu
by following the mouse, something like:

<!-- menu images are m1, m2, m3.gif-->
<script language="JavaScript">
function option1()
{ document.getElementById("menu").write("<img src=m1.gif>"); }
function option2()
{ document.getElementById("menu").write("<img src=m2.gif>"); }
....</script>

<div id="menu">
<OBJECT data="m1.gif" type="image/gif" usemap="#map1" border=0>
<MAP name="map1">
<AREA HREF="#/" COORDS="0,0,50,14" onMouseOver="Option1()">
<AREA HREF="#/" COORDS="50,0,100,14" onMouseOver="Option2()">
....
</MAP></OBJECT>
</div>

I think you get the idea...
This seems very easy to do but it's not, believe me.
Any ideas? Thanks in advance!

 

[Darren]

Hi!
I'm trying to create a javaxcript application that changes a image menu
by following the mouse, something like:

<!-- menu images are m1, m2, m3.gif-->
<script language="JavaScript">
function option1()
{ document.getElementById("menu").write("<img src=m1.gif>"); }
function option2()
{ document.getElementById("menu").write("<img src=m2.gif>"); }
...</script>

<div id="menu">
<OBJECT data="m1.gif" type="image/gif" usemap="#map1" border=0>
<MAP name="map1">
<AREA HREF="#/" COORDS="0,0,50,14" onMouseOver="Option1()">
<AREA HREF="#/" COORDS="50,0,100,14" onMouseOver="Option2()">
...
</MAP></OBJECT>
</div>

I think you get the idea...
This seems very easy to do but it's not, believe me.
Any ideas? Thanks in advance!

Not sure what you're after exactly but at a guess i would think you need a
placeholder and change its href.

 

[Darren]

Hi!
I'm trying to create a javaxcript application that changes a image menu
by following the mouse, something like:

<!-- menu images are m1, m2, m3.gif-->
<script language="JavaScript">
function option1()
{ document.getElementById("menu").write("<img src=m1.gif>"); }
function option2()
{ document.getElementById("menu").write("<img src=m2.gif>"); }
...</script>

<div id="menu">
<OBJECT data="m1.gif" type="image/gif" usemap="#map1" border=0>
<MAP name="map1">
<AREA HREF="#/" COORDS="0,0,50,14" onMouseOver="Option1()">
<AREA HREF="#/" COORDS="50,0,100,14" onMouseOver="Option2()">
...
</MAP></OBJECT>
</div>

I think you get the idea...
This seems very easy to do but it's not, believe me.
Any ideas? Thanks in advance!

This might help
http://forums.devshed.com/archive/t-120380

 

[ASM]

Hi!
I'm trying to create a javaxcript application that changes a image menu
by following the mouse, something like:

<!-- menu images are m1, m2, m3.gif-->
<script language="JavaScript">
function option1()
{ document.getElementById("menu").write("<img src=m1.gif>"); }

document.getElementById('menu').getElementsByTagName('OBJECT')[0].src='m1.gif';



but it is a bad idea as 'm1.gif' not yet downloaded on mouse over

about an alternative ?
change apparence of image by css preloading ?
http://perso.wanadoo.fr/stephane.moriaux/truc/bouton_3_etats_css.htm
http://perso.wanadoo.fr/stephane.moriaux/truc/bouton_4_etats_css.htm
with some words in french... but without them I think it's clear