Un tutoriel un peu trop compliqué pour moi^^"
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Un tutoriel un peu trop compliqué pour moi^^"
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...
(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
Re: Un tutoriel un peu trop compliqué pour moi^^"
Petit up du jour ♥
Re: Un tutoriel un peu trop compliqué pour moi^^"
Bonjour
Il faudrait mettre le script dans gestion des codes javascript (sur toutes les pages)
Vous pouvez modifier la partie à la fin du script pour définir sur quel élément l'effet va s'appliquer.
dans cet exemple toutes les images ayant un titre.
par exemple
Pour l'appliquer que à certains éléments il faut donc modifier le script par exemple
Dans cet exemple l'effet s'appliquera aux éléments avec la class .test
il faudra alors mettre par exemple pour un lien
Pour une image
Mettre le CSS dans affichage-->couleur -->feuille de style.
Cordialement.
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.
Re: Un tutoriel un peu trop compliqué pour moi^^"
ça marche super bien merci à toi ♥ Problème résolu donc!
Sujets similaires
» Un hover un peu compliqué
» Problème assez compliqué à décrire en un titre, vraiment désolé...
» tutoriel
» Tutoriel?
» Tutoriel qui ne fonctionne plus
» Problème assez compliqué à décrire en un titre, vraiment désolé...
» tutoriel
» Tutoriel?
» Tutoriel qui ne fonctionne plus
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum