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
|
