Liste déroulante et affichage d'images [Résolu]

Signaler
-
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
-
Bonjour,

J'ai un souci pour l'affichage des mes images quand je sélectionne une option. Avec l’événement onchange ça marche au choix de l'option mais l'événement mouseover ne marche pas simultanément. J'aimerais afficher mes images au survole et au clic sur toutes les options et sur tous les navigateurs.

Nb: quand je choisis l'option aucun logo, j'ai une image vide qui s'affiche. J'aimerais corriger ce comportement. Merci par avance !

<select name="logos" id="logo">
<option value="">Choisir votre logo :</option>
<option value="">Aucun logo</option>
<option value="logo1.jpg">Logo 1</option>
<option value="logo2.jpg">Logo 2</option>
<option value="logo3.jpg">Logo 3</option>
<option value="logo4.jpg">Logo 4</option>
<option value="logo5.jpg">Logo 5</option>
</select>
<div id="div"></div>


function generateLogos() {
var which = this.value;

div.innerHTML='<center>Loading image...</center>';
div.innerHTML='<img src=""quot;"quot;'+which+'" >';
}
$("#logo").find('option').on('mouseover', generateLogos);

9 réponses

Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
Bonjour,

essaye ça :

$("#logo").find('option').hover(function() {
   generateLogos($(this).val());
});


function generateLogos(which) {
    $("#div").html('<center>Loading image...</center>');
    $("#div").html('<img src=""quot;"quot;'+which+'" ></img>');
}


Cordialement, 
Jordane                                                                 
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
Au cas où .. penses à regarder dans la CONSOLE de ton navigateur si tu n'as pas d'erreur.


NB : Ce code est en JQUERY .... j'espère que tu le sais et que tu as bien importé jquery dans ta page ...

Bonjour @jordane45,

Merci encore pour ta réponse.
J'ai exécuté le code que tu m'as proposé. Ça marche avec mon navigateur par défaut (Firefox) mais ça ne marche pas sur Chrome.

Et quand je essaye de faire le test sur un autre pc ça ne marche aussi et même sur Firefox.

Ce que je trouve bizarre je n'ai pas d'erreur dans la console.

Cdlt,
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
Vide le cache de ton navigateur.... parfois ça suffit :-)

J'ai vidé le cache mais rien.
Je ne comprend pas le problème parce que quand je fais un test sur un nouveau pc ça ne marche pas. Ça que sur Firefox et sur mon pc.

J'ai modifié mon code de manière à récupérer la référence dynamiquement qui est le nom de l'image dans l'option choisie + l'extension de celle-ci. Code ci-dessous :


// connexion à la BD
require_once("connexion_db.php");

$sql = "SELECT * FROM article";
$req = $db->prepare($sql);
$req->execute() or die(print_r($req1->errorInfo()));
$rows = $req->fetchAll();


<select name="logos" id="logo">
<option value="">Choisir votre logo :</option>
<option value="">Aucun logo</option>
<?php
foreach($rows as $row) {
?>
<option value="<?=$row['article_ref'];?>">
<?=$row['article_lib'];?>
</option>
<?php } ?>
</select>
<div id="div"></div>


function generateLogos() {
var which = this.value;
var src=""quot;images/%article_ref%.jpg";
src=""rc.replace("%article_ref%", which);
$("#div").html('<center>Loading image...</center>');
$("#div").html('<img src=""quot;'+src +'">');
}
$("#logo").find('option').hover(function() {
generateLogos;
});
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
Tu utilises PDO .... fais le correctement !
Ceci :
or die(print_r($req1->errorInfo()));

ne se fait pas ....
A la place ... on utilise des blocs TRY/CATCH, comme indiqué ici : http://www.commentcamarche.net/faq/46512-pdo-gerer-les-erreurs

Ensuite ... maintenant que tu as fais ça... ça fonctionne mieux ??
C'est toujours le status quo.
Ça n'a absolument rien changé.
Je n'arrive pas à comprendre l'origine du problème.
Il n'y a rien dans la console. Bizarre !
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
en même temps ... le code javascript que tu as utilisé n'est pas celui que je t'ai donné !
Oui le code Javascript utilisé n'est pas celui que tu m'as donné. Mais je l'ai juste modifié pour l'adapter à nouveau. Avec ce code ça a toujours le même effet qu'avec ton code.

Pour le problème d’affichage de mes images, je pense qu'il est apparemment impossible de chopper les hover des <option> en js sous chrome...
Une solution consiste a donner une taille à ma liste. De cette façon elle ne sera plus déroulante, toutes les options seront visibles et le bug disparaît...

Mais il est impossible pour moi de mettre une taille car j'ai plusieurs options et ça peut augmenter au fur et à mesure.
<select size="7" name="logos" id="logo">
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
En effet... c'est incompatible IE et Chrome ....
Sinon tu pourrais faire ton propre dropdown à base de LI (et un peu de css).
ça devrait fonctionner je pense.

Ok je vais essayer et je te dirai quoi.
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
<!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>
  <title>TEST</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script type="text/javascript" src=""quot;jquery.js"></script>
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
 }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content" id="logo">
    <a href="#" rel="nofollow noopener noreferrer" target="_blank" data-img='logo1.jpg'>Link 1</a>
    <a href="#" rel="nofollow noopener noreferrer" target="_blank" data-img='logo2.jpg'>Link 2</a>
    <a href="#" rel="nofollow noopener noreferrer" target="_blank" data-img='logo3.jpg'>Link 3</a>
  </div>
</div>

</body>
</html>
<div id="div"></div>

<script type="text/javascript">


$(document).ready(function(event) {
  $("#logo a").hover(function() {
  var img = $(this).data('img');
  console.log(img);
   generateLogos(img);
});


function generateLogos(which) {
    $("#div").html('<center>Loading image...</center>');
    $("#div").html('<img src=""quot;"quot;"quot;'+which+'" ></img>');
}
});
</script>

</body>
</html>




ça ça fonctionne...

Je pense que je vais me contenter de l'événement onChange pour le moment car hover ne marche pas sous Chrome et IE.

Je préfère garder le select puisque c'est dans un formulaire pour ça soit homogène.

Merci beaucoup pour ton aide.

A bientot !
Messages postés
28936
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
31 mai 2020
328
Le code que je t'ai donné fonctionne sous chrome et ff en tout cas ... et surement sur IE aussi....