Encore 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)
L'appel du fichier javascript ( et la fin des entetes)<!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>
Le code HTML qui affiche les vignette et appel notre fonction javascript<script type="text/javascript" language="javascript" src="http://www.jarodxxx.com/index.php?post/2007/10/17/js/infobulle.js"></script>
</head>
<body>
Le div qui contiendra les images agrandies , vous pouvez le placer n'importe ou entre <body> et </body>, puis la fin du fichier HTML<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>
<div id="bulle"></div>
</body>
</html>
Vous pouvez télécharger le tutoriel au format .rar ci dessous
Tutoriel infobulle javascript
Jeu de briques
Snake
Pacman
Bubble