Posteo esto por una pregunta que me llego a mi mensaje privado, y quisiera compartirlo con la comunidad ahi va.
Para crear una imagen que contenga varios puntos como links o referencias se usan los mapas un ejemplo:
<map name="organigrama" id="organigrama">
<area alt="" shape="rect" coords="741,139,833,184" onmouseover="javascript
: mano();" onmouseout="javascript
: normal();" onclick="javascript
: muestra('ventana');"/>
<area alt="" shape="rect" coords="618,197,710,243" onmouseover="javascript
: mano();" onmouseout="javascript
: normal();" onclick="javascript
: muestra('ventana');">
<area alt="" shape="rect" coords="458,206,552,251" onmouseover="javascript
: mano();" onmouseout="javascript
: normal();" onclick="javascript
: muestra('ventana');"/>
<area alt="" shape="rect" coords="264,386,359,432" onmouseover="javascript
: mano();" onmouseout="javascript
: normal();" onclick="javascript
: muestra('ventana'); "/>
11);"/>
<area alt="" shape="rect" coords="618,80,709,131" onmouseover="javascript
: mano();" onmouseout="javascript
: normal();" onclick="javascript
: muestra('ventana'); />
</map>
<img src="imgOrganigrama/organigrama.png" usemap="#organigrama" border="0" alt="organigrama" />
asi creamos un mapa dentro de una imagen. Me preguntaron tambien como hacer que como hacerle para que al pasar sobre el area aparesca una ventana. pues yo en este ejmplo propongo un div invisible, de la sieuitne manera:
<div class="ventana" id="ventana" style="display:none; background-color:#FAD572;"> tu texto que quieras aqui;
</div>
y los script aqui
function muestra(id)
{
if(document.getElementById(id).style.display == 'none')
{
if (navigator.appName.indexOf('Microsoft') != -1)
document.getElementById(id).style.display='block';
else
document.getElementById(id).style.display='table-row';
}
else
document.getElementById(id).style.display='none';
}
function mano()
{
document.body.style.cursor = "pointer";
}
function normal()
{
document.body.style.cursor = "default";
}
las ultima 2 funciones las tengo por que al pasar el mouse por arriba le cambiamos el pointer a la manita, esto se pudo haber hecho con un style inline del area del mapa pero en explorer no funcionaba asi que tuve que hacerlo con javascrip y el de nomal es para restablecer el puntero al salir de estos cuadros..
Si tienen otra pregunta pues ahi avien..