Forum d'entraide PHPFrance

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

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

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

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).

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

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.

Forum d'entraide PHPFrance

zoomer une photo au survol de la souris

zoomer une photo au survol de la souris

Re: zoomer une photo au survol de la souris

Re: zoomer une photo au survol de la souris

Re: zoomer une photo au survol de la souris

Re: zoomer une photo au survol de la souris

Re: zoomer une photo au survol de la souris