Invité Invité
| Sujet: Signatures personalisées Lun 7 Mar - 3:01 | |
| Vous voulez une superbe signature toute dynamique de ce genre ? C'est possible! Ouvrez un post avec une demande dans cette section. Et nous nous occupons de vous. Vous n'avez qu'à remplir ce formulaire ci-dessous : Nombre de personnages : Nom des personnages :Texte pour chaque personnage ( Merci de mettre texte1, le numéro 1 étant lié au personnage 1, le premier de la liste dans les noms donnés au dessus.) : Autres : Liens avatars avec la taille du format (Message court 100x100, Message long 120x120, Message très long 150x150, autres formats possibles, par exemple, en 410x200. Etc... tout est possible. °°) :Il vous suffira ensuite de copier ce codage la, dans votre signature et d'activer l'html : - Code:
-
<iframe frameborder="0" scrolling="auto" height="300" width="100%" src="lienavotrepage"><p>Erreur.</p></iframe>
Voila des exemples de ce que l'ont peut faire... Copyright Saturnin : Copyright Firea :Copyright Alyaa : Mais sinon ! Explication !
Alors, premièrement, si vous avez un serveur. Récupérez ces fichiers ci-dessous : J'ai hébergé tout les fichiers sur mon serveur à l'adresse suivant : http://arythea.rd-h.fr/nano/Contient les fichiers JQuery necessaires : jquery-1.5.1.js adresse : http://arythea.rd-h.fr/nano/jquery-1.5.1.js jquery.easing.1.3.jsadresse : http://arythea.rd-h.fr/nano/jquery.easing.1.3.js js.Dialog_0.1.3.jsadresse : http://arythea.rd-h.fr/nano/js.Dialog_0.1.3.jsEt le fichier css : sec.cssadresse : http://arythea.rd-h.fr/nano/sec.cssVous les mettez dans un dossier. (Moi j'ai mis dans le dossier : http://arythea.rd-h.fr/nano/)Et ensuite, il vous faut créer une page html ! Avec le code ci-dessous : - Code:
-
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Personnages de <!-- Votre nom ici!--></title> <link rel="stylesheet" href="http://sd-2.archive-host.com/membres/up/214149153943670776/sec.css" /> <script src="http://sd-2.archive-host.com/membres/up/214149153943670776/jquery-131min.js"></script> <script src="http://sd-2.archive-host.com/membres/up/214149153943670776/jqueryeasing13.js"></script> <script src="http://sd-2.archive-host.com/membres/up/214149153943670776/dialog.js"></script> <style> /* STYLE EDITABLE */
body { font-family: verdana, arial; }
.careff { /* width et height doivent absolument avoir la meme valeur - qui est celle des images. */ width:100px; /* A EDITER */ height:100px; /* A EDITER */ border: none; margin:5px 5px 5px 0; cursor:help; overflow:hidden; /* Ne pas editer */ position:relative; /* Ne pas editer */ float:left; /* Ne pas editer */ }
.careff .caption { position:absolute; z-index:0; color:#ccc; display:block; }
.careff .caption h2 { font-size:12px; padding:10px 5px 0 8px; margin:0; color:#369ead; }
.careff .caption p { font-size:10px; padding:3px 5px 0 8px; margin:0; }
/* STYLE DES FICHES PERSONNAGES */
.descp h1 { font-family : arial, verdana, candara, serif; font-size : 1.2em; color : crimson; margin : auto; }
.descp h2 { font-family : arial, verdana, candara, serif; font-size : 1em; border-bottom : 1px solid #ccc; color : #E34363; margin : auto; }
.descp p { font-family : verdana, arial, candara, serif; font-size : 0.6em; color : #000; padding-top : 10px; }
a { text-decoration : none; }
a:hover { text-decoration : none; }
#per1 { background : transparent; }
#per2 { background : transparent; }
#per3 { background : transparent; }
#per4 { background : transparent; }
.sd_container{ font-family: verdana,arial,helvetica,sans-serif; margin: 0; padding: 10px; position: absolute; background-color: #fff; border: solid 10px #333; /* Couleur du bord */ -moz-border-radius : 7px; border-radius : 7px; webkit-border-radius : 7px; }</style>
<!-- Ne pas toucher, sauf le speed_in et le speed_out qui definissent la vitesse de l'effet--> <script type="text/javascript"> $(document).ready(function() {
//editable var style_in = 'easeOutBack'; var style_out = 'easeInOutBack'; var speed_in = 1000; var speed_out = 600; // ne plus toucher var neg = Math.round($('.careff').width() / 2) * (-1); var pos = neg * (-1); var out = pos * 2; var nou = out * (-1); $('.careff').each(function () { url = $(this).find('a').attr('href'); img = $(this).find('img').attr('src'); $('img', this).remove(); $(this).append('<div class="topLeft"></div><div class="topRight"></div>'); $(this).children('div').css('background-image','url('+ img + ')'); $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:out}); $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:out});
}).hover(function () { $(this).find('div.topLeft').stop(false, true).animate({top:nou, left:0}, {duration:speed_out, easing:style_out}); //top:0, left:neg $(this).find('div.topRight').stop(false, true).animate({top:out, left:pos}, {duration:speed_out, easing:style_out}); // top:0, left:out }, function () { $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in}); $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in}); }).click (function () { window.location = $(this).find('a').attr('href'); }); }); $(document).ready(function() { $('.eff').simpleDialog(); }); </script> </head>
<body> <div class="careff" id="per1"> <a href="#" class="eff" rel="popup1"><!-- Pour enlever le lien vers la page description du personnage, enlever juste le rel="popup1"--> <img src="<!--Mettre ici le lien-->" /> <span class="caption"> <h2>Personnage 1</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </span> </a> </div>
<div class="careff" id="per2"> <a href="#"><!-- Pour mettre un lien pour que en cliquant apparaisse un popup, rajoutez dans la balise a le code suivant, en enlevant les parentheses (class="eff" rel="nom-de-l'id-du-popup") puis fermez la balise a apres le /span--> <img src="<!--Mettre ici le lien-->" /> </a> <span class="caption"> <h2>Personnage 2</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </span> </div>
<div class="careff" id="per3"> <a href="#"> <img src="<!--Mettre ici le lien-->" /> </a> <span class="caption"> <h2>Personnage 3</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </span> </div>
<div class="careff" id="per4"> <a href="#"> <img src="<!--Mettre ici le lien-->" /> </a> <span class="caption"> <h2>Personnage 4</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </span> </div>
<!-- Partie destinée aux mini fiches description du personnage, malheureusement l'insertion d'images ne marche pas bien. Pour creer des pages pour plusieurs personnages, recopier le code suivant allant de div a div puis juste changer le id. Dans le a href menant a votre mini fiche personnage, juste changer le rel="" en le nom de votre id. -->
<div class="poper" id="popup1"> <div class="descp"> <h1>Nom du personnage</h1> <h2>Sous-Titre</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> </body>
</html>
Vous allez en bas, vous cherchez - Code:
-
<div class="careff" id="per1"> . Et vous modifiez avec le nom de vos personnages. Si vous voulez adapter l'image dynamique a votre image, vous mettez les bonnes tailles dans le fichier css qui se trouve en haut : .careff { /* width et height doivent absolument avoir la meme valeur - qui est celle des images. */ width:100px; /* A EDITER */ height:100px; /* A EDITER */Et si vous vous y connaissez en .CSS ou html, vous pouvez aller plus loin et changer couleurs etc... Vous n'aurez qu'à changer pour les fichiers javascripts avec les adresses correspondantes a celles sur votre serveur, il suffira de changer les quatres lignes de scripts du début par : - Code:
-
<link rel="stylesheet" href="http://arythea.rd-h.fr/nano/sec.css" /> <script src="http://arythea.rd-h.fr/nano/jquery-1.5.1.js"></script> <script src="http://arythea.rd-h.fr/nano/jquery.easing.1.3.js "></script> <script src="http://arythea.rd-h.fr/nano/js.Dialog_0.1.3.js"></script> Si besoin d'un autre script Jquery, me demander ici et je le rajouterais à la liste du dossier nano. Astuces : Pour sauter des lignes dans les descriptions, préférés mettre vos lignes entre balises : - Code:
-
<p> </p> Pour faire du gras, n'hésitez pas à mettre : - Code:
-
<b> </b> Mais si vous n'avez rien compris, demandez moi et je vous ferais ce que vous désirez. (: |
|