cambio de color en un area (map de html) con css

puchitol · #1 (**permalink**) 07/09/2007, 03:27

Hola amigos,

seria posible con CSS, utilizando un map de html, al pasar el raton por encima de un area definida para ese map que cambiara de color ese area (region) ?

gracias de antemano.

saludos

Ricky77 · #2 (**permalink**) 07/09/2007, 05:14

Sí.

Simplemente crea un contenedor en la zona que desees el cambio de background. En su interior coloca un enlace y dimensionalo para que se ajuste al contenedor.

Define una clase para ese enlace y en la CSS haz una distinción entre el enlace y su hover. así al pasar el ratón por encima leerá las propiedades del hover, entre ellas el BG.

Ahí te dejo un ejemplo:

Código HTML:

<html>
<head>
<style type="text/css">
	<!--
	.color {
	    background-color: #778899; width: 50px; height: 50px; display: block;
	}

	.color:hover {
	    background-color: #87CEEB; 
	}

	.contenedor {
   	 background-color: #313031; width: 50px; height: 50px; margin: 0 1px; float: left; 
	}
	-->
</style>
</head>
<body>

<div class="contenedor">
	<a class="color" href="#"></a>
</div>

<div class="contenedor">
	<a class="color" href="#"></a>
</div>

</body>
</html>

puchitol · #3 (**permalink**) 07/09/2007, 06:59

Hola amigo y gracias por contestar tan rapido,

pero creo que no he explicado bien mi pregunta, el codigo que me comentas es para trabajar con capas y dar colores distintos a esas capas segñun si se posa sobre el cursor o no ... Esto no es lo que necesito.

Este es el codigo HTML que tengo:

<img src="imagen.jpg" usemap="#mapa">

<map name="mapa">
<area shape="poly" coords="........." href=".....">
<area shape="poly" coords="........." href=".....">
</map>

La idea es que cuando el raton pase por alguna de esas areas se ilumine o cambie de color de alguna manera. Se podria hacer esto con CSS?

saludos

Ricky77 · #4 (**permalink**) 07/09/2007, 08:00

Hola puchito, precisamente trataba de mostrarte una alternativa al uso de modo que pudieras sacar mayor rendimiento a las CSS para hacer lo que tratas.

Dejar de usar coordenadas y pasar a usar listas con posicionamientos relativos y poder incluir con facilidad entonces técnicas de reemplazo de imágenes con CSS.

aquí tienes un par de ejemplos de los efectos que es posible crear con capas y reemplazamiento de imagenes sin <map> ni coordenadas.

http://www.alistapart.com/d/cssmaps/mapfinal/index.html
http://www.yourtotalsite.com/example...placement_map/

puchitol · #5 (**permalink**) 10/09/2007, 04:09

Hola Ricky,

gracias por la orientación, investigaré por ese camino ...