Image map

Coduri intrebari, probleme legate de HTML, XHTML si CSS
claUdiu
Mesaje: 313

Image map

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
Se spune ca...."omul tot invata in viata". Dar...Totusi...Trebie sa ne oprim undeva, nu?
MarPlo Mesaje: 4343
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>
Komfort Mesaje: 157
el cred ca vrea sa te intrebe cum gasesti coordonatele...prin inceraci e fffff greu:..adica acestea:coords="9, 120, 56, 149" etc:(
MarPlo Mesaje: 4343
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>
Komfort Mesaje: 157
Pai sunt doar 2 coordonate...nu ar trebui sa fie 4, ca aici: coords="9, 120, 56, 149" href="url"> ?
MarPlo Mesaje: 4343
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.
Komfort Mesaje: 157
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