Script pour gérer l'odre d'affichage des images sur onclick

Bonjour à tous,
je débute en script, et mon niveau et assez bas. C'est pourquoi je fais appelle a votre aide pour essayer de créer ce script .

Mon problème est le suivant:

J'ai 6 images que je souhaites afficher dans leur div respectif par un onclick.

Les conditions sont que:
on ne peut pas afficher l'image 2 si l'image 1 n'a pas été affiché.
on ne peut pas afficher l'image 3 si l'image 2 et l'image 1 n'ont pas été affiché.
on ne peut pas afficher l'image 4 si l'image 3, l'image 2 et l'image 1 n'ont pas été affiché.

Ainsi jusqu'à 6, pour avoir une suite logique dans l'affichage.

merci d'avance pour votre réponse

bonjour,

un petit bout de code xthml et css serait un plus ! car là c'est pas sur la facon de faire le script qu'on va t'aider , mais carrément tout faire à ta place...

voici la partie html avec l'affichage direct de l'image par le onclick mais il n'y a pas d'ordre.

<div id="content">
	  <div class="pad2">
        	<div id="pola5" onclick="document.getElementById('lyrics5').style.backgroundImage='url(lyrics/lyrics5.png)';"><div id="lyrics5"></div></div>	
    		<div id="pola4" onclick="document.getElementById('lyrics4').style.backgroundImage='url(lyrics/lyrics4.png)';"><div id="lyrics4"></div></div> 
		<div id="pola6" onclick="document.getElementById('lyrics6').style.backgroundImage='url(lyrics/lyrics6.png)';"><div id="lyrics6"></div></div>
    		<div id="pola1" onclick="document.getElementById('lyrics1').style.backgroundImage='url(lyrics/lyrics1.png)';"><div id="lyrics1"></div></div>	
    		<div id="pola3" onclick="document.getElementById('lyrics3').style.backgroundImage='url(lyrics/lyrics3.png)';"><div id="lyrics3"></div></div> 
		<div id="pola2" onclick="document.getElementById('lyrics2').style.backgroundImage='url(lyrics/lyrics2.png)';"><div id="lyrics2"></div></div>
         </div>
</div>

Voici la partie css

#content{
	background-image:url(images/boite.png);
	height: 653px;
	width: 700px;
	position:absolute;
	left: 180px;
	top: 100px;
	}


.pad2{
         background-image:url(images/fondp3.png);
         background-repeat:no-repeat;
         height:524px;
         width:559px;
         margin-top: 70px;
         margin-left: 70px;
}
#pola1{
	background-image: url(images/barbie.png);
	height:400px;
	width:350px;
	position:absolute;
	z-index:3;
	left: 21px;
	top: 34px;
	margin:0px;
}
#pola2{
	background-image: url(images/bathroom.png);
	height:358px;
	width:350px;
	position:absolute;
	z-index:2;
	left: 306px;
	top: 56px;
	margin:0px;
	}
	
#pola3{
	background-image: url(images/smoking.png);
	height: 321px;
	width: 288px;
	position:absolute;
	z-index:1;
	left: 179px;
	top: 262px;
	margin:0px;
}
#pola4{
	background-image: url(images/lime.png);
	height:450px;
	width:450px;
	position:absolute;
	z-index:3;
	left: -35px;
	top: 34px;
	margin:0px;
}
#pola5{
	background-image: url(images/drink.png);
	height:450px;
	width:450px;
	position:absolute;
	z-index:2;
	left: 306px;
	top: 56px;
	margin:0px;
	}
	
#pola6{
	background-image: url(images/smiley.png);
	height: 450px;
	width: 450px;
	position:absolute;
	z-index:1;
	left: 179px;
	top: 262px;
	margin:0px;
}

#lyrics1{
	height:135px;
	width:209px;
	position:absolute;
	left: 125px;
	top: 230px;
	}	
#lyrics2{
	height:131px;
	width:134px;
	position:absolute;
	left: 60px;
	top: 170px;
	}	
#lyrics3{
	height:76px;
	width:162px;
	position:absolute;
	left: 55px;
	top: 220px;
	}	
#lyrics4{
	height:162px;
	width:254px;
	position:absolute;
	left: 30px;
	top: 255px;
	}	
#lyrics5{
	height:158px;
	width:244px;
	position:absolute;
	left: 150px;
	top: 240px;
	}	
#lyrics6{
	height:144px;
	width:218px;
	position:absolute;
	left: 60px;
	top: 260px;
	}