Affichage div et changement d'image

**eiffel-mtl** · 08/10/2022, 05h20

Bonjour,

Je veux faire en sorte que, lors d'un mouse over, un div soit affiché et que la source d'une images de ce div change.

Je sais que c'est possible en css pure, sauf que je vais utiliser des données venant d'une BD donc c'est pas possible en css.

Voici mon div:

Code html :

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

1
2
<div id="miniature" style="height:300px; width:100%;margin-bottom:0px;position:absolute;">
<img id="miniatureImg" src="img/miniatureAbout.png"></div>

Qui peux m'aider? Merci

**Archimède** · 08/10/2022, 09h57

Salut,
tu utilises mouseover et mouseout...

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bascule au click</title>
    <style>
        #miniature {
            height:300px;
            width:100%;
            margin-bottom:0px;
            position:absolute;
        }
    </style>
</head>
 
<body>
    <div id="miniature">
        <img id="miniatureImg" src="photo1.jpg">
    </div>
    <script>
        const mydiv = document.getElementById('miniature');
        mydiv.addEventListener('mouseover', (e) => {
            e.currentTarget.src = document.getElementById('miniatureImg').src = 'photo2.jpg';
        });
 
        mydiv.addEventListener('mouseout', (e) => {
            e.currentTarget.src = document.getElementById('miniatureImg').src = 'photo1.jpg';
        });
    </script>
</body>
 
</html>

**mathieu** · 08/10/2022, 12h15

au sujet de la partie récupération dans la base de données, vous pouvez utiliser le code d'Archimède en faisant ça dans le code php :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
// ici vous récupérez le noms de 2 images dans la base de données
 
// et vous construisez un tableau php avec les noms
$donnees_javascript = [
	"image_base" => "image1.png",
	"image_survol" => "image2.png",
];
 
?>
 
<script>
const donnees = <?php echo json_encode($donnees_javascript);?>;
</script>

et ensuite dans le code javascript, vous y accéder comme cela :

Code javascript :

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

document.getElementById('miniatureImg').src = donnees["image_survol"];

**eiffel-mtl** · 08/10/2022, 14h14

Merci, mais c'est pas les images que je récupère de la bd

Affichage div et changement d'image

JavaScript

Discussions similaires

Partager

Partager