<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>
Lun 7 Mar - 3:01