Invitado, ¡Bienvenido!

Pon tus datos en ENTRAR o CONECTARSE.

Si no estás registrado entras como invitado, puedes pasar a leer o regístrarte.

Para navegar dispones del ÍNDICE, el foro de ayuda INFORMACIÓN Y REGISTRO y la sección FAQ.

El contenido incluye tutoriales poéticos y de ayuda informática. Visita la SALA DE LECTURA en el FORO COMÚN o los blogs de cada poeta del foro.

Para DESCONECTAR este cartel pincha en \"NO ANUNCIAR\".

[código] Efecto encendido y apagado en imágenes

Ir abajo

biggri [código] Efecto encendido y apagado en imágenes

Mensaje por -Admin el Lun Ene 03, 2011 9:23 pm

Efecto de imagen que se apaga al pasar el ratón
Recuerda que sólo puede ponerse en aquellos lugares del foro donde puedan colocar HTML.

Haremos el mismo efecto que en el tutorial anterior, sólo que al contrario, las imágenes que definamos se verán normales pero al pasar el ratón por encima harán un efecto de apagado.

Vamos a:
Panel de administración > visualización > colores > css stylesheet
Y colocamos este código:
CÓDIGO:
.imagen-opaca:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

.imagen-opaca img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}


Luego debes colocar este código para colocar la imagen que quieras que tenga este efecto, no en el css sino allá donde queramos poner nuestra imagen y que acepte código HTML:
CÓDIGO:
<span class="imagen-opaca"><img src="URL DE LA IMAGEN" border="0"></span>


Obviamente donde dice URL DE LA IMAGEN debes sustituirlo por la dirección de la imagen.

Hacer que las imágenes con este efecto sean un enlace:

Haríamos los mismos pasos pero los códigos serían así:
CÓDIGO:
a.imagen-opaca:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

a.imagen-opaca img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

CÓDIGO:
<a class="imagen-opaca" href="URL DE DESTINO"><img src="URL DE LA IMAGEN" border="0"></a>

En url de destino colocamos la dirección a donde nos lleva al hacer click sobre la imagen.

Si queremos que el enlace se abra en una página nueva lo pondremos así:
CÓDIGO:
<a class="imagen-opaca" href="URL DE DESTINO" target="_blank"><img src="URL DE LA IMAGEN"></a>


http://tutorialesasistencia.foroactivo.com/Efecto-encendido-y-apagado-en-imagenes-h7.htm

copryrigth foroactivo
cheers cheers
avatar
-Admin
Administrador
Administrador

Mensajes Mensajes : 564
Fecha de inscripción : 26/11/2010
Edad : 19
Localización Localización : mexico

http://todoparatuforo.foroactivo.mx

Volver arriba Ir abajo

Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.