Css image map

[wolf777]

Saludos,

Quiciera saber como emplear mapa de imagenes mediante aplicaciones de CSS.
Tengo unos campos <div> los cuales hacen referencia a estructuras de imagenes que estan en la parte CSS como background.

Quiciera poder aplicar algunos links a ciertos puntos especificos de ese background y luego proceder con otra aplicaciones javascript.

Pero necesito inicialmente dominar la parte de CSS donde coloco esos links como mapa de imagenes.

Si alguien sabe de algun tutorial completo o tenga una explicacion le agradeceria mucho.

Agradezco de antemano su atencion.

Nota: Disculpen los moderadores, si este es un tema que ya se consulto.

[McBlink]

Con el Dreamweaver es muy facil hacerlo,
vas a mapa de imagenes, seleccionas la forma quq quieras, ya sea poligonal cuadrada o la que sea..
y pones el link y listo ;)

saludos!
MC

[wolf777]

Si pero no es el mapa de imagenes normal que creo que te refieres.. sino a unomediante el uso de etiquetas <dd> etc etc etc...

[caricatos]

Hola:

No recuerdo que con css se pudiera crear mapas o similar... si sabes de algún enlace muéstranoslo.

Saludos

[McBlink]

Iniciado por caricatos

Hola:

No recuerdo que con css se pudiera crear mapas o similar... si sabes de algún enlace muéstranoslo.

Saludos

Yo tampoco lo sobia..
esperemos haber que dice

Saludos.

[wolf777]

Saludos

Claro que si se llama Css Image Mapping, evidentemente no es con las etiquetas clasicas de DHTML sino mediante la aplicacion de Css que es basica para el empleo de menus desplegables.

Por suerte ya encontre como se hacia eso, y solucione mi problema les envio una pequeña aplicacion medinate Css image mapping.

http://www.frankmanno.com/ideas/css-imagemap/
(Este link da ejemplos claros de utilización)

CSS:

dd#homeDef{
top: 83px;
left: -140px;
position:absolute;
}
dd#homeDef a{
position: absolute;
width: 180px;
height: 70px;
text-decoration: none;
border: 0px solid #FFFCE6;
background: transparent url(../images/bg_menu_000.png) repeat;
}
dd#homeDef a span{
display: none;
}
dd#homeDef a:hover{
background: transparent url(hover.png) repeat;
border: 0px solid #FFFCE6;
}
dd#homeDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #f8b5f5;
font-family:"Papyrus","Verdana","Monotype Corsiva";
font-weight: bold;
font-size:25px;
position: absolute;
border: 0px solid #f8b5f5;
bottom: 20px;
left:200px;
margin: 0;
padding: 5px;
width: 100px;
}

HTML:

<dl id="lotusMap">
<dd id="homeDef">
<a href="#" onmouseover="javascript:link_menu_001()" onmouseout="javascript:link_menu()">
<span>Home</span></a>
</dd></dl>

Espero que sea utiles para ustedes como lo fue para mí ;) Adios y gracias.

[wolf777]

Porciacazo me olvide decirles, el javascript lo pueden obviar. Esa fue parte necesaria en el otro sistema que realice.

Adios

[McBlink]

Muy muy interesante..
la verdad.. no lo conocia..

Saludos!
MC

[caricatos]

Iniciado por wolf777

Saludos

Claro que si se llama Css Image Mapping...

Hola:

El link ya lo conocía y sin duda es interesante, pero no se trata de un "mapa", ya que funciona solo sobre cajas (capas/enlaces). Yo diría que es un rollover mejorado.

Saludos

[wolf777]

Sinceramente creo que tienes mucha razon Caricatos, pero segun vi se lo llama de esa forma generalmente "css image map" aunque como tu menciones sera solo un roll over mejorado en lo cual estoy muy deacuerdo contigo.

Saludos