28173 sujets

CSS et mise en forme, CSS3

CSS pour zoomer une image...

Bonjour,

je vais essayer de m'expliquer le plus clairement possible... J'ai rapidement cherché sur les tutoriels et le forum mais je n'ai rien trouvé.

Avant de commencer, je vais poster une adresse où j'ai presque trouvé ce que je cherchais, mais pas tout à fait ! lol : http://mammouthland.free.fr/cours/css/cours8_2.php. Je préfère mettre le lien plutôt que de copier coller tt le code... je ne sais pas si c'est la bonne solution.

Alors, je souhaite avoir sur le coté gauche des vignettes et au passage de la souris sur celles-ci, l'image en dimensions réelles s'affichent à droite du bloc contenant les vignettes.

Avec le code que j'ai trouvé, ca fonctionne presque (cf. lien), mais le seul pb c'est que la taille de l'image en grand est définie en dur dans la classe CSS qui définit par ailleurs le décalage de l'image sur la droite.

Cela marcherait si toutes mes grandes images avaient les memes dimensions, mais comme ce n'est pas le cas, elles se mettent toutes seules aux dimensions du bloc et sont donc déformées...

J'ai essayé en php de récupérer les dimensions de l'image et de ne pas mettre de dimensions fixes dans le CSS, mais du coup, le div n'a plus de taille et rien ne s'affiche.

Pour comprendre ce que je dis, je pense que le plus simple est de regardé le code du lien cité plus haut.

J'espère ne pas avoir été trop flou. Je regarde également des solutions en javascript.

Merci pour vos réponses et bonne soirée

Bastien
Modifié par bastien31000 (16 Feb 2007 - 00:16)
Salut,

Aurais tu aussi le lien de la page en cours, pour pouvoir analyser les différences et t'aiguiller ?
Bonjour,

Vois si ça t'aide ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 

<title>Test</title>
<style type="text/css">

*{padding: 0; margin: 0;}

#test {
	height: 550px;
	width: 800px;
	margin: auto;
	border: 1px solid black;
	position: relative;
}

img {
	border: 0;
}

a{ 
	display: block;
	text-decoration: none;
	margin-top: 10px;
}

a.imag1{ 
	width: 150px;
	height: 202px;
	background: url(img1_red.jpg);
}
 
a.imag2{ 
	width: 64px;
	height: 150px;
	background: url(img2_red.jpg);
}

 a span{
	display: none;
}

a:hover{
	border: none; /*-- bug IE6 --*/
}

 a:hover span{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 50;
	display: block;
}



</style>
</head>
<body>

<div id="test">
	<a href="#" title="" class="imag1" ><span><img src="img1.jpg" alt="" /></span></a>
	<a href="#" title=""  class="imag2"><span><img src="img2.jpg" alt="" /></span></a>
</div>
</body>
</html>

upload/5854-img1.jpg upload/5854-img2.jpg upload/5854-img1red.jpg upload/5854-img2red.jpg
Bonjour,

je viens d'essayer la solution que me proposait Ghost, mais le pb est que dans cette solution, la vignette est en fait en background. Ca sous entend que pour chaque vignette, je dois créer une classe et que l'image doit etre placé en bg dans le CSS...

Or, je génère les vignettes à la volée en lisant le contenu du répertoire. J'aurais voulu savoir s'il n'y avait pas un moyen de faire avec juste 2 classes, une pour les vignettes et une pour le bloc de droite qui contiendra la photo en taille normale.

En fait, le résultat que je souhaite serait celui-ci : http://perso.orange.fr/edo.jcdechatre/pages/edo-dechatre-illustations.html.

Peut etre que ca n'est pas possible en CSS et que je devrais le faire en javascript ?

Merci de vos réponses

Bastien
Bonjour,

Si tu généres tes vignettes à la volée, tu peux en php en recuperer les dimensions (getimagesize), tu styles dans le code les liens correspondant à tes vignettes dans ne boucle ex:
<a href="#" title="" style="<?php echo 'width:'.$width.'px ;height:'.$height.'px ;background: url('.$adresse_image_reduite.');"><span><img src="'.$adresse_image.'"';?> alt="" /></span></a>


Le reste du css dans la feuille externe et tu n'auras alors qu'une seule classe statique et une dynamique. Non?
Bonjour,

oui en effet... je suis un peu bete car j'ai fait un essai en plus dans ce style où je récupérais les dimensions des images pour essayer de forcer leurs dimensions à l'affichage... mais ca marchait pas...

mais en utilisant ce que tu dis, ca doit certainement marcher ! j'essaye ca ce soir

merci et bonne journée

Bastien
Sujet clos
Aller à