Sujet Précédent Sujet Suivant

Afficher un objet avec onmouseover

Résolu/Fermé
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 - 26 nov. 2009 à 18:33
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 - 28 nov. 2009 à 23:59
Bonjour,

J'aimerai afficher une <div> avec la fonction onmouseover. Mais comment faire ?
Je bloque à partir de onmouseover="... et onmouseover="<div style='... ne marche pas.

Comment faire pour que quand je survole l'objet qu'il y en ait un autre qui vienne ?

Merci d'avance.

14 réponses

Réponse 1 / 14
Zep3k!GnO Messages postés 2025 Date d'inscription jeudi 22 septembre 2005 Statut Membre Dernière intervention 18 novembre 2015 200
26 nov. 2009 à 18:47
Tiens, un p'tit script d'exemple maison :

<html>
<script type="text/javascript">
function showMystere(){
var objMysere = document.getElementById('mystere');
if(objMysere){
objMysere.style.display = 'block';
}
}
function hideMystere(){
var objMysere = document.getElementById('mystere');
if(objMysere){
objMysere.style.display = 'none';
}
}
</script>
<body>
<div style="border: solid 1px red; width:150px; height:150px" onMouseover="javascript:showMystere()" onMouseout="javascript:hideMystere()">
Passez votre souris dans cette zone et découvrez le mystère !
</div>
<br/>
<div id="mystere" style="display:none">
M Y S T E R E
</div>
</body>
</html>
0
Réponse 2 / 14
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 5
26 nov. 2009 à 18:55
Merci mais est-ce possible sans les <script> ???
0
Réponse 3 / 14
Zep3k!GnO Messages postés 2025 Date d'inscription jeudi 22 septembre 2005 Statut Membre Dernière intervention 18 novembre 2015 200
26 nov. 2009 à 19:08
ouaip, on enlève le test du coup et hop :


<div style="border: solid 1px red; width:150px; height:150px" onMouseover="javascript:document.getElementById('mystere').style.display = 'block';return false;" onMouseout="jjavascript:document.getElementById('mystere').style.display = 'none';return false;">
0
Réponse 4 / 14
Zestyr Messages postés 466 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 17 octobre 2011 52
26 nov. 2009 à 19:11
Tu px aussi le faire en CSS avec les pseudo formats (avec :hover) mais ton élément sera visble que au moment ou ta souris le survol Ex: 
<html>
 <head>
  <title>TA PAGE</title>
  <style type="text/css">
   <!--
      .divHidden
    {
         visibility: hidden;
    }
   .divHidden:hover
    {
         visibility: visible;
    }

  -->
   </style>
  </head>
  <body>
     <div class"divHidden">Tu me voi quand tu me survol</div>
  </body>
</html>


L'avantage avec le CSS c'est qu'il est activé par défault et que personne ne le désactive car il n'est pas dangereux contrairement au javascript donc pour le design d'un site à préviléger CSS de Js.


0

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

Posez votre question
Réponse 5 / 14
Zestyr Messages postés 466 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 17 octobre 2011 52
26 nov. 2009 à 19:13
Oui en CSS avec les pseudo formats (avec :hover) mais ton élément sera visble que au moment ou ta souris le survol Ex: 
<html>
 <head>
  <title>TA PAGE</title>
  <style type="text/css">
      .divHidden
    {
         visibility: hidden;
    }
   .divHidden:hover
    {
         visibility: visible;
    }
   </style>
  </head>
  <body>
     <div class"divHidden">Tu me voi quand tu me survol</div>
  </body>
</html>


L'avantage avec le CSS c'est qu'il est activé par défault et que personne ne le désactive car il n'est pas dangereux contrairement au javascript donc pour le design d'un site à préviléger CSS de Js.


0
Réponse 6 / 14
Zep3k!GnO Messages postés 2025 Date d'inscription jeudi 22 septembre 2005 Statut Membre Dernière intervention 18 novembre 2015 200
26 nov. 2009 à 19:27
ouaip mais l'inconvénient de ta methode la c'est qu'il faut survoler un champ caché pour le voir ==> comment faire comprendre à un internaute qu'il faut survoler un champ invisible pour le voir ?? Oo

Anoter que très très peu de personnes désactivent le JS, la plupart des utilisateurs ne cliquent jamais dans l'onglet outils, option internet, t'entend souvent des "oula c'est complexe !" :)
0
Réponse 7 / 14
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 5
26 nov. 2009 à 19:33
Marche pas ce que tu as écrit Zestyr. Et merci pour les script en java mais c'est trop compliqué je trouve. Il n'y a pas plus simple ?
0
Réponse 8 / 14
Zestyr Messages postés 466 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 17 octobre 2011 52
26 nov. 2009 à 19:34
Ouaih j'ai vu ça, jpensait que ça marchais...
mais tu px faire ça: 

<html>
 <head>
  <title>TA PAGE</title>
  <style type="text/css">
    .divHidden
    {
         opacity: 0.15;
    }
   .divHidden:hover
    {
         opacity: 1;
    }
   </style>
  </head>
  <body>
     <div class="divHidden">Tu me voi quand tu me survol</div>
  </body>
</html>


ps: tu veux en faire quoi?
0
Réponse 9 / 14
Zestyr Messages postés 466 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 17 octobre 2011 52
26 nov. 2009 à 19:40
Aussi la j'ai mis l'opacité à 0.15 ce qui permet a l'internaute de voire ton élément mais si tu veux qu'il soit complètement invisible: met la à 0
0
Réponse 10 / 14
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 5
26 nov. 2009 à 19:42
J'aime bien le dernier là. Mais ce que je veux faire c'est:

un carré ou une image et quand je fais survoler la souris dessus qu'il y ait à coté ou n'importe où un objet avec la structure <div style=...

Genre: onMouseover="<div style="background-colour:black; width:50px; height:50px;"></div>"

Mais en version possible :D

Le truc avec js marchait bien mais je ne le connais pas du tout.
0
Réponse 11 / 14
Zestyr Messages postés 466 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 17 octobre 2011 52
26 nov. 2009 à 19:44
Tu peux reformuler ta question stp ?
0
Réponse 12 / 14
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 5
26 nov. 2009 à 19:49
Alors imagine la page. Il y a une image. Quand je mets la souris dessus, j'aimerai avoir un carré avec du texte juste à coté ou ailleur de cette image. Et le code de ce carré c'est <div style="position:absolute; background-colour:black; width:50px; height:50px;"></div>

Comment insérer la balise <div> dans onmouseover sans passer par js ???
0
Réponse 13 / 14
Zestyr Messages postés 466 Date d'inscription mercredi 12 août 2009 Statut Membre Dernière intervention 17 octobre 2011 52
27 nov. 2009 à 18:54
Je sais pas si j'ai bien compris, mais j'espère que c'est ce que tu souhaite faire: 

<html>
 <head>
  <title>TA PAGE</title>
  <style type="text/css">

	.block
    {
         visibility: hidden;
    }
	img
	{
		visibility: visible;
	}

	.block:hover
    {
          visibility: visible;
    }


   </style>
  </head>
  <body>

	 <div class="block"><img src="papier.bmp" alt=""  /><div style="position:absolute;background-colour:black;width:50px;height:50px;">Description: enfait ça me fais...de faire une description juste pour un exemple</div></div>

  </body>
</html>
0
Réponse 14 / 14
danwolf7 Messages postés 54 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 12 juillet 2016 5
28 nov. 2009 à 23:59
Ouai j'aime merci :D
0