efecto mouseover para <div>

PedroRodas · #1 (**permalink**) 17/07/2008, 14:33

Hola, he estado investigando acerca de hacer un efecto mouse over con imagenes.

- Para imagenes de fondo parece bastante facil usando el estado :hover.

-mi idea es hacerlo para un div completo que consta de texto y una imagen
- Mi idea es usar un div por defecto con los bordes en gris y la imagen en blanco y negro. Al hacer mouseover se cambia por un div en el que los bordes estan a color y la imagen tambien.

- He leido que se pued hacer usando el display y z-index, pero no si esto es asi, y si lo es, no consigo dar con el codigo.

Tambien acepto cualquier otra solucion para mi problema.

muchas gracias de antemano.

_facilweb · #2 (**permalink**) 17/07/2008, 16:40

Acabo de hacer uno parecido y lo hice creando 2 estilos, por ejemplo uno llamado boton con las características del boton inactivo y otro llamado botón_over con las características del botón con mouse over.

Luego hago el cambio de estilos con javascript en un onmouseover del div:

document.getElementById(id).className="boton_over" ;

Saludos

Mikmoro · #3 (**permalink**) 17/07/2008, 17:18

Mira este ejemplo a ver si te gusta, sin javascript, sólo css. Es justo lo contrario pero igual te puede servir de ejemplo.

Mikel.

PedroRodas · #4 (**permalink**) 18/07/2008, 03:48

muchas gracias Mikel, pero en mi pregunta decia que ese ejemplo, el del background-image, lo habia conseguido.

Lo que trato de hacer es hacer este efecto para un div q consta de texto e imagenes y un borde.

quiero hacer que en el estado de reposo este el borde en gris y la imagen en blanco y negro, y al hacer mouseover cambia la imagen se pone a color y el borde en color tb. Por eso he pensao en hacerlo con algun tipo de display y z index o algo asi.

Mirar primer post para mas datos.

muchas gracias.

Mikmoro · #5 (**permalink**) 18/07/2008, 04:02

De acuerdo, lo había leido, pero no entendí qué es lo que quieres hacer que no se pueda hacer con un fondo. ¿Irá una imagen incrustada y el texto encima? ¿el texto también cambia de color? ¿los bordes no los puede llevar incorporados la imagen en lugar de la caja? etcétera.

No lo entendí, ni lo tengo nada claro.

Mikel.

PedroRodas · #6 (**permalink**) 18/07/2008, 04:20

Esta bien, mea culpa. Probablemente lo que busco puede hacerse co la solucion que tu me has dado. voi a dart todos la datos q pueda. asi mismo alguien podria decirme donde colgar una imagen para que la podadis ver y asi verlo mejor??

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
  <title>TRATTORIA LA VENEZIANA - OCIO</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

*{margin:0;padding:0;outline: 0;}
html,body {margin:0;padding:0;height:100%;outline: 0; }

#contenedor{
width:768px;
    min-height:100%;
    height: auto!important;
    height:100%;
margin: 0px auto;
background:#fff;
font: normal 0.8em Arial, Helvetica, sans-serif;
}

.principal{
width:500px;
float:left;
}
.secundario{
width:256px;
float:left;
text-align:right;
}

