Magazine Internet

Tutoriel: rollover, zoom, infobulle sur une photo ou un texte en AJAX

Publié le 17 octobre 2007 par Avi Teboul

Logo officiel AJAXEncore un tutoriel demandé par un lecteur dont voici le message :

| Site web :   http://zipolo.fr
Salut Jarod !
tu demandais des idées de tuto dernierement... j'en ai trouvé une en javascript!
L'idée serait de recreer un script qui puisse faire l'effet quand on passe la souris sur les photos de ce site : http://www.istockphoto.com/file_search.php?action=file&text=chat
Vala ;-)
Bonne fin de journée
Raf

Et voici donc ma réponse :


Vous aurez besoin d'un fichier java script a intégrer , quelques images pour essayer , 3 ligne de CSS et une pincée de HTML ... Ce qui donnera ca !


Voici le fichier index.html expliqué ...

La declaration des entetes reglementaires avec le css (tres important, ca ne marche pas sans css)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tuto jarodxxx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <style type="text/css" media="screen">
      img{ border:none;}
      #bulle { position: absolute; visibility: hidden;  font-size:12px;}
      .info{ border:1px solid #666666; padding: 7px; color:#666666; background-color:#FFFFFF; font-family:"trebuchet MS";}
   </style>

L'appel du fichier javascript ( et la fin des entetes)

   <script type="text/javascript" language="javascript" src="http://www.jarodxxx.com/index.php?post/2007/10/17/js/infobulle.js"></script>
</head>
<body>

Le code HTML qui affiche les vignette et appel notre fonction javascript

<a href="http://www.jarodxxx.com/index.php?post/2007/10/17/#"
onmouseover="showTooltip('<div class=\'info\'><strong>Logo de presentation</strong><br />ici la photo est la meme<br /><img id=\'big\' src=\'logo_big.jpg\' width=\'500\'></div>');"
onmouseout="hideTooltip()"><img id="big" src="http://www.jarodxxx.com/index.php?post/2007/10/17/logo_big.jpg" width="200" onmouseout="hideTooltip()" /></a>
<a href="http://www.jarodxxx.com/index.php?post/2007/10/17/#"
onmouseover="showTooltip('<div class=\'info\'><strong>Logo de presentation</strong><br />et on peut changer de foto<br /><img id=\'big\' src=\'photoshop.png\'></div>');"
onmouseout="hideTooltip()"><img id="big" src="http://www.jarodxxx.com/index.php?post/2007/10/17/1048.png" onmouseout="hideTooltip()" /></a>

Le div qui contiendra les images agrandies , vous pouvez le placer n'importe ou entre <body> et </body>, puis la fin du fichier HTML

<div id="bulle"></div>
</body>
</html>


Vous pouvez télécharger le tutoriel au format .rar ci dessous


Tutoriel infobulle javascript


Retour à La Une de Logo Paperblog

A propos de l’auteur


Avi Teboul 600 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog