Affichage div et changement d'image

Version imprimable

08/10/2022, 05h20
eiffel-mtl

Affichage div et changement d'image
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:

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

Salut,
tu utilises mouseover et mouseout...

Code:

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>

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:

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:

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

08/10/2022, 14h14
eiffel-mtl

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