Afficher une image "pop-up" avec le plugin jQuery "tooltips"

stonehenge · Le 14/04/2010, à 00:39

Bonsoir,

J'ai essayé d'appliquer le tuto que voici, renseigné par feeatmod: http://blog.jaysalvat.com/demo/tooltips/

Je voudrais obtenir un résultat analogue à l'image du chien qui s'ouvre en survolant une autre photo.

J'ai téléchargé et extrait le plugin et obtenu deux fichiers jquery.toolpics.css et jquery.tooltips.js, et un sous-répertoire nommé images ou figurent les images nécessaires à l'info-bulle.

Dans mon cas, dans le même répertoire que les deux fichiers, j'ai placé l'image survolée qui s'appelle sticker.png et l'image cible pour l'info-bulle qui est popup.png

J'ai ajouté dans la balise <head>:

<script type="text/javascript">
$(function() {
$(".toolTip").toolTips();
$(".toolTipGallery").toolTips( { baseLine:'middle', click:false } );
});
  </script>

Mais après je patauge... J'ai bien essayé de rajouter des trucs en m'inspirant du sode-source de ce tuto mais c'est nouveau pour moi et je ne comprends bien comment ça fonctionne, je ne sais pas adapter...

Pour le moment, voici ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test2</title>
  <script type="text/javascript" src="jquery.tooltips.js"></script>
  <link href="jquery.tooltips.css" rel="stylesheet"
 type="text/css">
  <script type="text/javascript">
$(function() {
$(".toolTip").toolTips();
$(".toolTipGallery").toolTips( { baseLine:'middle', click:false } );
});
  </script>
</head>
<body>
<a class="toolTipGallery" title="nouveaux horaires"
 href="../popup.jpg"><img alt=""
 style="border: 0px solid ; width: 199px; height: 184px;"
 src="../sticker.jpg">
</a>
</body>
</html>

Feeatmod, si tu passes par là... D'avance merci pour les explications...

Dernière modification par stonehenge (Le 14/04/2010, à 00:40)

pops · Le 14/04/2010, à 01:33

en fait ce n'est qu'un plugin, il se base sur la librairie jquery
tu dois donc la telecharger ici: http://jquery.com/
et l'inclure dans ta page avant tout le reste.
si tu t'intéresse au javascript, cette librairie pourrais t'être très utile et t'éviter bien des efforts.

le reste du code m'as l'air honnête

stonehenge · Le 14/04/2010, à 13:31

Bonjour et merci pour ta réponse.

Il faut l'inclure sous forme d'un lien href dans la balise <head> aussi? Ou par une autre méthode?
Si tu peux m'indiquer le code, ça m'avancerait car, tout ça est encore du chinois pour moi...

D'avance, merci...

stonehenge · Le 14/04/2010, à 13:52

Super, ça fonctionne! J'avais un dernier problème de lien qui m'avait échappé. Un tout grand merci à toi...
Faut que je trouve comment virer la bordure de l'info-bulle, maintenant...

Edit: j'ai trouvé, fastoche parce-que la valeur était renseignée. Je patauge au peu pour rajouter une valeur mais ça va venir...

Dernière modification par stonehenge (Le 14/04/2010, à 14:34)

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 14/04/2010, à 00:39

Afficher une image "pop-up" avec le plugin jQuery "tooltips"

#2 Le 14/04/2010, à 01:33

Re : Afficher une image "pop-up" avec le plugin jQuery "tooltips"

#3 Le 14/04/2010, à 13:31

Re : Afficher une image "pop-up" avec le plugin jQuery "tooltips"

#4 Le 14/04/2010, à 13:52

Re : Afficher une image "pop-up" avec le plugin jQuery "tooltips"

Pied de page des forums