ok Victor

Mais moi je voudrais reproduire cet effet là:

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

Regarde la démo.

Merci pour ton aide.

Oui c'est ce qui se passe.

[b][i]J'ai trouvé cela en javascript[/i][/b]:

[code]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);}
}[/code]


[b][i]Voici mon code php[/i][/b]:

[code]$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>';[/code]


J'ai un soucis, apparement:

[quote]Message : 'initi' est indéfini.[/quote]

Merci de ton aide

[quote="tipi"]J'ai vu que le hover pour IE ne marche pas.[/quote]
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.
[quote="tipi"]Pourquoi on utilise Javascript au lieu de CSS ?[/quote]
Il est [i]préférable[/i] 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).

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

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

$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>';

Bonsoir,

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


[b][i]Voici mon code css[/i][/b]:

[code]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;[/code]

[b]
[i]Voici mon code php[/i][/b]:

[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>';[/php]

Merci de votre aide