etiquetado en fotos

[edie8]

Iniciado por Perr0

te hice un ejemplo, espero te sirva, es sencillo, mapeas y colocas la función tooltip con la palabra "event" y luego el texto que quieres que aparezca, acepta código HTML por usar el innerHTML:

Código HTML:

<img src="http://imagenes.es.sftcdn.net/es/scrn/54000/54039/cars-icons-1.jpg" width="500" height="350" border="0" usemap="#Map" style="z-index:0">
<map name="Map">
  <area shape="rect" coords="21,20,107,90" href="#" onMouseMove="tooltip(event, 'hola este es un tooltip de<br>Chick Hicks')">
  <area shape="rect" coords="115,23,209,92" href="#" onMouseMove="tooltip(event, 'hola es un tooltip con imagen<br><img src=\'http://www.mimitoys.ie/uploads/media/category-images/32226-BG1925.jpg\' width=\'100\' height=\'100\'>Doc Hudson')">
  <area shape="rect" coords="22,106,109,170" href="#" onMouseMove="tooltip(event, 'ejemplo con tabla<table width=\'0\' border=\'1\' cellspacing=\'2\' cellpadding=\'3\'><tr><td>Nombre</td><td>Lightning McQueen</td></tr><tr><td>Sexo</td><td>Macho</td></tr><tr><td>Edad</td><td>N/A</td></tr></table>')">
</map>
<div id="dtool"></div>
<script>
function tooltip(e,t){
    d = document.getElementById("dtool");
    d.innerHTML = t;
    posx = (document.all) ? window.event.clientX : e.clientX;
    posy = (document.all) ? window.event.clientY : e.clientY;
    d.style.left = posx+13;
    d.style.top = posy-13;
    d.style.display = "block";
    window.onmouseout = function(){d.style.display = "none";}
}
</script>
<style>
*{font-family:Verdana;font-size:10px;}
#dtool{
border:3px solid #7D6244;
background-color:#FFFF80;
padding:4px 10px;
font-family:Verdana;
font-size:10px;
color:#111;
position:absolute;
display:none;
}
</style>
 

salu2

Si me sirve pero no tengo nada mas que dos coordenadas Y y la X y aqui pones 4 como puedo sacar las otras dos coordenadas?? es que nunca trabaje con cosas como esta jeje gracias un saludo.