Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje25-08-2011, 03:32 (UTC)    
Título del mensaje: Imágen previa al colocar el cursor encima

Antes que nada , el Codigo que se Mostrara fue Sacado de la Web de http://adan-2994.es.tl . En este tutorial mostrare el tutorial Original , pero mostrare Como Modificarlo desde el Css

Comenzemos
Este codigo nos da muestra una imagen al pasar el mouse por encima de algun enlace,
Ejemplo:
http://adan-2994.es.tl/Imagen_previa.htm

Ahora lo que haremos es Pegar la Libreria jQuery en Por ensima de la Pagina :

Código:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


y Ahora los Textos en idioma Javascript
Cita:

<script type="text/javascript">$(function(){$('a[previa="si"]').mouseover(function(){
var img=$(this).attr("rel");
var b=$(this).offset();
var imagen=$("#previa img"); var url=$("#previa a");var ancho=$(this).width();
imagen.attr("src",img);url.attr("href",imagen.attr("src"));
$("#previa").stop().css("top",(b.top-210)+"px").css("left",(b.left+(ancho/2))+"px").css("display","block").animate({"opacity":"1"},600);
}).mouseleave(function(){
$("#previa").stop().animate({"opacity":"0"},50,function(){$("#previa").css("display","none")});

});
$('#previa').mouseover(function(){
$("#previa").stop().animate({"opacity":"1"},600);;}).mouseleave(function(){
$("#previa").stop().animate({"opacity":"0"},50,function(){$("#sigueme").css("display","none")});
});

/*menuarriba*/

$(".menuarriba").mouseover(function(){
$(this).stop().animate({"top":"-14px"},300);
}).mouseleave(function(){

$(this).stop().animate({"top":"-57px"},500).animate({"top":"-34px"},500).animate({"top":"-38px"},500);

});
});</script>

Todo lo que tiene numeros se puede Editar , pero yo les Recomiendo no Editarlos .

Una vez pegado los codigos unno debajo del Otro , pegaremos el CSS;

Cita:
<style type="text/css">
#previa{text-align:center;
position:absolute;
width:190px;height:190px;
display:none;
opacity:0;
padding:9px;
z-index:12;
box-shadow:0px 0px 15px #ae4;
background-color: rgba(0,0,25,.1);
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#previa img{margin:auto;
max-height:190px;
max-width:190px;
}
</style>


Lo que esta Marcado en Rojo ( 190 ) Es donde podran ponerle el Tamaño una vez que pasamos el Mause sobre el Link / o imagen ;
width: Es el Ancho
height: Es la Altura


Ahora pasaremos al Color :
#ae4 : Es donde saldra como una Luz alrededor del Cuadro

Como veran yo puse un Color Amarillo.

Ahora lo que editaremos son los Border del Efecto:

15px : Es el ancho del Borde a Color , si queremos le pondremos 90px y nos querada haci


10px : Es el Borde , por defecto sale Cuadrado , pero si lo queremos le podremos agregar 80 MAX100, y nos quedara algo haci


Los codigos que se Mostraron Anteriormente se deben Pegar en POR ENSIMA DE LA PAGINA
Bueno hasta y nomas porque si seguimos editando lo otro quedara Feote.


Ahora pasaremos al HTML

Este codigo lo pegaremos donde queramos que aparezca el Efecto .

Codigo con Texto :
Código:
<a href="#tuenlace" [color=red]previa="si" rel="URL IMAGEN[/color]" >TU-ENLACE</a>


Observen que en color rojo puse los atributos previa="si" necesario para el funcionamiento del script, y por ultimo el atributo rel="URL-IMAGEN" con la direccion de la imagen.

Pero si deceamos que envez de un Link queramos poner una Imagen pegamos el Siguiente codigo envez del anterior :

Codigo con Imagen :

Código:
<!--Codigo por adan-2994.es.tl adan-2994@hotmail.com-->  <!--Esta es la capa que contiene ala vista previa-->
<div id="previa"><a target="_blank" href="#"><img alt="Cargando..." src="" /></a></div>
<a previa="si" rel="http://profile.webme.com/profile/a/adan-2994/big.png" href="#tuenlace"><img alt="" src="http://profile.webme.com/profile/a/adan-2994/big.png" /></a><br />


En fin , el codigo es Bastante util y lo pueden utilizar en sus Web's . Tambien les Recuerdo que el Autor del codigo es Adan-2994 pero fue Editado por mi :D

Saludos

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui
______________
Es una reina, es una reina, fiesta fiesta. Tito el bambino


Ultima edición por brianpwg el Mie Nov 21, 2012 4:49 pm; editado 2 veces
Mensaje01-02-2012, 15:37 (UTC)    
Título del mensaje:

Este tema ha sido promovido, ya que cumple las características para ello.

Información sobre promoción de temas a zonas dedicadas:
http://www.paginawebgratis.es/forum/viewtopic.php?t=66177
(Los diseños o artículos, serán movidos a la zona de selección, si el moderador así lo considera)

saludes,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group