Sujet Précédent Sujet Suivant

Liste déroulante et affichage d'images

Résolu
Utilisateur anonyme - Modifié par dinolam le 8/03/2017 à 12:44
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 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);

9 réponses

Réponse 1 / 9
Utilisateur anonyme
9 mars 2017 à 17:35
Ok je vais essayer et je te dirai quoi.
1
Réponse 2 / 9
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
Modifié par jordane45 le 8/03/2017 à 18:23
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                                                                 
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
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 ...
0
Réponse 3 / 9
Utilisateur anonyme
9 mars 2017 à 12:13
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,
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
9 mars 2017 à 12:40
Vide le cache de ton navigateur.... parfois ça suffit :-)
0
Réponse 4 / 9
Utilisateur anonyme
9 mars 2017 à 14:20
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
Utilisateur anonyme
9 mars 2017 à 15:00
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;
});
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
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 ??
0
Réponse 6 / 9
Utilisateur anonyme
Modifié par dinolam le 9/03/2017 à 16:09
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 !
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
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é !
0
Réponse 7 / 9
Utilisateur anonyme
Modifié par dinolam le 9/03/2017 à 16:31
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">
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
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.
0
Réponse 8 / 9
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
9 mars 2017 à 17:47 
<!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...
0
Réponse 9 / 9
Utilisateur anonyme
10 mars 2017 à 13:49
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 !
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
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....
0

Discussions similaires

Comparer 2 image
leonardo14 -
krimog -

12 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Rejoignez-nous