Alors merci Artemus pour l'exemple de script de balle qui rebondit, je vais m'en aspirer. Même si j'ai un peu de mal à tout comprendre pour l'instant. Mais je pense qu'il me seras utile par la suite.
Je vais m'orienté vers une solution Javascript, avec des balises canvas HTML 5.
Sinon si ça t'intéresse je pense que j'ai pratiquement finit la version stable de mon premier script.
Tu va voir un ptit air de ressemmblence dans le script
Et sinon il est en ligne toujours à cette adresse
ici
Le javascript + Le Html
<html>
<head>
<script src="js/js.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<body>
<div class="conteneur">
<img src="images/titre.png" alt="header" class="entete"/>
<div class="menu">
<ul>
<li id="ligne"><img src="images/lignedeclen.png" alt="ligne" id="imageligne" class=""/></li>
<li id="tableau"><img src="images/tableauenclen.png" alt="tableau" id="imagetableau" class=""/></li>
<li class="trie" id="listeur"><div class="clear"/><p>Trier par</p><img src="images/trietriange.png" alt=""><div class="clear"/>
<ul class="liste" >
<li id="voiturebouton">Voiture</li>
<li id="livrebouton">Livre</li>
<li id="technologiebouton">Technologie</li>
<li id="photographiebouton">photographie</li>
</ul>
</li>
</ul>
</div>
<ul class="conteneu" id="un">
<li value="0" id="livre"><div ><img src="a.png"><p> </p></div></li>
<li value="0" id="voiture"><div ><img src="b.png"><p> </p></div></li>
<li value="0" id="tech"><div ><img src="c.png"><p> </p></div></li>
<li value="0" id="photo"><div ><img src="d.png"><p> </p></div></li>
<li value="0" id="photo"><div ><img src="d.png"><p> </p></div></li>
<li value="0" id="livre"><div ><img src="a.png"><p> </p></div></li>
<li value="0" id="voiture"><div ><img src="b.png"><p> </p></div></li>
<li value="0" id="tech"><div ><img src="c.png"><p> </p></div></li>
</ul>
<ul class="conteneu" id="deux">
<li value="0" id="tech"><div ><img src="c.png"><p> </p></div></li>
<li value="0" id="livre"><div ><img src="a.png"><p> </p></div></li>
<li value="0" id="photo"><div ><img src="d.png"><p> </p></div></li>
<li value="0" id="voiture"><div ><img src="b.png"><p> </p></div></li>
<li value="0" id="tech"><div ><img src="c.png"><p> </p></div></li>
<li value="0" id="voiture"><div ><img src="b.png"><p> </p></div></li>
<li value="0" id="livre"><div ><img src="a.png"><p> </p></div></li>
<li value="0" id="photo"><div ><img src="d.png"><p> </p></div></li>
</ul>
</ul>
</div>
<script type="text/javascript">
/*================================================*/
/* DEBUT DU SCRIPT - Les Fonctions */
/*================================================*/
/*================================================*/
/* Dans tableaux effet d'agrandissement */
/*================================================*/
(function($)
{
$.fn.voir=function()
{
$(this).stop();
$(this).animate({
width : '310px'
,height:'310px',
opacity:'1'
}
,{
duration : 1000
, easing : 'swing'
, queue : true
}
).queue(function()
{
$(this).dequeue();
}
);
};
})(jQuery);
/*===============================================*/
/* Dans tableaux effet de retrécissement */
/*================================================*/
(function($)
{
$.fn.cache=function()
{
$('.conteneu>li').animate({
width : '150px'
,height:'150px'
}
,{
duration : 1000
, easing : 'swing'
, queue : true
}
).queue(function()
{
$(this).dequeue();
}
);
};
})(jQuery);
/*================================================*/
/* Transforme Ligne en Tableaux */
/*================================================*/
(function($)
{
$.fn.translignetab=function()
{
$('.conteneu>li').css('margin-left', '0');
$('.conteneu>li>p').hide(1000);
$('.conteneu>li').animate({
width: '150px',
padding: '-20px'
}, 2000)
.queue(function (){
$('.conteneu>li').animate({
height: '150px',
opacity:0.5,
}, 2000);
$(this).fadeIn(1000, function(){
$('.conteneu').addClass('ultableau');
$('.conteneu>li').addClass('tableauli');
$('.conteneu>li').removeClass('ligneli');
$('li').stop(true, true);
});
$(this).dequeue();
});
};
})(jQuery);
/*================================================*/
/* Tranforme Tableau en Ligne */
/*================================================*/
(function($)
{
$.fn.transtabligne=function()
{
$('ul').removeClass('ultableau');
$('.conteneu>li').animate(
{width: "750px",
height: "310px",
opacity:1,
}
, 2000).queue(
function () {
$('.conteneu>li').removeClass('tableauli')
$('.conteneu>li').addClass('ligneli');
$('.conteneu>li').css('padding', '20px');
$('.conteneu>li').css('margin-left', '-100px');
$('p').show('p');
b='ligne';
$('.conteneu>li').stop(true, true);
})
};
})(jQuery);
$.fn.tagName = function() {
return this.get(0).tagName.toLowerCase();
}
/*==================================*/
/* Script */
/*==================================*/
var colorphoto = 0 ;
var colorlivre = 0 ;
var colortech = 0 ;
var colorvoiture = 0 ;
var b = 'tableau';
$('.conteneu>li').addClass('tableauli');
$('ul.conteneu').addClass('ultableau');
/*====================================================*/
/* Transforme le mode Tableaux en mode Ligne */
/*===================================================*/
$('#ligne').click(function() {
if (b=='tableau')
{
$(this).transtabligne();
$('#imageligne').attr('src', 'images/ligneenclen.png');
$('#imagetableau').attr('src', 'images/tableaudeclen.png');
};
b='ligne';
});
/*====================================================*/
/* Transforme le mode Ligne en mode Tableaux */
/*===================================================*/
$('#tableau').click(function() {
if (b=='ligne')
{
$(this).translignetab();
$('#imageligne').attr('src', 'images/lignedeclen.png');
$('#imagetableau').attr('src', 'images/tableauenclen.png');
};
b='tableau';
});
/*====================================================*/
/* Trie les données */
/*===================================================*/
$('#livrebouton').click(function()
{
$('li#livre').toggle('slow');
if (colorlivre == 0) {
$('#livrebouton').css('color', '#3d6f93');
colorlivre = 1 ;
}
else {
$('#livrebouton').css('color', '#7a7979');
colorlivre = 0 ;
};
});
$('#voiturebouton').click(function()
{
$('li#voiture').toggle('slow');
if (colorvoiture == 0) {
$('#voiturebouton').css('color', '#3d6f93');
colorvoiture = 1 ;
}
else {
$('#voiturebouton').css('color', '#7a7979');
colorvoiture = 0 ;
};
});
$('#technologiebouton').click(function()
{
$('li#tech').toggle('slow');
if (colortech == 0) {
$('#technologiebouton').css('color', '#3d6f93');
colortech = 1 ;
}
else {
$('#technologiebouton').css('color', '#7a7979');
colortech = 0 ;
};
});
$('#photographiebouton').click(function()
{
$('li#photo').toggle('slow');
if (colorphoto == 0) {
$('#photographiebouton').css('color', '#3d6f93');
colorphoto = 1 ;
}
else {
$('#photographiebouton').css('color', '#7a7979');
colorphoto = 0 ;
};
});
/*====================================================*/
/* Agrandisement petits carreaux dans Tableau */
/*===================================================*/
$('.conteneu>li').live('click',function()
{
var inco = $(this).index();
inco = inco%2;
var value = $(this).attr('value');
if (b=='tableau')
{
if (value==1)
{
$("li").cache();
$("li[value=1").cache();
$("li").attr('value', '0');
}
else if(value==0)
{
if(inco)
{
$(this).attr('value', '1');
var tab = $(this).prev().clone();
$(this).clone().replaceAll($(this).prev());
$(tab).clone().replaceAll($(this));
}
$(this).attr('value', '1');
$("li[value=1]").voir();
};
};
});
/*====================================================*/
/* Effet d'opacité dans Tableaux */
/*===================================================*/
$('.conteneu>li[value=0]').live('mouseenter',
function ()
{
if (b=='tableau')
{
$(this).fadeTo('slow',1);
};
});
$('.conteneu>li[value=0]').live('mouseout',
function () {
if (b=='tableau')
{
$(this).fadeTo('slow',0.6);
};
});
/*====================================================*/
/* Menu déroulant pour lister */
/*===================================================*/
$('ul.liste').hide('slow');
$('#listeur').hover(function () {
if ($("ul.liste").is(":hidden")) {
$("ul.liste").slideDown("slow");
} else {
$("ul.liste").slideUp();
}
});
/*===================================================*/
/* Provisoire */
/*===================================================*/
c = $('a#etat').text();
$('html').mousemove(function() {
if (b=='tableau') {
};
$('a#etat').text(c+b);
});
$('.conteneu>li>div>p').text('Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina ');
</script>
</body>
</html>
Et le CSS
body
{
background-image:url(../1.jpg);
color: #7a7979;
}
p{
width:400px;
float: right;
}
.conteneur
{
width:750px;
margin-left:auto;
margin-right:auto;
}
.entete
{
display: block;
width:467px;
margin-left: 100px;
}
.menu
{
background-image:url(../images/menufond.png);
height:86px;
width: 100%;
position: absolute;
left:0;
}
.menu ul
{
width: 750px;
margin-left: auto;
margin-right: auto;
position: relative;
top:-15px;
}
.menu li
{
list-style:none;
float: left;
width:150px;
height:86px;
margin-right: 29px;
margin-left: -19px;
cursor:pointer;
z-index: 1;
}
.menu li:hover
{
list-style:none;
float: left;
background-image:url(../images/fonddebouton.png);
background-repeat: repeat-x;
}
.menu img
{
display:block;
margin-left:auto;
margin-right: auto;
margin-top: 8px;
}
.menu .trie
{
width:290px;
font-size:40px;
padding: 10px;
height:83px;
}
.menu .trie:hover
{
background-image:url(../images/fonddeboutontrie.png);
background-repeat: repeat-x;
}
.menu .trie p
{
width:auto;
font-size:40px;
float:left;
margin-top:10px;
}
.menu .trie img
{
float:right;
margin-top: 20px;
margin-right: 50px;
}
.menu .trie .liste
{
height:auto;
position: relative;
width: 310px;
padding: 0px ;
top:-23px;
left:-10px;
-moz-box-shadow: 0px 0px 6px #a1a1a1;
-webkit-box-shadow: 0px 0px 6px #a1a1a1;
box-shadow: 0px 0px 6px #a1a1a1;
}
.menu .trie .liste li
{
float: none;
margin:0;
font-size:20px;
background-color: #DDD;
z-index: 100;
height:40px;
width:290px;
position: relative;
padding: 5px 5px 5px 15px;
border-top: 0px 1px 1px 1px solid #999;
background-image:url(../images/texture.png);
}
.menu .trie .liste li:hover
{
background-image:url(../images/fonddeboutontrie.png);
color:white;
}
.conteneu
{
margin-top: 100px;
}
.conteneu li{
-moz-box-shadow: 0px 0px 6px #a1a1a1;
-webkit-box-shadow: 0px 0px 6px #a1a1a1;
box-shadow: 0px 0px 6px #a1a1a1;
cursor: pointer;
}
.ultableau
{
width:330px;
height:auto;
float:left;
overflow: hidden;
list-style:none;
margin-left:-45px;
position: relative;
font-size: 50px;
}
.ligneli
{
width:750px;
height:auto;
margin: 5px;
padding: 20px;
background-color: #DEE;
float:left;
overflow: hidden;
left:0;
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=1)
z-index:1;
margin-left: -50px;
}
.tableauli{
width:150px;
height:150px;
margin: 5px;
background-color: #DEE;
float:left;
overflow: hidden;
opacity: 0.6;
-moz-opacity: 0.6;
filter:alpha(opacity=6);
z-index:1;
}
.niak
{
top:0;
width: 100%;
margin-top: -2px;
}
.img
{
float:left;
top:0;
margin-right:20px;
}
.col4
{
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=1);
}
.a2 .ahover
{
font-size:50px;
margin-left: 50px;
display: block;
top:0;
position: absolute;
left:62%;
z-index:4;
}
.clear
{
clear: both;
}
Modifié par salva91 (12 May 2012 - 03:05)
