Image map
Scris: Mie Mai 25, 2011
Am si eu o intrebare...cum se poate afla coordonatele unei imagini? Adica...imi trebuie pentru image map si ma chinui de juma de ora si ....nu reusesc sa pun nimica asa cum as vrea...plsss hellpp
Cod: Selectaţi tot
<img src="image.jpg" usemap="#map1">
<map name="map1">
<area id="a1" shape="rect" coords="9, 120, 56, 149" href="url">
<area id="a2" shape="rect" coords="100, 200, 156, 249" href="url">
</map>
<script type="text/javascript"><!--
function getCoords(id) {
var coo = document.getElementById(id).getAttribute('coords');
return coo;
}
alert(getCoords('a1'));
--></script>
Cod: Selectaţi tot
<html>
<head>
<title>Aflare coordonate mouse pe imagine</title>
<style type="text/css"><!--
body, html {
margin:0;
padding:0;
text-align:left;
}
#im {
margin:0;
padding:0;
}
#coords {
margin-top:20px;
margin-left:20px;
font-weight:800;
}
--></style>
</head>
<body>
<img src="image.jpg" alt="marplo.net" width="200" height="120" id="im" />
<br/><br/> Clic pentru a retine coordonatele in casuta text.
<input type="text" name="regcoords" id="regcoords" />
<div id="coords">Coords</div>
<script type="text/javascript"><!--
// Captureaza evenimentul miscarea mouse-ului
function mpos() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.getElementById('im').onmousemove = getCoords;
}
// Afla si afiseaza coordonatele
function getCoords(e) {
// www.coursesweb.net/
x = (window.Event) ? e.pageX : event.clientX;
y = (window.Event) ? e.pageY : event.clientY;
document.getElementById('coords').innerHTML = x+ ' , ' +y;
document.getElementById('im').onclick = function() {
document.getElementById('regcoords').value = x+ ' , ' +y;
};
}
mpos();
--></script>
</body>
</html>
Primele 2 coordonate: 9, 120 reprezinta coordonatele X, Y pentru coltul din stanga-sus, iar ultimile doua: 56, 149 reprezinta X, Y pt coltul din dreapta-jos.Komfort scrie:Pai sunt doar 2 coordonate...nu ar trebui sa fie 4, ca aici: coords="9, 120, 56, 149" href="url"> ?