Índice

Una lupa para agrandar las viñetas

Al pasar el ratón por encima de una viñeta, vamos a hacer que aparezca una lupa para que el usuario pueda ampliar esa viñeta.

Las diferentes imágenes están disponibles para su descarga desde la página Información.

El archivo HTML:

<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function(){ 
        $("#galeria a").append("<span></span>"); 
        $("#galeria a").hover(function(){ 
            $(this).children("span").fadeIn(600); 
        }, function(){ 
            $(this).children("span").fadeOut(200); 
        }); 
    }); 
</script> 
<style> 
    #galeria { 
        width: 100%; 
        overflow: hidden; 
    } 
    #galeria a { 
        position:relative; 
        float:left; 
        margin:5px; 
    } 
    #galeria a span { 
        background-image:url(lupa.png);  ...