.portada {
height:100px; 
margin-top:1em; 
padding:5px; 
border:#ccc 1px solid; 
}
.portada h1{font:bold 1.2em Arial, Helvetica, sans-serif;
border-bottom:#A177B2 3px solid; }
p.primero{margin-top:1em;}
</style>
</head>
<body>
	<div id="contenedor">	
		<div class="portada">
			<div class="principal">
			<h1>ESPECIALIDADES</h1>
			<p class="primero">En la Trattoria <strong>La Veneziana</strong>ofercemos una amplia variedad de platos de cocina italiana, 
			entre los que destacamos nuestra <strong>pizza serrana</strong>, el <strong>carpaccio de buey</strong>, las lasañas,
			<strong>la pasta rellena</strong>, y nuestro exquisito <strong>tiramis&uacute;.</strong></p> 
			</div>
			<div class="secundario">
			<img src="imgs/especialidades.jpg" alt="aqui va la imagen" title="Ir a mapas de acceso al restaurante" width="250px" height="100px"/>
			</div>	
		</div>
	</div>
</body>
</html>

Mi idea es que al hacer mouseover sobre cualquier parte del div(delimitado por el borde gris), se cambie el border-bottom del titulo y la imagen (no es background)

La imagen no la he colocado como background xq de esa forma no consegui que respetara el padding del div.

Pero me vale cualquie idea que me deis, aunque vaya por otro lao

muchas gracias!!!

Mikmoro · #7 (**permalink**) 18/07/2008, 08:17

Antes de nada te comento un problema que te vas a encontrar: si quieres convertir todo ese bloque en un enlace, eso no te validará, porque un elemento de línea como "a" no admite dentro de sí elementos de bloque. Otra cosa es que te importe si valida o no, pero es más que nada por que lo sepas.

Mikel.

PedroRodas · #8 (**permalink**) 19/07/2008, 04:02

de acuerdo muchas gracias, voy a optar entonces por hacer una imagen de fondo que ocupe todo el div, y los textos iran encima, espero mostrar pronto el resultado para que podais dar vuestrs opinion.

muchas gracias de nuevo

PedroRodas · #9 (**permalink**) 19/07/2008, 07:27

lo he hecho haciendo una imagen que contiene todo, incluso los textos. Es la unica forma con la que podido meter texto con formato dentro ya que no podia meter lementos de bloque como h1 o p dentro del a.

Incluso declarando a display:block? o de esa forma si podria meter los h1 y p dentro.

Bueno, yo he hecho una imagen grande con todo, borde testo, subrayado e imagen, y se cambia por otra en el a:hover.

Mikmoro · #10 (**permalink**) 19/07/2008, 10:33

Hola, Pedro.

Tenía un rato y me he puesto a hacer este ejemplo

Es el código que estabas usando en principio, bastante modificado, con la imagen del fondo y el truco del posicionamiento que te decía.

Es perfectamente válido xhtml strict y css2. El texto es texto, no imagen, aunque igualmente no se puede seleccionar porque está dentro del enlace, pero mucho más fácil de editar. No es demasiado complicado, y funciona muy bien en FF y IE6:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>TRATTORIA LA VENEZIANA - OCIO</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0;outline: 0;}
html,body {margin:0;padding:0;height:100%;outline: 0;
}
#contenedor{
width:768px;
margin: 0px auto;
background:#fff;
font: normal 0.8em Arial, Helvetica, sans-serif;
}
.portada {
height:100px;
margin-top:1em;
padding:5px;
border:#ccc 1px solid;
}
a.principal{
display: block;
text-decoration: none;
background: url(img/40.jpg) no-repeat right top;
height:100px;
}
a.principal:hover {background-position: right bottom;
}
a.principal:hover span.titulo {border-color: #0f0;
}
span.titulo{font:bold 1.2em Arial, Helvetica, sans-serif;
border-bottom:#A177B2 3px solid;
display: block;
margin-right: 260px;
color: #000;
}
span.primero{margin-top:1em;
display: block;
margin-right: 260px;
color: #000;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="portada">
<a href="#" class="principal">
<span class="titulo">ESPECIALIDADES</span>
<span class="primero">En la Trattoria <strong>La Veneziana</strong>ofercemos una amplia variedad de platos de cocina italiana,
entre los que destacamos nuestra <strong>pizza serrana</strong>, el <strong>carpaccio de buey</strong>, las lasañas,
<strong>la pasta rellena</strong>, y nuestro exquisito <strong>tiramisú.</strong></span>
</a>
</div>
</div>
</body>
</html>

A ver si te sirve, que lo del texto en imagen me parece el último recurso.

Mikel.

PedroRodas · #11 (**permalink**) 24/07/2008, 03:29

Eres un makinon, lo tuyo no es normal!!!!

No te imaginas el cable que me acabas de echar, y gracias por recordarmelo en mi otra consulta. Joder voy a tener que invitarte a un fin de semana en cadiz en la playita, y te presento a mi prima o lo que haga falta, jajjajaja.

muchas gracias tio, q arte picha!

Mikmoro · #12 (**permalink**) 24/07/2008, 03:39

Tendrías que verme: soy más blanco que los noruegos. En la playa la gente se vuelve a mirarme

Si voy contigo te avergüenzo.

Mikel.

PedroRodas · #13 (**permalink**) 24/07/2008, 04:42

una cosa Mikel, donde esta la imagen que aparece cuando el hover. A mi me funciona bien si cambio tu linea

Código HTML:

a.principal:hover {background-position: right bottom;}

por esta otra:

Código HTML:

a.principal:hover {background: url(../imgs/fondo2.jpg) no-repeat right top;}

No entiendo muy bien como consigues el efecto con esa sentencia.

Pero bueno el caso es que cambiando eso lo he conseguido y te lo vuelvo a agradecer.

Mikmoro · #14 (**permalink**) 24/07/2008, 05:16

Es que la imagen la llamo en el enlace, y por eso ya sólo basta con cambiarle la posición en el :hover:

Cita:

a.principal{
display: block;
text-decoration: none;
background: url(img/40.jpg) no-repeat right top;
height:100px;
}
a.principal:hover {background-position: right bottom;
}

Mikel.

PedroRodas · #15 (**permalink**) 24/07/2008, 05:33

Tienes una solo imagen que incluye la imagen en color y tb en blanco y negro no? y al cambiar la posicion se visualiza una parte u otra de la misma imagen verdad?

Solo asi lo entenderia.

Seras blanquito, pero eres un genio. Yo estoy moreno, pero me queda mucho que aprende... jejjeje

Mikmoro · #16 (**permalink**) 24/07/2008, 06:53

Sï, ese era el truco del que te hablaba al principio: sólo cargas una imagen y le cambias la posición, de esa manera es mucho más rápido el cambio, pesa menos y hace una única petición al servidor. Es más eficiente en todos lo sentidos.

Mikel.