11548 sujets

JavaScript, DOM et API Web HTML5

OnMouseOver/onMouseOut foireux

Bonjour,

Étant débutant en js, me voila face à un problème qui me semble relever des notions de bases...

 
<div id="vignette-poly">
        <img src="images/vignettes-poly.png" onmouseover="this.style.display='none';" onmouseout="this.style.display='block';" />
</div>


Le mouseover semble imprécis. L'image clignotte, que je mette le display none sur la div ou la balise img.
Quelle est la finalité ? Parce que là apriori tu as possibilité de faire ça en css avec la sous-classe :hover.
En fait je viens d'essayer avec :hover, ça fait la même chose. Est ce à cause de mon image en png ?
En effet, il vaudrait peut- être mieux agir sur autre chose, comme l'oppacité par exemple ou alors faire un sprite avec une partie transparente et un jeux de position au sein du sprite.

C'est pour ça que je demandais la finalité du truc, parce que là en soit tout me parait faisable en css.
Modifié par Klesk (16 Sep 2012 - 21:16)
@Klesk J'ai fais des animations sur flash que j'ai convertis avec Swiffy pour que ça soit compatible partout. Hors, Swiffy ne me donne pas une image mais une animation Javascript et donc je ne peux pas utiliser hoover pour alterner avec une autre image.
J'avais d'abord essayé avec une image en gif animé mais le rendu était vraiment dégueulasse.

@jo-link-noir Oui en effet, la seule solution serait d'alterner avec une autre image hors comme expliqué au dessus ce n'est pas possible dans ce cas de figure.
Modifié par osef_ (30 Sep 2012 - 17:56)
Tu peux mettre l'événement java-script sur le parent au lieu de l'image même.
En css, ça donnerais quelque chose comme :
le_parent:hover .animation {
  display:block
}
le_parent:hover img {
  display:none
}
J'comprends pas le truc avec Swiffy, mais pourquoi tu ne donnes pas une dimension fixe à la div qui contient ton image (ou ton animation javascript ou ce que tu veux) et de traiter l'affichage de son contenu en css ?

madiv { width : ...px; height: ...px; }

madiv image { display:block }

madiv:hover image {display:none; }
Bonjour,

Merci pour l'opacité, ça évite que l'image fixe clignote !
Cependant il reste un problème. Je ne peux pas cacher l'image fixe et afficher la div de l'animation javascript simultanément avec :hover.
J'ai mis à jour la page en ligne
Voici le code de swiffy si ça peut vous aider à comprendre comment ça marche : 
  
<head>


    <script type="text/javascript" src="https://www.gstatic.com/swiffy/v4.8/runtime.js"></script>
       <script>
      var_anim_polyvalence = [... code JS ... ]
</script>
</head>
<body>
        <div id="swiffycontainer" style="width: 150px; height: 150px">
    <script>
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),var_anim_polyvalence);
    
      stage.start();
</body>

Modifié par osef_ (30 Sep 2012 - 17:56)
Non ça ne marche pas; je n'y arrive vraiment pas en CSS.
Mais c'est bon, j'ai trouvé une solution toute bête. J'aurais du y penser plus tôt. Je fais l'image fixe et l'animation dans la même scène flash et je convertis le tout avec swiffy.

Merci quand même les gens !
Sujet clos
Aller à