SOS-FORUM
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
SOS-FORUM

Derniers sujets

» Silence Inside Me - Ouverture
par Solitude 3/3/2018, 12:36

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Yoda 5/3/2017, 20:12

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29

Le deal à ne pas rater :
Fnac : 2 Funko Pop achetées : le 3ème offert (large sélection de ...
Voir le deal

Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

demeter
demeter
(Membre)
http://altitudetropicale.forums-actifs.com/forum.htm
Bonjour à tous,
je tente de suivre ce tuto trouvé sur le net qui , doit être très simple pour quelqu'un qui manipule le javascript mais qui pour moi est un véritable casse tête.
Voici le lien
http://www.kilasoft.net/tutorials.item.29/infobulle-javascript-accessible.html

J'ai téléchargé le zip, je l'ai décompressé et, je me retrouve avec un dossier en javascript dont je ne sais quoi faire. Dois l'héberger dans un page html et modifier
la partie en rouge par l'adresse de ma page
Code:
<script type="text/javascript"  src="BubbleTooltips.js">
?

le voici
Spoiler:

POur le reste, il me semble avoir procédé correctement

J'ai placé ceci dans le template overall header new entre < head> et < /head>
Code:
<script type="text/javascript" src="BubbleTooltips.js"></script>
<link href="tooltip.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>

le css dans ma feuille de style
Code:
.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

Merci par avance pour votre aide


EDIT FB pour mettre les balises HTML dans celles "code"



Dernière édition par demeter le 19/4/2010, 16:35, édité 1 fois

Zeco
Zeco
Administrateur absent
http://digs.forumactif.com/forum
Hello...

Alors, quand tu télécharges un (ou plusieurs) script, le dossier fourni contient en général :
> Le ou les scripts eux mêmes.
> Le code à placer sur son site
> Les images si nécessaires
> Le CSS


Quand tu arrives sur quelque chose de la sorte :
demeter a écrit:BubbleTooltips.js">
Il te faut héberger le fichier JS portant le nom indiqué, et compléter le code avec l'adresse obtenue.
Tu n'as pas besoin de convertir le fichier .JS

Final-Blonde
Final-Blonde
Staff du forum
http://sansfil.forumactif.com/
Salut Demeter,

Hum, j'ai essayé d'installer le bins sur mon FT, mais je suis assez troublée par déjà deux grosses erreurs CSS qui en plus ne passent pas du tout avec Opera (alors qu'il parle de l'infobulle qui ne fonctionnerait pas sur Opera), comme :
- Pas d'apostrophe autour de l'url des images
- Mais surtout, les deux lignes de "background" qui se terminent SANS point-virgule...

Ce que j'ai fait, c'est que j'ai hébergé les fichiers CSS (corrigé) et le js chez archive-host, ensuite j'ai mis les adresses dans leurs balises de rappel respectives.
Mais, boh rien et je ne saurais dire si le js est aussi juste que le CSS :-P ...


EDIT : Erf, grillée par Zeco ! Décidément c'est mon jour...

Zeco
Zeco
Administrateur absent
http://digs.forumactif.com/forum
Me revoilà...
Donc je suis revenu, avec FB on s'en arrachés des cheveux...

Tout d'abord, héberge le fichier "BubbleTooltips.js" et garde son adresse.
Ensuite, dans ton overall_header_new, entre ceci avant </head> :

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>
En remplaçant le nom en rouge par l'adresse du fichier hébergé.

Ensuite, héberge l'image bt.gif, et garde son adresse.
Puis ajoute ceci dans ton CSS :

.tooltip{width: 200px; color:#000; font:lighter 11px/1.3 Arial,sans-serif; text-decoration:none; text-align:center;}

.tooltip span.top{padding: 30px 8px 0; background: url('bt.gif') no-repeat top;}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912; background: url('bt.gif') no-repeat bottom;}
Remplace les parties en bleu par l'adresse de l'image.

Enfin, pour que les liens forment des infobulles, il te suffit de mettre les liens dans ceci :

Code:
<div id="content">Les liens ici</div>

Attention, il n'y peut y avoir qu'une seule zone comme celle-ci, nous verrons ensuite comment on peut contourner le problème si tu veux en mettre partout.

demeter
demeter
(Membre)
http://altitudetropicale.forums-actifs.com/forum.htm
ZEco, final blond, vous êtes des Am...s(je ne vais pas le dire ou vous allez vous faire des idées). Je m'absente quelques heures après avoir lu vos deux premières réponses en coup de vent et que vois je en revenant, un tuto clair et précis. UN grand merci à nos as du codage.MERCI,MERCI,MERCI Sript infobulle à personnaliser 534197

Zeco
Zeco
Administrateur absent
http://digs.forumactif.com/forum
Hey, et bien de rien demeter Wink

Tu as réussit ? C'est bon ? Pas de souci avec le script ?

demeter
demeter
(Membre)
http://altitudetropicale.forums-actifs.com/forum.htm
Bonjour Zeco, je viens de tester à l'instant et cela fonctionne merveilleusement bien et ce, pour plusieurs liens.

Si vous avez une idée pour insérer du texte supplémentaire dans l'infobulle, je suis tout ouïe. Je vais chercher de mon côté.

Pour ceux que cette fonctionnalité intéresse, voici le lien du fichier js
https://sd-2.archive-host.com/membres/up/22406661265772126/BubbleTooltips_a_prendre.js

et le résultat
Sript infobulle à personnaliser Captur15

Un grand MERCI pour cette aide; je sais maintenant grâce à vous comment traiter ces fichiers.

Zeco
Zeco
Administrateur absent
http://digs.forumactif.com/forum
OK, c'est super que cela marche ! Smile

Pour rajouter du texte, il me semble qu'il faut rajouter un titre dans le lien :

<a href="url" title="Texte supplémentaire">Lien</a>

demeter
demeter
(Membre)
http://altitudetropicale.forums-actifs.com/forum.htm
J'ai fait un essai, le résultat est là mais malheureusement, cela désactive le format de l'infobulle. Rien de bien grave, merci pour toute cette aide zeco

Zeco
Zeco
Administrateur absent
http://digs.forumactif.com/forum
Ah bon ?
Ca ne marche plus ? Qu'elle est la longueur du titre ?

demeter
demeter
(Membre)
http://altitudetropicale.forums-actifs.com/forum.htm
J'ai testé avec u simple mot ou avec des phrases de différentes longueurs pour voir si la fenêtre se modifiait mais, non. J'ai une infobulle classique qui s'élargit jusque à dépasser la largeur du forum si le texte est trop long. je vais continuer à plancher dessus; il y a forcement une solution.

Merci Zeco pour cette aide.


Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit

Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser