Site hosted by Angelfire.com: Build your free website today!

JavaScript Pldikaart

CSS Pildikaart (image map) on pilt mille erinevad regioonid toimivad nagu lingid.

Näited:

 red_dot.gif Pildikaart - 1   red_dot.gif Pildikaart - 2 

Html Pildikaart

Kui oled oled tuttav Html elementidega siis tead, et pildikaart on mingisugune suvaline pilt mille erinevad regioonid käituvad nagu lingid mis viivad edasi määratud veebilehekülgedele.

Näide

Allpool olevas näites demonstreeritakse kuidas luua Html pildikaarti nii, et iga määratud regioon on hüperlink:

Kood Tulem
      <html>
    <body>
<img src="/pic/geommap.png" 
alt="Geommap" border="0" 
usemap="#geommap"/>
<map name="geommap">
<area shape="poly" 
  coords="74,0,113,29,98,72,52,72,38,27"
href="http://
pyramdesign.angelfire.
com/jav/jav_nai/pentagoon.html" 
alt="Pentagoon">
<area shape="rect" 
  coords="22,83,126,125"
href="http://pyramdesign.
angelfire.com/jav/jav_nai/ristkulik.html"
alt="Ristkulik">
<area shape="circle"
  coords="73,168,32"
href="http://pyramdesign.
angelfire.com/jav/jav_nai/ring.html"
alt="Ring"
  </map>
    </body>
      </html>
Klikka mõnele kujundile:

    Geommap Pentagoon Ristkulik Ring

JavaScripti Lisamine

Lisame sündmuse <area> märgisesse. See märgis toetab järgmisi sündmusi: onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, ja onBlur.

Allpool olevas näites on lisatud pildikaardile JavaScript:

        <html>
      <head>>
    <title>JavaScript Pildikaardis</title>
  <script type="text/javascript">
<!--
function showTutorial(name){
document.myform.stage.value = name
}
//-->
  </script>
   </head>
    <body>
 <form name="myform">
   <input type="text" name="stage" size="26" />
 </form>
<img src="/pic/geommap.png" alt="Geommap" 
        border="0" usemap="#geommap"/>
<map name="geommap">
   <area shape="poly" 
            coords="74,0,113,29,98,72,52,72,38,27"
            href="http://pyramdesign.angelfire.com/jav
/jav_na/pentagoon.html" 
alt="Pentagoon"
            target="_self" 
            onMouseOver="showGeommap('Pentagoon')" 
            onMouseOut="showGeommap('')"/>
   <area shape="rect" 
            coords="22,83,126,125"
            href="http://pyramdesign.angelfire.com/jav
/jav_nai/ristkulik.html" 
alt="Ristkulik" 
            target="_self" 
            onMouseOver="showGeommap('Ristkulik')" 
            onMouseOut="showGeommap('')"/>
   <area shape="circle" 
            coords="73,168,32"
            href="http://pyramdesign.angelfire.com/jav
/jav_nai/ring.html" alt="Ring"
	        target="_self" 
            onMouseOver="showGeommap('Ring')"
            onMouseOut="showGeommap('')"/>
  </map>
    </body>
      </html>