Pagina 1 din 1

Image map

Scris: Mie Mai 25, 2011
de claUdiu
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

Image map

Scris: Joi Mai 26, 2011
de MarPlo
Daca e vorba de cordonatele adaugate in atributul "coords" in <area>, vezi exemplu din codul urmator.
Daca e vorba de alte coordonate, nu stiu.

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>

Image map

Scris: Sâm Iun 23, 2012
de Komfort
el cred ca vrea sa te intrebe cum gasesti coordonatele...prin inceraci e fffff greu:..adica acestea:coords="9, 120, 56, 149" etc:(

Image map

Scris: Sâm Iun 23, 2012
de MarPlo
Aha, daca vrei sa aplici anumite coordonate la "coords", poti deschide imaginea intr-un editor de imagini, de exemplu PhotoFiltre, iar cand esti cu mouse-ul pe imagine, undeva, de obicei in bara de jos arata coordonatele punctului unde este cursorul pe imagine.
Sau poti folosi acest script intr-o pagina .html si adaugi acea imagine la <img>.
Cand mouse-ul e pe imagine, afiseaza coordonatele intr-un Div, iar la clic retine acele coordonate intr-o caseta text.

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>

Re: Image map

Scris: Dum Iun 24, 2012
de Komfort
Pai sunt doar 2 coordonate...nu ar trebui sa fie 4, ca aici: coords="9, 120, 56, 149" href="url"> ?

Re: Image map

Scris: Dum Iun 24, 2012
de MarPlo
Komfort scrie:Pai sunt doar 2 coordonate...nu ar trebui sa fie 4, ca aici: coords="9, 120, 56, 149" href="url"> ?
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.
Aceste coordonate le afla fiecare in imaginea pe care o are, cu mouse-ul pe punctele respective.

Image map

Scris: Dum Iun 24, 2012
de Komfort
mai am o intrebare..
Cum as putea sa adaug niste cuvinte..De ex:...cand cineva se inscrie pe siteul meu primeste niste coordonate aleatorie...si apoi numele lui sa fie pus pe o imagine/background cu acele coordonate?
Multumesc