survol d'image affichant en rollover un diaporama

**kuzza** · 16/12/2011, 21h36

Bonjour

je stocke de nombreuses photos de produits de mon site local dans un dossier 'images',
à chaque produit correspond un identifiant, et à chaque identifiant correspond plusieurs photos.

Ainsi :
id 1 => 1a_t.jpg, 1b_t.jpg, 1c_t.jpg, 1d_t.jpg, ...
id 2 => 2a_t.jpg, 2b_t.jpg, 2c_t.jpg, 2d_t.jpg, ...
id 3 => 3a_t.jpg, ...etc...

Les photos s'affichent sur la page d'accueil (index.php) et j'aimerais que lors du survol d'une photo (onmouseover) défile seconde après seconde, en lieu et place de celle-ci, l'ensemble des photos relatives au même identifiant.
Et lorsque l'on cesse le survol (onmouseout), l'image revient à celle initiale.

Se pose également le problème du chargement de ces images.

J'ai cherché et tenté diverses solutions (en javascript) en vain.
Quelqu'un peut-il m'aider svp?

Merci.

Voici le code de ma page index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accueil</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<h1>DIAPORAMAS MOUSEOVER</h1>
<?php
$conf= $this->conf;
?>
				<?php
                                $ok = 0;$i=1;
                                $nbimages = $conf->nb_images;
                                
                                while(!$ok)
                                {
                                        if ($i < $nbimages + 1)
                                        {
                                                $ext_name = chr(ord('a')+$i-1);
                                                $pic = "localhost/monsite/images/".$content->id.$ext_name."_t.jpg";
                                                if (file_exists( $pic)) 
                                                {
                                                        echo "<div class='image'><a href='".$linkTarget."'><img id='".$content->id."' name='adimage".$content->id."' src='".$this->baseurl."images/".$content->id.$ext_name."_t.jpg' /></a></div>";
                                                        $ok = 1;
                                                }
                                        }
                                        else if ($nbimages != 0)
                                        {
                                                        echo "<a href='".$linkTarget."'>'<img id='".$content->id."' class='adimage' src='".$this->baseurl."images/nopic.gif' /></a>"; 
                                                $ok = 1;
                                        }   
                                        else
                                        {
                                                $ok = 1;
                                        }
                                        $i++;           
                                }
                                ?>
				<div>
</body>

**kuzza** · 16/12/2011, 21h45

Désolé pour le langage serveur
voici l'affichage html du navigateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
 
<body>
<h1>DIAPORAMAS MOUSEOVER</h1>
<div class="image"><a href="detail.php"><img id="1" name="adimage1" src="images/1a_t.jpg" /></a></div>
<div class="image"><a href="detail.php"><img id="2" name="adimage2" src="images/2a_t.jpg" /></a></div>
<div class="image"><a href="detail.php"><img id="3" name="adimage3" src="images/3a_t.jpg" /></a></div>
<div class="image"><a href="detail.php"><img id="4" name="adimage4" src="images/4a_t.jpg" /></a></div>
 
</body>
</html>

survol d'image affichant en rollover un diaporama

JavaScript

Discussions similaires

Partager

Partager