Afficher un objet avec onmouseover
Résolu
danwolf7
Messages postés
54
Date d'inscription
Statut
Membre
Dernière intervention
-
danwolf7 Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
danwolf7 Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
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.
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
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>
<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>
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;">
<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;">
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:
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.
<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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Oui en CSS avec les pseudo formats (avec :hover) mais ton élément sera visble que au moment ou ta souris le survol Ex:
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.
<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.
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 !" :)
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 !" :)
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 ?
Ouaih j'ai vu ça, jpensait que ça marchais...
mais tu px faire ça:
ps: tu veux en faire quoi?
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?
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
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.
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.
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 ???
Comment insérer la balise <div> dans onmouseover sans passer par js ???
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>
