Bonjour, je remonte ce topic car j'ai totalement changé ma façon de procédé, mais mes divs ne vont ni au centre, et ne reprenne pas leur place initiale. et je ne comprends pas pourquoi...
Page visible sur:
http://www.lileye.fr/fr/album.php
Je vous invite à aller sur la page pour visualiser le rendu.
Le but recherché, je le rappel, est que lorsque l'on survol une div, celle-ci se mette au centre des autres. Lorsqu'on en survol une autre, celle du centre reprends sa place pour être remplacée par la nouvelle.
Merci d'avance pour vos réponses !
HTML :
<div id="presentation" class="presentation"><img alt="Album photo Lileye - Photographe basé à Lyon" src="images/album_photo_lileye_photographe_lyon.png" width="292" height="227" /></div>
<div id="areaOver">
<div class="classedivalbum" onmouseover="masquer('presentation');" onclick="javascript:location.href='http://www.lileye.fr/fr/photos/mariage/'" id='mariage'></div>
<div class="classedivalbum" id='grossesse'></div>
<div class="classedivalbum" id='nature'></div>
<div class="classedivalbum" id='patrimoine'></div>
<div class="classedivalbum" id='portrait'></div>
<div class="classedivalbum" id='macro'></div>
<div class="classedivalbum" id='gastronomie'></div>
<div class="classedivalbum" id='immobilier'></div>
</div>
CSS :
#mariage {
margin-top: 20px;
margin-left: 435px;
background: url('http://www.lileye.fr/fr/images/mariage.jpg') center center no-repeat;
background-size:100% 100%;
}
#grossesse {
margin-top:130px;
margin-left:180px;
background: url('http://www.lileye.fr/fr/images/grossesse.jpg') center center no-repeat;
background-size:100% 100%;
}
#nature {
margin-top:370px;
margin-left:80px;
background: url('http://www.lileye.fr/fr/images/nature.jpg') center center no-repeat;
background-size:100% 100%;
}
#patrimoine {
margin-top:585px;
margin-left:180px;
background: url('http://www.lileye.fr/fr/images/patrimoine.jpg') center center no-repeat;
background-size:100% 100%;
}
#portrait {
margin-top:695px;
margin-left:435px;
background: url('http://www.lileye.fr/fr/images/portrait.jpg') center center no-repeat;
background-size:100% 100%;
}
#macro {
margin-top:585px;
margin-left:685px;
background: url('http://www.lileye.fr/fr/images/macro.jpg') center center no-repeat;
background-size:100% 100%;
}
#gastronomie {
margin-top:370px;
margin-left:780px;
background: url('http://www.lileye.fr/fr/images/gastronomie.jpg') center center no-repeat;
background-size:100% 100%;
}
#immobilier {
margin-top:130px;
margin-left:685px;
background: url('http://www.lileye.fr/fr/images/immobilier.jpg') center center no-repeat;
background-size:100% 100%;
}
.classedivalbum {
position: absolute;
width: 100px;
height: 100px;
background-color: #c0c0c0;
text-align: center;
vertical-align:middle;
line-height: 100px;
font-size:19px;
font-weight:bold;
color:#000;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 0 0 10px #343434;
-o-box-shadow: 0 0 10px #343434;
-webkit-box-shadow: 0 0 10px #343434;
box-shadow: 0 0 10px #343434;
cursor:pointer;
}
Javascript :
$(document).ready( function() {
var a_mariage = new Array(20,435);
var a_grossesse = new Array(130,180);
var a_nature = new Array(370,80);
var a_patrimoine = new Array(585,180);
var a_portrait = new Array(695,435);
var a_macro = new Array(585,685);
var a_immobilier = new Array(370,780);
var a_gastronomie = new Array(130,685);
var xPosCenter = 270; ///Attention ne pas mettre la meme pos X qu'un des bloc
var yPosCenter = 335; ///Attention ne pas mettre la meme pos Y qu'un des bloc
$("#testOver").val(0); //init//Permet d'éviter le déclenchement du mouseover pendant un déplacement
$.extend({
goCenter : function(Obj) {
$("#testOver").val(1);
X_ElemOver = Obj.position().top;
Y_ElemOver = Obj.position().left;
$(Obj).animate({
top: xPosCenter,
left: yPosCenter,
width: 300,
height: 300
}, 300 ,r = function () {
$("#testOver").val(0);
});
},
checkCenter : function() { ///Check si ya un bloc au centre et le renvoi à sa pos INIT
$("#areaOver div").each(function( i, obj ) {
arrayPosOver = new Array();
if ( $(obj).position().top == xPosCenter && $(obj).position().left == yPosCenter) {
idbloc = $(obj).attr('id');
arrayPosOver = eval('a_'+idbloc);
$(obj).delay(50).animate({
top:arrayPosOver[0]+'px',
left:arrayPosOver[1]+'px',
width: 100,
height: 100
},300, function () {
});
}
});
}
});
$("#areaOver div").mouseover( function() {
if ($("#testOver").val()==1) return false;
X_ElemOver = $(this).position().top;
Y_ElemOver = $(this).position().left;
if (X_ElemOver!=xPosCenter && Y_ElemOver!=yPosCenter) {
$.checkCenter();
}
$.goCenter($(this));
});
});
