Un effet de coin de page qui s'ouvre en jquery pour insérer une pub ou autre ...

Ce script a été réalisé par: http://blog.jaysalvat.com, un super blog à visiter !!!!

Entre les balises <head> et <head>:

ne pas oublier de renseigner l'adresse de l'image illustration

<br /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br /><br /> <script type="text/javascript"><br /><br /> /** <br /><br /> * Effet page cornée <br /><br /> * par Jay Salvat - http://blog.jaysalvat.com/ <br /><br /> */ <br /><br /> $(function() {<br /><br /> $('#corner img').hover(function() {<br /><br /> $(this).stop().animate({ width:'200px', height:'200px' });<br /><br /> }, function() {<br /><br /> $(this).stop().animate({ width:'80px', height:'80px' });<br /><br /> });<br /><br /> });<br /><br /> </script><br /><br /> <br /><br /> #corner {<br /><br /> position:absolute;<br /><br /> top:0px; right:0px;<br /><br /> z-index:9999;<br /><br /> background:url(adresse de l'image illustration.png) top right;<br /><br /> }<br /><br /> #corner img {<br /><br /> border:0;<br /><br /> width:80px; height:80px;<br /><br /> -ms-interpolation-mode: bicubic;<br /><br /> }<br /><br /> </style><br /><br />

Entre les balises body:

Renseigner l'adresse de retour de la pub et l'adresse de l'image "corner"

Les images à insérer:

Seule l'image "illustration" est à changer par rapport à vos besoins (dimensions 200x200)

Illustration

Corner

voir la démo:

Effet de page en JQuery

Partager cet article