图片映射小例子

来源：互联网发布：手机自动下棋软件编辑：程序博客网时间：2024/04/27 09:07
</pre><pre name="code" class="html"><!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"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><style type="text/css">  .off1{ width: 26px;height: 45px;position: absolute;left: 190px;top: 100px; } .off2{width: 26px;height: 45px;position: absolute;left: 490px;top: 100px; } .off3{width: 26px;height: 45px;position: absolute;left: 820px;top: 100px; } .off4{width: 26px;height: 45px;position: absolute;left: 190px;top: 355px; }  .off5{width: 26px;height: 45px;position: absolute;left: 485px;top: 355px; }  .off6{width: 26px;height: 45px;position: absolute;left: 915px;top: 355px; }  .off7{width: 26px;height: 45px;position: absolute;left: 1124px;top: 355px; }</style></head><body><h1 align="center">远程灯控系统</h1><hr/><div align="center" id="div1"><img src="pictures1.jpg" border="0"  style="width:1000px;height:500px;" usemap="#planetmap" alt="大图" /><img src="off.gif" class="off1" id="myimage" border="0"  alt="小图" onclick="changeImage()" /><img src="off.gif" class="off2" id="myimage1" border="0"  alt="小图" onclick="changeImage1()"/><img src="off.gif" class="off3" id="myimage2" border="0"  alt="小图" onclick="changeImage2()"/><img src="off.gif" class="off4" id="myimage3" border="0"  alt="小图" onclick="changeImage3()"/><img src="off.gif" class="off5" id="myimage4" border="0"  alt="小图" onclick="changeImage4()"/><img src="off.gif" class="off6" id="myimage5" border="0"  alt="小图" onclick="changeImage5()"/><img src="off.gif" class="off7" id="myimage6" border="0"  alt="小图" onclick="changeImage6()"/><map name="planetmap" id="planetmap"><area shape="rect" coords="630,0,995,158"onclick="changeImage2()" alt="Venus" /><area shape="rect" coords="300,0,628,250" onclick="changeImage1()" alt="Mercury" /><area shape="rect" coords="0,0,300,250" onclick="changeImage()"  alt="Sun" /> <area shape="rect" coords="0,250,300,495" onclick="changeImage3()"  alt="Sun" />  <area shape="rect" coords="300,250,630,404" onclick="changeImage4()"  alt="Sun" />   <area shape="rect" coords="630,250,785,493" onclick="changeImage5()"  alt="Sun" />  <area shape="rect" coords="785,250,993,493" onclick="changeImage6()"  alt="Sun" /></map></div><hr/> <script type="text/javascript">function writeText(txt){document.getElementById("desc").innerHTML=txt}function changeImage(){element=document.getElementById("myimage");if (element.src.match("on"))  {  element.src="off.gif";  }else  {  element.src="on.gif";  }}function changeImage1(){element=document.getElementById("myimage1");if (element.src.match("on"))  {  element.src="off.gif";  }else  {  element.src="on.gif";  }}function changeImage2(){element=document.getElementById("myimage2");if (element.src.match("on"))  {  element.src="off.gif";  }else  {  element.src="on.gif";  }}function changeImage3(){element=document.getElementById("myimage3");if (element.src.match("on"))  {  element.src="off.gif";  }else  {  element.src="on.gif";  }}function changeImage4(){element=document.getElementById("myimage4");if (element.src.match("on"))  {  element.src="off.gif";  }else  {  element.src="on.gif";  }}function changeImage5(){element=document.getElementById("myimage5");if (element.src.match("on"))  {  element.src="off.gif";  }else  {  element.src="on.gif";  }}function changeImage6(){element=document.getElementById("myimage6");if (element.src.match("on"))  {  element.src="off.gif";  }else  {  element.src="on.gif";  }}</script></body></html>
对应的区域控制一个小灯亮灭~刚刚学习前端，努力中~
0 0