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

2 participants

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 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
Ayael

Ayael
*****

Féminin
Messages : 650
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 Sam 17 Mar 2012 - 10:34

Petit up du jour ♥
Ayael

Ayael
*****

Féminin
Messages : 650
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 Dim 18 Mar 2012 - 9:55

UP^^
Ayael

Ayael
*****

Féminin
Messages : 650
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 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://2img.net/i/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://2img.net/i/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.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
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 Dim 18 Mar 2012 - 11:38

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

Ayael
*****

Féminin
Messages : 650
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

- Sujets similaires

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