Affiche images en background

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 283 fois - Téléchargée 32 fois

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

Ajouter un commentaire Commentaire
marshall85 Messages postés 2 Date d'inscription samedi 7 juin 2008 Statut Membre Dernière intervention 8 août 2010
8 août 2010 à 15:36
Ehhh! je sait pas si c'est moi mais il ce passe rien lorsque on clique sur GO!, Ni sur FF ni SUR IE, emmm bisard ?!! ;)
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)