JavaScript Pldikaart
Pildikaart (image map) on pilt mille erinevad regioonid toimivad nagu lingid.
Näited:
Pildikaart - 1
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:
|
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="https://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="https://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="https://pyramdesign.angelfire.com/jav
/jav_nai/ring.html" alt="Ring"
target="_self"
onMouseOver="showGeommap('Ring')"
onMouseOut="showGeommap('')"/>
</map>
</body>
</html>
