11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Repeter une fonction

bonjour
j'ai un texte et une image en background de ce texte
à l'etat normal on voit le texte sans l'image background
je voudrais sur onclick faire disparaitre le texte et le remplacer par l'image en background
puis sur le click suivant faire disparaitre l'image en background et la remplacer par le texte etc
comment faire?
pour l'instant j'ai fait ca
merci
<script>
		function mafonction()
	{
	document.querySelector(".image").style.background = "url('mon.gif') no-repeat";
	document.querySelector(".texte").style = "visibility: hidden";
				   }
	</script>

<button title="Cliquer" onclick="mafonction()">Cliquer</button>
	
<div class="image" style="width:340px;height:150px">
<div class="texte">
<p>montexte1</p>
<p>montexte2</p>
<p>montexte3</p>
<p>montexte4</p></div></div>
en faisant ca je n'arrive toujours pas a repeter? pourquoi?
  .image {
	  margin:0 auto;
background:display:none;
  }

function mafonction()
	{
					if(document.querySelector(".image").style.background = "display:none"){
	document.querySelector(".image").style.background = "url('mongif.gif') no-repeat";
	document.querySelector(".texte").style = "visibility: hidden";
				   }
		else{
				document.querySelector(".image").style.background = "display:none";
					   	document.querySelector(".texte").style = "visibility: visible";
		}}
	</script>

<div class="image" style="width:340px;height:150px">
<div class="texte">
<p>montexte1</p>
<p>montexte2</p>
<p>montexte3</p>
<p>montexte4</p></div></div>

<button title="Cliquer" onclick="mafonction()">Cliquer</button>

Modifié par nantais (08 Aug 2017 - 15:02)
Je ne suis pas sûr d'avoir compris ce que vous voulez faire, et surtout pas ce que vous avez fait.

Est-ce que http://jpmoularde.free.fr/tests/test1.html correspond à vos besoins?
Voici le code:

<div id="container" class="step1" onclick="nextStep()">
    <img src="http://lorempixel.com/output/city-q-c-640-480-4.jpg" alt="">
    <div>
        <p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus.</p>
    </div>
</div>




#container {
    position:relative;
    width:640px;
    height:480px;
    margin:100px auto 20px;
    cursor:pointer;
}
#container div {
    position:absolute;
    background:rgba(255,255,255,0.8);
    width:80%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:0.5em;
}
#container.step2 img, #container.step3 div{display:none;}




	var container = document.getElementById('container');
	var curStep = container.className;
	switch(curStep) {
		case 'step1':
			container.className = 'step2';
			break;
		case 'step2':
			container.className = 'step3';
			break;
		case 'step3':
			container.className = 'step1';
			break;
		default:;
	}
}

Modifié par PapyJP (08 Aug 2017 - 22:18)
nantais a écrit :
merci c'est exactement ca

Pas de quoi;
N'hésitez pas à demander des éclaircissements sur ce code.
Sujet clos
Aller à