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

Utilisateur anonyme - 8 mars 2017 à 12:44 - Dernière réponse : jordane45 19233 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention
- 10 mars 2017 à 13:51
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);
Afficher la suite 

15 réponses

Répondre au sujet
jordane45 19233 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention - Modifié par jordane45 le 8/03/2017 à 18:23
0
Utile
1
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                                                                 
jordane45 19233 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention - 8 mars 2017 à 18:24
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 ...
Commenter la réponse de jordane45
Utilisateur anonyme - 9 mars 2017 à 12:13
0
Utile
1
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,
jordane45 19233 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention - 9 mars 2017 à 12:40
Vide le cache de ton navigateur.... parfois ça suffit :-)
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 9 mars 2017 à 14:20
0
Utile
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.
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 9 mars 2017 à 15:00
0
Utile
1
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;
});
jordane45 19233 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention - 9 mars 2017 à 15:59
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 ??
Commenter la réponse de Utilisateur anonyme
0
Utile
1
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 !
jordane45 19233 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention - 9 mars 2017 à 16:15
en même temps ... le code javascript que tu as utilisé n'est pas celui que je t'ai donné !
Commenter la réponse de Utilisateur anonyme
0
Utile
1
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">
jordane45 19233 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention - 9 mars 2017 à 17:27
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.
Commenter la réponse de Utilisateur anonyme
Utilisateur anonyme - 9 mars 2017 à 17:35
0
Utile
Ok je vais essayer et je te dirai quoi.
Commenter la réponse de Utilisateur anonyme
jordane45 19233 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention - 9 mars 2017 à 17:47
0
Utile
<!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...
Commenter la réponse de jordane45
Utilisateur anonyme - 10 mars 2017 à 13:49
0
Utile
1
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 !
jordane45 19233 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention - 10 mars 2017 à 13:51
Le code que je t'ai donné fonctionne sous chrome et ff en tout cas ... et surement sur IE aussi....
Commenter la réponse de Utilisateur anonyme

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.