Affichage image au survol de la souris

**babacool08** · 08/08/2022, 19h55

Bonjour ,
sur mon site http://champardenne-tarot.com/compet.../champions.php , j'affiche une barre défilante de photos et en dessous la photo en format plus grand.
j'aimerais savoir s'il est possible d'afficher la photo correspondante à celle que la souris survole.
merci.
voici le code hrml

Code HTML :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="../style.css" />
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<![endif]-->
	<title>le tarot en champagne-ardenne</title>
	<meta name="description" content="le tarot en champagne ardenne  , les competitions, les resultats, le calendrier." />
</head>
	<body>
		<?php include ($_SERVER["DOCUMENT_ROOT"].'/entete.php'); ?>
		<section>
			<aside>
				<div id="conteneur">
					<?php
                                        try
                                                {
                                                        // acces a la base de données
                                                        $bdd = new PDO('mysql:host=sql-frweb10.pulseheberg.net:3306;dbname=champard_tarot;charset=utf8', 'xxx', 'xxx');
                                                }
                                        catch (Exception $e)
                                                {
                                                        die('Erreur : ' . $e->getMessage());
                                                }
                                                                $reponse = $bdd->query('SELECT  nom  FROM champions ORDER BY nom');
                                                                while ($donnees = $reponse->fetch())
                                                                {
                                                                        ?>
								<img src="../images/<?php echo $donnees['nom']; ?>" alt="1"  width="175" height="99"/>
								<?php
                                                }
                                        $reponse->closeCursor();                
                                        ?>
				</div>
			</aside>	
			<img src="../images/tarot_31.jpg"  alt="Image flottante" width="700" height="395" /><br/>
		</section>
		<?php include ($_SERVER["DOCUMENT_ROOT"].'/footer.php'); ?>
	</body>
</html>

et voici une partie du code css

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
aside
	{
		position: relative ;left:5px;bottom: 0;
		width:99%;
		height: 600;
		text-align: justify;
		border: 3px solid black;
		overflow: auto;
		font-size: 1.2em;
		background-color: rgb(150,250,240);
	}

**mathieu** · 10/08/2022, 06h06

Avez-vous vu que j'ai répondu dans votre 1re discussion là ?
https://www.developpez.net/forums/d2.../#post11862781

Affichage image au survol de la souris

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager