Rabu, 13 April 2011

Make image map area with onmouseover

Rabu, April 13, 2011  Try Simple Life  No comments

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

var

ImgAry=['http://i301.photobucket.com/albums/nn42/sefda34/head.png','http://i301.photobucket.com/albums/nn42/sefda34/head-6.gif','http://i301.photobucket.com/albums/nn42/sefda34/head-7.gif','http://i301.photobucket.com/albums/nn42/sefda34/head-9.gif',
'http://i301.photobucket.com/albums/nn42/sefda34/head-8.gif']
var MapAry=[];
for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
MapAry[zxc0]=new Image();
MapAry[zxc0].src=ImgAry[zxc0];
}

function Swap(id,nu){
document.getElementById(id).src=MapAry[nu].src;
}
/*]]>*/
</script></head>
<body>
<img id="tst" src="http://i301.photobucket.com/albums/nn42/sefda34/head.png" usemap="#MyMap" border="0"/>
<map name="MyMap" >
<area href="http://b-lajar.blogspot.com/" shape="rect" coords="25,0,85,100" onmouseover="Swap('tst',1);"
onmouseout="Swap('tst',0);" />

<area href="http://www.logoscom.blogspot.com/" shape="rect" coords="115,0,235,100" onmouseover="Swap('tst',2);"
onmouseout="Swap('tst',0);" />

<area href="http://www.facebook.com/" shape="rect" coords="260,0,380,100" onmouseover="Swap('tst',3);"
onmouseout="Swap('tst',0);" />

<area href="http://www.photobucket.com/" shape="rect" coords="415,0,570,100" onmouseover="Swap('tst',4);"
onmouseout="Swap('tst',0);" />
</map>

</body>

</html>

Posted in: ,,

0 komentar:

Posting Komentar

Belajar lah selalu.

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More