Efecto Mouse Over sencillo, pero no me sale!

banderas20 · #1 (**permalink**) 19/04/2004, 02:46

Hola,

tengo un problemilla. Estoy haciendo un menú, del tipo "imagen logo + menú ppal" como frame superior.

El menú es muy sencillo. No quiero menú desplegable. Simplemente quiero que cuando pase el mouse por encima de un texto del menú, éste cambie de color y/o se realce.

Todo está integrado en una sola imagen creada con Fireworks, y editada con Dreamweaver haciendo las zonas texto como "Zona interactiva rectangular" para poder hacer el vínculo.

He intentado desde Fireworks, hacer divisiones y añadir el comportamiento "Intercambiar Imagen".
Para ello, he intentado "copiar" cada división, para luego pegarla como nueva imagen, cambiarle el color a las letras y jugar con cada par de imágenes intercambiándolas.

El caso es que si pongo copiar y luego pego en una nueva imagen, sólo me copia la capa de interacción. Y si desactivo "mostrar zonas interactivas", no tengo la referencia de la zona para saber las dimensiones del rectángulo a copiar.

POR FAVOR, AYUDAAA!!

Gracias!

PatomaS · #2 (**permalink**) 19/04/2004, 04:49

Hola

Bueno, no he seguido nunca los pasos de los programas que mencionas, pero lo que quieres hacer no es muy complicado.

Si lo que quieres es que un texto cambie de color cuando el ratón pasa por encima de el, basta con que coloques estos códigos.

Código:

<style>
a:hover {
	background-color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #ff0000;	
}
</style>

Ese es un código que cambia el tipo de letra, el fondo, el color de la letra y el tamaño. Si alguna de esas cosas no te gusta, borras la línea respectiva y ya está.

El código que te paso, va entre <head> y </head>.

Suerte

Felicidad

banderas20 · #3 (**permalink**) 19/04/2004, 08:50

Gracias. Lo probaré, pero me parece que no me has entendido. Yo digo que el texto es una parte de la imagen. Es un área de ésta.

PatomaS · #4 (**permalink**) 19/04/2004, 09:55

Hola

No hay problema es igual de fácil, pero con un poquito más de trabajo.

Deberás hacer dos imagenes iguales salvo en el texto que quieres que cambie, entonces cuando el ratón pase por encima de la imagen, harás que se cambie con un onmouseover.

sería más o menos así

<img src="imagen.jpg" onmouseover="javascript:cambiar_imagen('cosa,1')" onmouseout="javascript:cambiar_imagen('cosa,0')" name="cosa" id="cosa">

con esto llamarías a la función cambiar_imagen, la cual cambiaría las imagenes según haga falta.

En la función, deberías tener algo como esto:

function cambiar_imagen(nombre, numero) {
imagen[0]= new Image (100,100);
imagen[0].src="imagen_original.jpg";
imagen[1]= new Image (100,100);
imagen[1].src="imagen_secundaria.jpg";
nombre.src=imagen[numero].src;
}

Felicidad

anagr2001 · #5 (**permalink**) 19/04/2004, 16:12

yo te doy otra solucion parecida a la de arriba, pero la mia es sin utilizar ninguna función extra:
<img src="imagen.gif" onMouseOver='this.src="imagenOver.gif"' onMouseOut='this.src="imagen.gif"'>

y listo, imagen.gif es la imagen original e imagenOver.gif es la imagen que tienes con el texto diferente

tunait · #6 (**permalink**) 20/04/2004, 01:38

Trasladado al foro de javascript desde html

KarlanKas · #7 (**permalink**) 20/04/2004, 01:52

¿Sería posible hacerlo con estilos?

Por ejemplo. Ponemos un estilo que es este:

a#pepe{background-image:url(pepe.gif);
background-repeat:no-repeat;
background-position:center;
height:100px;
width:100px;
display:block;
}
a#pepe:hover{background-image:url(pepeover.gif);}

y en la página ponemos:

<a id="pepe"></a>

¿Saldrá la imagen con su efecto onmouseover?

No lo he probado pero tiene buena pinta, verdad?