<div> caché en javascript
Résolu
martine et chantal
Messages postés
485
Date d'inscription
Statut
Membre
Dernière intervention
-
Templier Nocturne Messages postés 7734 Date d'inscription Statut Membre Dernière intervention -
Templier Nocturne Messages postés 7734 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'utilise cette méthode pour ouvrir/fermer des boutons (qui font apparaitre des images) :
<head>
<script type="text/javascript">
function toggle1() {
var div1 = document.getElementById('div1');
div1.style.display = (div1.style.display == 'none') ? 'block' : 'none' ;
</script>
</head>
et
<body>
<div class="BOUTON1">
<a href="#" onclick="toggle1(); return false;">
<img src="URL IMAGE BOUTON 1" alt="" style="border:0px;" />
</a>
<div class="IMAGE1" id="div1" style="display:none">
<img src="URL IMAGE 1" alt="" style="border:0px;" />
</div>
</div>
Cette méthode fonctionne très bien.
Par contre j'aimerai qu'un de mes boutons fasse l'inverse
J'aimerai que l'image soit d'abord apparente et qu'en cliquant sur le bouton, l'image disparaisse (que la <div> se ferme) et bien sûr que la <div> reste ouvrable/fermable par la suite.
qq1 pour m'aiguiller ?
J'utilise cette méthode pour ouvrir/fermer des boutons (qui font apparaitre des images) :
<head>
<script type="text/javascript">
function toggle1() {
var div1 = document.getElementById('div1');
div1.style.display = (div1.style.display == 'none') ? 'block' : 'none' ;
</script>
</head>
et
<body>
<div class="BOUTON1">
<a href="#" onclick="toggle1(); return false;">
<img src="URL IMAGE BOUTON 1" alt="" style="border:0px;" />
</a>
<div class="IMAGE1" id="div1" style="display:none">
<img src="URL IMAGE 1" alt="" style="border:0px;" />
</div>
</div>
Cette méthode fonctionne très bien.
Par contre j'aimerai qu'un de mes boutons fasse l'inverse
J'aimerai que l'image soit d'abord apparente et qu'en cliquant sur le bouton, l'image disparaisse (que la <div> se ferme) et bien sûr que la <div> reste ouvrable/fermable par la suite.
qq1 pour m'aiguiller ?
A voir également:
- <div> caché en javascript
- Copie caché - Guide
- Numéro caché - Guide
- Jeux google caché - Guide
- Message caché whatsapp - Guide
- C'est quoi le cache d'une application - Guide
5 réponses
HONTE A MOI !!!!!
il suffisait d'inverser 'block' et 'none' dans le head et le body
... (soupir)
donc none = caché
block = montré
il suffisait d'inverser 'block' et 'none' dans le head et le body
... (soupir)
donc none = caché
block = montré
tu peux faire
dans ton head :
<SCRIPT>
function cacher()
{
document.GetElementById('div1') = ''
document.GetElementById('bouton') = '<a href="#" onclick="montrer(); return false;">'
}
function montrer()
{
document.GetElementById('div1') = '<img src="URL IMAGE 1" alt="" style="border:0px;" />'
document.GetElementById('bouton') = '<a href="#" onclick="cacher(); return false;">'
}
</SCRIPT>
et dans le body :
<div class="BOUTON1" Id = 'bouton'>
<a href="#" onclick="montrer(); return false;">
<img src="URL IMAGE BOUTON 1" alt="" style="border:0px;" />
</a>
<div class="IMAGE1" id="div1" style="display:none">
<img src="URL IMAGE 1" alt="" style="border:0px;" />
</div>
</div>
c'est peut être pas trés "pro", mais ça devrait marcher ;)
dans ton head :
<SCRIPT>
function cacher()
{
document.GetElementById('div1') = ''
document.GetElementById('bouton') = '<a href="#" onclick="montrer(); return false;">'
}
function montrer()
{
document.GetElementById('div1') = '<img src="URL IMAGE 1" alt="" style="border:0px;" />'
document.GetElementById('bouton') = '<a href="#" onclick="cacher(); return false;">'
}
</SCRIPT>
et dans le body :
<div class="BOUTON1" Id = 'bouton'>
<a href="#" onclick="montrer(); return false;">
<img src="URL IMAGE BOUTON 1" alt="" style="border:0px;" />
</a>
<div class="IMAGE1" id="div1" style="display:none">
<img src="URL IMAGE 1" alt="" style="border:0px;" />
</div>
</div>
c'est peut être pas trés "pro", mais ça devrait marcher ;)
De cette manière l'image est apparente à l'entrée du site et disparait en cliquant sur le bouton
Mais l'inverse ne fonctionne pas (impossible de faire réapparaitre l'image)
c'est déjà pas mal.
ça pourrait presque me suffire
mais je continuerai a chercher.
<head>
<script type="text/javascript">
function toggle1() {
var div1 = document.getElementById('div1');
div1.style.visibility = (div1.style.visibility == 'hidden') ? 'block' : 'hidden' ;
</script>
</head>
et
<body>
<div class="BOUTON1">
<a href="#" onclick="toggle1(); return false;">
<img src="URL IMAGE BOUTON 1" alt="" style="border:0px;" />
</a>
<div class="IMAGE1" id="div1" style="visibility:visible">
<img src="URL IMAGE 1" alt="" style="border:0px;" />
</div>
</div>
Mais l'inverse ne fonctionne pas (impossible de faire réapparaitre l'image)
c'est déjà pas mal.
ça pourrait presque me suffire
mais je continuerai a chercher.
<head>
<script type="text/javascript">
function toggle1() {
var div1 = document.getElementById('div1');
div1.style.visibility = (div1.style.visibility == 'hidden') ? 'block' : 'hidden' ;
</script>
</head>
et
<body>
<div class="BOUTON1">
<a href="#" onclick="toggle1(); return false;">
<img src="URL IMAGE BOUTON 1" alt="" style="border:0px;" />
</a>
<div class="IMAGE1" id="div1" style="visibility:visible">
<img src="URL IMAGE 1" alt="" style="border:0px;" />
</div>
</div>
J'avais noté cette discussion comme résolue.
Mais le fait qu'elle soit résolue qu'à moitié me déplait.
Si qq1 à une solution, je suis preneur
:)
Mais le fait qu'elle soit résolue qu'à moitié me déplait.
Si qq1 à une solution, je suis preneur
:)
cette discussion n'est absolument pas résolue car INTERNET EXPLORER de mes [ bip! ]
ne voit rien (mon code c'est du vent pour pour IE)
D'ailleurs 2 ou 3 éléments autres que cette histoire d'image ne sont pas pris en compte par IE.
moi IE ça me soule !
pardon...
mais c'est pas comme si c'était la 1ère fois que j'avais des soucis avec ce navigateur de mes (bip!)
allez j'arrête là.
(bip!)
pardon ça défoule.
ne voit rien (mon code c'est du vent pour pour IE)
D'ailleurs 2 ou 3 éléments autres que cette histoire d'image ne sont pas pris en compte par IE.
moi IE ça me soule !
pardon...
mais c'est pas comme si c'était la 1ère fois que j'avais des soucis avec ce navigateur de mes (bip!)
allez j'arrête là.
(bip!)
pardon ça défoule.
ouais... sinon, tu te casse pas et tu invite tes visiteurs à changer de navigateur :P
ou tu leur fait une page toute pourrie rien que pour eux :P
ou tu leur fait une page toute pourrie rien que pour eux :P
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question