Résolu JavaScript onMouseOver pour changer background-image

Octave91 · 4 Décembre 2014

Bonjour,

je débute tout juste en programmation et j'ai commencé à faire un site web.
J'ai utilisé pour cela un programme JavaScript tout fait (trouvé sur http://www.codebelly.com/javascript/backimagechange.html).
Il permet de faire apparaitre une image en back-ground lors du survol d'un lien.

Le script en soit marche très bien mais la position et la taille de l'image sont établies par default.
Quelqu'un saurait il où et comment je dois intervenir pour parametrer la taille et la position de l'image qui apparaît en background?
Je n'y connait rien en JavaScript.

Voici le script en question :

JavaScript:

		<script language="JavaScript">
			<!--
			
			// Copyright 2001 by www.CodeBelly.com
			// Please do *not* remove this notice.
			
			var backImage = new Array(); // don't change this
			
			// Enter the image filenames you wish to use.
			// Follow the pattern to use more images.  The
			// number in the brackets [] is the number you
			// will use in the function call to pick each
			// image.
			
			// Note how backImage[3] = "" -- which would
			// set the page to *no* background image.
			
			backImage[0] = "images/hulk.jpg";
			backImage[1] = "images/shot01.png";
			backImage[2] = "images/shot02.png";
			backImage[3] = "images/shot03.png";
			
			// Do not edit below this line.
			//-----------------------------
			
			function changeBGImage(whichImage){
			if (document.body){
			document.body.background = backImage[whichImage];
			}
			}
			
			//-->
		</script>

		<a href="<html>" id="mark01" onMouseOver="javascript:changeBGImage(2)">
		<img src="images/mark.png" class="allmarks" alt="mark"/></a>

Merci d'avance pour vos réponses!

BlackPage · 4 Décembre 2014

Salut,
Sans avoir tout le code sous la main, ce que je vois ici fait que l'image survolée passe en image de fond sur le tag body de la page ( document.body.background ). Si aucun css n'est appliqué, alors cette image sera positionnée en 0,0 par rapport au coin supérieur gauche de la page.
Si tu veux que l'image soit positionnée ailleurs, il faut ajouter une règle css sur le tag body :
Voir sur cette page comment faire :

Vous devez être connecté pour voir les liens.

Il ne te restera plus qu'à appliquer le style voulu...
Par exemple :

CSS:

<style type="text/css">
body {
background-repeat:no-repeat;
background-position:50% 50%;
}
</style>

A mettre dans la partie HEAD de ta page HTML

Bon courage pour la suite !

Octave91 · 4 Décembre 2014

OK je vais essayer ça,
merci beaucoup!

Résolu JavaScript onMouseOver pour changer background-image

Octave91

BlackPage

Octave91