Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de cambio de color en un area (map de html) con css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/09/2007, 04:27
Avatar de puchitol  
Fecha de Ingreso: diciembre-2003
Ubicación: ELCHE
Mensajes: 322
Antigüedad: 14 años
Puntos: 0
cambio de color en un area (map de html) con css

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
__________________
If you think fuck is funny, fuck yourself and save your money,
espero que entendais la moraleja... je, je, je
  #2 (permalink)  
Antiguo 07/09/2007, 06:14
 
Fecha de Ingreso: abril-2007
Mensajes: 18
Antigüedad: 10 años, 8 meses
Puntos: 0
Re: cambio de color en un area (map de html) con css

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> 
  #3 (permalink)  
Antiguo 07/09/2007, 07:59
Avatar de puchitol  
Fecha de Ingreso: diciembre-2003
Ubicación: ELCHE
Mensajes: 322
Antigüedad: 14 años
Puntos: 0
Re: cambio de color en un area (map de html) con css

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
__________________
If you think fuck is funny, fuck yourself and save your money,
espero que entendais la moraleja... je, je, je
  #4 (permalink)  
Antiguo 07/09/2007, 09:00
 
Fecha de Ingreso: abril-2007
Mensajes: 18
Antigüedad: 10 años, 8 meses
Puntos: 0
Re: cambio de color en un area (map de html) con css

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/
  #5 (permalink)  
Antiguo 10/09/2007, 05:09
Avatar de puchitol  
Fecha de Ingreso: diciembre-2003
Ubicación: ELCHE
Mensajes: 322
Antigüedad: 14 años
Puntos: 0
Re: cambio de color en un area (map de html) con css

Hola Ricky,

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

__________________
If you think fuck is funny, fuck yourself and save your money,
espero que entendais la moraleja... je, je, je
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:51.