<div> caché en javascript

Résolu/Fermé

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 - Modifié par martine et chantal le 5/07/2010 à 22:36
Templier Nocturne Messages postés 7734 Date d'inscription jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 - 7 juil. 2010 à 02:21

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 ?

A voir également:

<div> caché en javascript
Appel caché - Guide
Copie caché - Guide
Telecharger javascript - Télécharger - Langages
Clear dns cache - Guide
C'est quoi le cache d'une application - Guide

5 réponses

Réponse 1 / 5

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
7 juil. 2010 à 02:07

HONTE A MOI !!!!!

il suffisait d'inverser 'block' et 'none' dans le head et le body

... (soupir)

donc none = caché
block = montré

Réponse 2 / 5

Templier Nocturne Messages postés 7734 Date d'inscription jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 1 104
6 juil. 2010 à 00:49

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 ;)

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
Modifié par martine et chantal le 6/07/2010 à 01:17

le bouton est cliquable mais aucune image n'apparait avant de cliquer ni après.

mais un grand merci pour avoir répondu à cette question.

je cherchais du côté "none". c'est ce mot qui rend mon image cachée ?
il y a peut-être un mot inverse ?

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
6 juil. 2010 à 01:28

je pense avoir trouvé la piste mais pas la solution
en remplaçant

style.display = 'none'

par

style.visibility = 'hidden' et style.visibility = 'visible'

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
6 juil. 2010 à 01:39

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>

Réponse 3 / 5

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
6 juil. 2010 à 05:11

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
:)

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
6 juil. 2010 à 21:26

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.

Templier Nocturne Messages postés 7734 Date d'inscription jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 1 104
6 juil. 2010 à 21:31

firefox c'est le bien ;)

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
6 juil. 2010 à 21:40

j'ai envie de dire ... ils sont tous bien à côté de IE
mais oui FF est pas mal.
:)
allez je ne m'avoue pas vaincu.
Je vais encore perdre des heures à faire en sorte que IE comprenne ce que les autres navigateurs comprennent.

Réponse 4 / 5

Templier Nocturne Messages postés 7734 Date d'inscription jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 1 104
6 juil. 2010 à 21:42

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

martine et chantal Messages postés 485 Date d'inscription dimanche 15 février 2009 Statut Membre Dernière intervention 4 juin 2013 4
6 juil. 2010 à 22:29

hé hé hé alors ça ! j'y avais déjà pensé pour ma page myspace music.
une page bien affreuse sous IE avec une petite pub pour changer de navigateur.
niark niark niark...

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

Posez votre question

Réponse 5 / 5

Templier Nocturne Messages postés 7734 Date d'inscription jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 1 104
7 juil. 2010 à 02:21

ben sur ce coup là, j'aurais pas pu t'aider ^^

content quand même de la conversation :P

Discussions similaires

menu caché

Javascript Arrondi à 2 chiffres après la virgule

visualiser une image présente dans le cache

présentation en-tête