[RESOLU]Récupérer le positionnement d'une image centrée

Bonjour j'ai une image centrée dans une DIV

Je souhaiterai récupérer la position de cette image pour la réinsérer dans la CSS.
Est-ce possible?
Modifié par mamax (29 Sep 2009 - 15:22)

Bonjour,

Tu compte centrer ton image dans ta page en lui donnant des coordonnées ? Mauvaise idée... Que se passera t'il si l'écran à une résolution différente de la tienne ? Ou si l'utilisateur redimensionne son navigateur ?


Sinon, oui c'est possible et c'est en JavaScript que ça se fait.

Par exemple :

document.getElementById('id').offsetLeft; 
 document.getElementById('id').offsetTop; 

ps. : Code trouvé en une recherche sur google avec "JavaScript position élément".

En fait mon image est centrée en utilisant la propriété "margin : 0 auto;" dans une DIV (elle même centrée dans la page (via la même méthode).

J'ai besoin des coordonnée de l'image car je fait un rollover sur celle-ci. si j'ai pas les coordonnée, le bloc ne s'affiche pas au bon endroit.

Le problème vient donc de ton roll-over, car il n'est pas logique que tu ai besoin des coordonnées de l'image.

Peut-être pourrais-tu te renseigner sur la techniques des portes coulissantes.

Sinon, il nous faudrait un peu de code ou une page en ligne pour t'aider plus.

Voici le code XHTML:

<div id="content">
	<div id="post-144" class="post">
		<div class="full-photo">
	                <div class="photo-credit">
				<div class="names">
					bla bla...
                                 </div>
				<div class="values">
					blo blo...
				</div>
			</div>
			<img width="533" height="800" src="http://portfolio.maxk.fr/wp-content/uploads/2009/09/IMG_2955.jpg" class="attachment-large" alt="" title="Le marcheur" />
		</div>
				
		<h2 class="entry-title">Le marcheur</h2>
		<div class="entry-content">
				<p><!-- Image removed by Remove First Image Plugin --></p>
		</div>
</div>

Voici le JS (jQuery) qui me fait mon rollover: le bloc "id=photo-credit" s'affiche avec un fadeIn/fadeOut

$(document).ready(function()
{
  $("div#content .post .full-photo .photo-credit").hide();
  $("div#content .post .full-photo .attachment-large").hover(function()
  {
  	$(this).addClass("hover");
	$(this).prev("div#content .post .full-photo .photo-credit").fadeIn(500);
  },
  	function()
  	{
  		$(this).removeClass("hover");
  		$(this).prev("div#content .post .full-photo .photo-credit").fadeOut(500);
  	}
  );
});

et le code CSS:

#content {
	float:left;
	width: 800px;
	position:relative;
	margin: 0;
	overflow:visible;
	}
	
#content .post {
	float:left;
	margin:0 0 5px 0;
	padding:0;
	position:relative;
	width:800px;
	overflow:visible;
	}
	
#content .post .full-photo {
	margin:0;
	background:transparent;
	display: block;
	}		

#content .post .full-photo img {
	margin: 0 auto;
        }
	
#content .post .full-photo .photo-credit {
	color:#000000;
	visibility:visible;
	display: none;
	font-size:12px;
	font-weight: 200;
	position:absolute;
	padding: 7px 10px 10px 10px;
	left: 0;
	width:210px;
	height:73px;
	background:#FFFFFF;
	z-index:99;
	-moz-opacity:0.7;
	filter:alpha(opacity=70);
	opacity:0.7;
	}

Si l'image fait 800px de large cela fonctionne bien et le bloc "photo-credit" s'affiche dans le coin haut gauche de l'image, par contre quand l'image fait moins de 800px de large, elle est centrée, mais le bloc "photo-credit" reste positionné au même endroit sans décalage pour se positionner sur la photo.

Plutôt effectivement de récupérer la position de l'image, il y a peut être un moyen de forcé le bloc "photo-credit" à se positionner par rapport à l'image et non au bloc parent...

Deplus pourquoi le bloc parent "full-photo" fait une largeur de 800px et non la largeur du contentant?
Modifié par mamax (29 Sep 2009 - 12:25)

Bon j'ai réussi à faire de que je voulait mais d'une autre manière.

J'ai d'une part récupéré la taille de mon image au préalable en php.

Ensuite j'ai créée un bloc "full" qui contient les bloc "img" et "photo-credit". Il sera fixé en largeur grâce au résultat du script php et il sera ensuite centré dans le bloc "full-photo".

Le hover prend donc maintenant comme ancêtre le bloc "full" et non le bloc "full-photo"

je ne sais pas si j'ai été très claire...

<div class="full-photo">
	<div class="full"  <?php echo "style =\" width:" . $taille_image[0] . "px;\""; ?>>
		<div class="photo-credit">
                </div>
                <img \>
        </div>
</div>

.single .post .full-photo .full {
	margin:0 auto;
	position: relative;
	}

Bref problème résolut
Modifié par mamax (29 Sep 2009 - 15:25)