Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Un tutoriel un peu trop compliqué pour moi^^"

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Résolu Un tutoriel un peu trop compliqué pour moi^^"

Message par Ayael le Ven 16 Mar 2012 - 21:26

Bonjour, j'ai trouvé un tutoriel avec un rendu très sympa, mais je n'arrive pas à l'adapter pour forumactif : http://jq.creativejuiz.fr/plugins-jquery/linkin-tips.php
(Je ne comprends pas où il faut mettre quoi, quel est le code html à mettre pour les infobulles, idem pour le CSS) bref je ne comprends rien, et si vous pouviez m'aider...


Dernière édition par Ayael le Dim 18 Mar 2012 - 11:38, édité 1 fois
avatar

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://valsedupouvoir.forumactif.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un tutoriel un peu trop compliqué pour moi^^"

Message par Ayael le Sam 17 Mar 2012 - 10:34

Petit up du jour ♥
avatar

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://valsedupouvoir.forumactif.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un tutoriel un peu trop compliqué pour moi^^"

Message par Ayael le Dim 18 Mar 2012 - 9:55

UP^^
avatar

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://valsedupouvoir.forumactif.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un tutoriel un peu trop compliqué pour moi^^"

Message par Adam_sfp le Dim 18 Mar 2012 - 10:05

Bonjour

Il faudrait mettre le script dans gestion des codes javascript (sur toutes les pages)

Code:
(function(a){var b;a.fn.juizLinkinTips=function(c){b=a.extend({},e,c);a(this).each(function(){var c=a(this).attr("title"),d='<span class="juizTips">';d+=c.replace(RegExp(b.beforeURL+" (.*) "+b.beforeTitle+" (.*)","gi"),'<a href="$1" title="$2">$1</a>');d+="</span>";a(this).wrap('<span class="juizTipsWrapper"></span>');a(this).parents("span:first").prepend(d);a(this).removeAttr("title")});a(".juizTips").css("opacity","0");a("span.juizTipsWrapper").mouseover(function(){a(this).children("span.juizTips").stop(!0); a(this).children("span.juizTips").css("display")=="none"&&a(this).children("span.juizTips").css({display:"block"});a(this).children("span.juizTips").animate({opacity:b.gotoOpacity,top:b.gotoTop,left:b.gotoLeft},b.duration)});a("span.juizTipsWrapper").mouseout(function(){a(this).children("span.juizTips").delay(b.tipsDelay);a(this).children("span.juizTips").animate({opacity:0,top:"0px",left:"0px"},b.duration,function(){a(this).css({display:"none"})})})};var e={beforeURL:"go to the page",beforeTitle:"in order to", gotoOpacity:"0.9",gotoTop:"-17px",gotoLeft:"27px",duration:"300",tipsDelay:"300"}})(jQuery);
$(document).ready(function() {
            $("img[title]").juizLinkinTips();   
         });


Vous pouvez modifier la partie à la fin du script pour définir sur quel élément l'effet va s'appliquer.

Code:
$(document).ready(function() {
            $("img[title]").juizLinkinTips();   
         });

dans cet exemple toutes les images ayant un titre.

par exemple

Code:
<img src="http://illiweb.com/fa/admin/icones/help.png" alt="HELP" title="HELP" width="218" height="144" />


Pour l'appliquer que à certains éléments il faut donc modifier le script par exemple

Code:
  $(document).ready(function() {
            $(".test").juizLinkinTips();   
         }); 

Dans cet exemple l'effet s'appliquera aux éléments avec la class .test

il faudra alors mettre par exemple pour un lien

Code:
<a href="VOTRE Lien" title="Le contenu de l'infobulle" class="test">Lien</a>

Pour une image

Code:
<img src="http://illiweb.com/fa/admin/icones/help.png" alt="TEST" title="TEST" width="218" height="144" class="test" />

Mettre le CSS dans affichage-->couleur -->feuille de style.

Code:
.juizTips {
   position: absolute;
   top: 0;   left: 0;
   display: none;
   width: 150px;
   padding: 7px;
   border: 3px solid #AAA;
   font-size: 0.9em;
   line-height: 1.2em;
   color: #555;
   background: #f2f2f2;
   overflow: hidden;
   z-index: 500;
   
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   border-radius: 8px;
   
   -moz-box-shadow: 2px 2px 9px #999;
   -webkit-box-shadow: 2px 2px 9px #999;
   box-shadow: 2px 2px 9px #999;
   word-wrap: break-word;
}
.juizTipsWrapper {
   position: relative;
   display: inline-block;
   cursor: help;
}

Cordialement.
avatar

Adam_sfp
Membre actif

Masculin
Messages : 4308
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un tutoriel un peu trop compliqué pour moi^^"

Message par Ayael le Dim 18 Mar 2012 - 11:38

ça marche super bien merci à toi ♥ Problème résolu donc!
avatar

Ayael
*****

Féminin
Messages : 648
Inscrit(e) le : 21/04/2011

http://valsedupouvoir.forumactif.com/
Ayael a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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