Affiche images en background

Commenter

Contenu du snippet

Par un formulaire en Select, permet d'afficher des images en background.
Un click droit sur la page ensuite permet de sélectionner l'image comme arrière-plan.
Pour nitro120 qui m'a demandé ça sur le script backgroundColor.
ATTENTION : Les images sont prévues pour être en 1024/768

Source / Exemple : 


<html>
<head> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
<META NAME="GENERATOR" CONTENT="UltraEdit-32">
<META NAME="date" CONTENT="2002-06-19">
<META NAME="Author" CONTENT="Thierry Denele">
<head>
<script type="text/JavaScript"> 
var compteur = 3;
function selectplus() {
compteur = document.forms[0].elements[0].selectedIndex;
	if (compteur < document.forms[0].elements[0].length-1) {compteur ++;} 
document.forms[0].elements[0].selectedIndex=compteur;
}
function selectmoins() {
compteur = document.forms[0].elements[0].selectedIndex;
	if (compteur > 0) {compteur --;} 
document.forms[0].elements[0].selectedIndex=compteur;
}
function Go() {
	compteur = document.forms[0].elements[0].selectedIndex;
	document.body.style.backgroundImage = "url("+  imgname[compteur] +")";
	}
function Selec(compteur) {
document.forms[0].elements[0].selectedIndex = compteur;
}
var imgname=new Array(); 
imgname[0]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/photo_nebuleuseducone.jpg"; 
imgname[1]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/photo_trapezedorion.jpg"; 
imgname[2]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/photo_ugc10214.jpg"; 
imgname[3]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/photo_ngc6782.jpg"; 
imgname[4]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/photo_papillon.jpg"; 
imgname[5]="http://perso.wanadoo.fr/astroweb2000/fondecran/img/photo_tournesol.jpg"; 

</script>
</head>
<body>
<p style="color:black;font-weight:700;background-color:white;border:3 orange groove;width:100px;font-size:18px">Selectionnez l'image</p>
<form name="bgimage">
<p>
<select name="choix" size="1" value="images" style="background-color:antiquewhite;color: black; width: 200" onChange="javascript:Selec(this.selectedIndex)">
<option>Nébuleuse du cone
<option>Trapéze d'orion
<option>Galaxie UGC10214
<option selected>NGC6782
<option>Nébuleuse papillon
<option>Galaxie Tournesol
</select>
<input type="button" value="Go !" onClick="Go();">
</p>
<p>
<input type="button"  style="width:80"  value="Select down" onClick="selectplus()"><br><input type="button"  style="width:80" value="Select up" onClick="selectmoins()">
</p>
</form>
</body>
</html>

Conclusion :


Merci à Astroweb2000 à qui j'ai piqué les références des images, sans lui demander son avis d'ailleurs, j'espère qu ça lui fera des visites.
<http://perso.wanadoo.fr/astroweb2000/index.html>
Niveau1 / Niveau2 ? Tout est relatif !

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Deny)