zoomer une photo au survol de la souris

28 sept. 2009, 21:11

Bonsoir,

J'aimerai zoomer la photo au survol de la souris.

Voici mon code css:

ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; 
	height: 100px; /* Set the small thumbnail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
}
ul.thumb li img:hover {
	/*background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect*/
	width:300px;
	height:400px;

	border: none;

Voici mon code php:

$contenu = '<ul class="thumb">';
$contenu .= '<li><a href="images\tata\black_flower_1.jpg"><img src="images\tata\black_flower_1.jpg" width="100" border="no" alt="Le titre de la photo 1" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_2.jpg"><img src="images\tata\black_flower_2.jpg" width="100" border="no" alt="Le titre de la photo 2" /></a></li>'; 
$contenu .= '<li><a href="images\tata\black_flower_3.jpg"><img src="images\tata\black_flower_3.jpg" width="100" border="no"  alt="Le titre de la photo 3" /></a></li>';
$contenu .= '<li><a href="images\tata\black_flower_4.jpg"><img src="images\tata\black_flower_4.jpg" width="100" border="no" alt="Le titre de la photo 4" /></a></li>'; 
$contenu .= '<li><a href="images\tata\black_flower_5.jpg"><img src="images\tata\black_flower_5.jpg" width="100" border="no" alt="Le titre de la photo 5" /></a></li>';
$contenu .= '</ul>';

Merci de votre aide

28 sept. 2009, 21:20

Plutôt que d'utiliser les CSS, le mieux est de recourir au JavaScript.

28 sept. 2009, 21:26

ok mais comment faire. Peux tu m'aider?
Pourquoi on utilise Javascript au lieu de CSS ?

J'ai vu que le hover pour IE ne marche pas.

Merci pour ton aide

28 sept. 2009, 21:39

J'ai vu que le hover pour IE ne marche pas.

La pseudo-classe :hover, IE 6 ne l'applique qu'à l'élément a ; en revanche, IE 7 et 8 l'appliquent sans problème à n'importe quel élément.

Pourquoi on utilise Javascript au lieu de CSS ?

Il est préférable d'utiliser le JavaScript plutôt que les CSS parce que, d'une part, les photos à zoomer ne constituent pas des images décoratives et ne peuvent donc pas être gérées comme des images d'arrière-plan et que, d'autre part, les CSS ne sont pas le langage le plus approprié pour ton besoin (imagine que ta liste de photos à zoomer est générée dynamiquement en PHP).

28 sept. 2009, 21:54

Oui c'est ce qui se passe.

J'ai trouvé cela en javascript:

Code : Tout sélectionner

var coeff=4;//Coefficient de reduction
var larg=600;//largeur maxi de l'image
var haut=800;//hauteur maxi de l'image
var coeffinit=coeff;

function changer() {
if (document.image.width < larg) {
coeff = coeff-0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);
chang=window.setTimeout('changer();',60);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}

function initial() {
if (document.image.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image.width = Math.round(larg/coeff);
document.image.height = Math.round(haut/coeff);

initi=window.setTimeout('initial();',60);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}

Voici mon code php:

Code : Tout sélectionner

$contenu = '<ul class="thumb">';
$contenu .= '<a name="img"></a>';
$contenu .= '<li><a href="#img" onMouseOut="initial()" onMouseOver="changer()"><img src="images\tata\black_flower_1.jpg" name="image" width="100" border="no" alt="Le titre de la photo 1" /></a></li>';
$contenu .= '</ul>';

J'ai un soucis, apparement:

Message : 'initi' est indéfini.

Merci de ton aide

28 sept. 2009, 22:25

ok Victor

Mais moi je voudrais reproduire cet effet là:

http://www.sohtanaka.com/web-design/fan ... -w-jquery/

Regarde la démo.

Merci pour ton aide.

zoomer une photo au survol de la souris

Qui est en ligne