...

View Full Version : area onMouseOver browser is giving me errors?



sebnet
06-25-2006, 01:58 PM
I am trying to have a map of Australia and whenever the mouse goes over a state the image is replaced with another image which has that state highlighted and in bold and has a link with php info.

I cant figure out where i'm going wrong, I have tried using code from various tutorials online but I cant seem to get it working.. can anyone help me?


<html><head>
<title>Test 1</title>
<script language="javascript">

function overState(state, on) {
var ie = getEle('st_base_map');
if (on == 1) {
ie.src = '/images/map_' + state + '.gif';

} else {
ie.src = '/images/map_base.gif';
}
}

function overStateTas(on) {
var ie = getEle('st_base_map_tas');
if (on == 1) {
ie.src = '/images/map_tas.gif';
} else {
ie.src = '/images/map_tas_base.gif';
}
}

</script></head>


<body>
<script type="text/javascript">
var img_base = new Image();
var img_vic = new Image();
var img_nsw = new Image();
var img_qld = new Image();
var img_nt = new Image();
var img_sa = new Image();
var img_wa = new Image();
var img_tas_base = new Image();
var img_tas = new Image();

img_base.src = '/images/map_base.gif';
img_vic.src = '/images/map_vic.gif';
img_nsw.src = '/images/map_nsw.gif';
img_qld.src = '/images/map_qld.gif';
img_nt.src = '/images/map_nt.gif';
img_sa.src = '/images/map_sa.gif';
img_wa.src = '/images/map_wa.gif';
img_tas_base.src = '/images/map_tas_base.gif';
img_tas.src = '/images/map_tas.gif';
</script>

<div style='position: absolute; z-index: 90; left: 320px; top: 65px'>
<img id="st_base_map" src="images/map_base.gif" border="0" alt="" usemap="#map_base_Map">
<map name="map_base_Map">
<area onMouseOver="overState('nsw', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="247,176, 310,176, 320,169, 333,176, 337,176, 339,170, 350,170, 342,212, 323,253, 312,248, 306,239, 299,242, 282,236, 270,227, 264,226, 261,220, 251,220" href="index.php?state=nsw">
<area onMouseOver="overState('vic', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="255,267, 257,260, 252,221, 260,221, 264,228, 269,228, 283,238, 299,243, 306,241, 311,249, 323,255, 317,262, 293,272, 270,271" href="index.php?state=vic">
<area onMouseOver="overState('sa', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="143,152, 242,145, 256,261, 253,267, 215,246, 176,211, 155,209" href="index.php?state=sa">
<area onMouseOver="overState('qld', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="204,59, 218,54, 226,67, 231,5, 237,0, 346,136, 349,169, 337,169, 336,175, 331,174, 320,168, 308,175, 246,174, 242,144, 218,146" href="index.php?state=qld">
<area onMouseOver="overState('nt', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="121,46, 121,12, 145,8, 189,16, 202,57, 216,146, 142,151" href="index.php?state=nt">
<area onMouseOver="overState('wa', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="3,142, 96,39, 119,50, 154,210, 69,264, 43,256, 4,180" href="index.php?state=wa">
</map>
</div><div style='position: absolute; z-index: 90; left: 635px; top: 338px'><img id="st_base_map_tas" src="images/map_tas_base.gif" width="79" height="44" border="0" alt="" usemap="#map_tas_base_Map">
<map name="map_tas_base_Map">
<area onMouseOver="overStateTas('1')" onMouseOut="overStateTas('0')" shape="poly" alt="" coords="6,2, 40,4, 53,23, 28,44, 17,44, 3,10" href="index.php?state=tas">
</map>
</div></div>

</body>
</html>

vwphillips
06-25-2006, 03:54 PM
have not checked the rest but you are missing


function getEle(id){
if (document.getElementById){ return document.getElementById(id); }
return document.all[id];
}

sebnet
06-26-2006, 07:14 AM
Thanks I tried using that and now when the mouse goes over the map it dissappears and doesnt come back..

vwphillips
06-26-2006, 09:41 AM
this works so check your images


<html><head>
<title>Test 1</title>
<script language="javascript">

function overState(state, on) {
var ie = getEle('st_base_map');
if (on == 1) {
ie.src = 'http://www.vicsjavascripts.org.uk/StdImages/One.gif';

} else {
ie.src = 'http://www.vicsjavascripts.org.uk/StdImages/Two.gif';
}
}

function overStateTas(on) {
var ie = getEle('st_base_map_tas');
if (on == 1) {
ie.src = '/images/map_tas.gif';
} else {
ie.src = '/images/map_tas_base.gif';
}
}
function getEle(id){
if (document.getElementById){ return document.getElementById(id); }
return document.all[id];
}
</script></head>


<body>
<script type="text/javascript">
var img_base = new Image();
var img_vic = new Image();
var img_nsw = new Image();
var img_qld = new Image();
var img_nt = new Image();
var img_sa = new Image();
var img_wa = new Image();
var img_tas_base = new Image();
var img_tas = new Image();

img_base.src = '/images/map_base.gif';
img_vic.src = '/images/map_vic.gif';
img_nsw.src = '/images/map_nsw.gif';
img_qld.src = '/images/map_qld.gif';
img_nt.src = '/images/map_nt.gif';
img_sa.src = '/images/map_sa.gif';
img_wa.src = '/images/map_wa.gif';
img_tas_base.src = '/images/map_tas_base.gif';
img_tas.src = '/images/map_tas.gif';
</script>

<div style='position: absolute; z-index: 90; left: 320px; top: 65px'>
<img id="st_base_map" src="images/map_base.gif" border="0" alt="" usemap="#map_base_Map" width="300" height="300" >
<map name="map_base_Map">
<area onMouseOver="overState('nsw', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="247,176, 310,176, 320,169, 333,176, 337,176, 339,170, 350,170, 342,212, 323,253, 312,248, 306,239, 299,242, 282,236, 270,227, 264,226, 261,220, 251,220" href="index.php?state=nsw">
<area onMouseOver="overState('vic', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="255,267, 257,260, 252,221, 260,221, 264,228, 269,228, 283,238, 299,243, 306,241, 311,249, 323,255, 317,262, 293,272, 270,271" href="index.php?state=vic">
<area onMouseOver="overState('sa', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="143,152, 242,145, 256,261, 253,267, 215,246, 176,211, 155,209" href="index.php?state=sa">
<area onMouseOver="overState('qld', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="204,59, 218,54, 226,67, 231,5, 237,0, 346,136, 349,169, 337,169, 336,175, 331,174, 320,168, 308,175, 246,174, 242,144, 218,146" href="index.php?state=qld">
<area onMouseOver="overState('nt', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="121,46, 121,12, 145,8, 189,16, 202,57, 216,146, 142,151" href="index.php?state=nt">
<area onMouseOver="overState('wa', '1')" onMouseOut="overState('', '0')" shape="poly" alt="" coords="3,142, 96,39, 119,50, 154,210, 69,264, 43,256, 4,180" href="index.php?state=wa">
</map>
</div><div style='position: absolute; z-index: 90; left: 635px; top: 338px'><img id="st_base_map_tas" src="images/map_tas_base.gif" width="79" height="44" border="0" alt="" usemap="#map_tas_base_Map">
<map name="map_tas_base_Map">
<area onMouseOver="overStateTas('1')" onMouseOut="overStateTas('0')" shape="poly" alt="" coords="6,2, 40,4, 53,23, 28,44, 17,44, 3,10" href="index.php?state=tas">
</map>
</div></div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum