11542 sujets

JavaScript, DOM et API Web HTML5

Comment changer une background-position à l'aide de javascript?

Salut,

j'ai une image, de 200px de haut par 50px de large.
Les 50 premiers pixels sont bleus
puis tous les 50 px tendent vers un marron plus foncé...

voici genre un code lambda:


*********
.img{
display:block;
background:URL(tralalalalaire.gif) top left no-repat;
width:50px;
height:50px;
}
*********
<div id="contener">
	<span class="img">couleur_bleue</span>
	<div id="liens">
		<a href="#">couleur_marron clair</a>
		<a href="#">couleur_marron moyen</a>
		<a href="#">couleur_marron foncé</a>
	</div>
</div>
*********


Je souhaite en faisant un rollOver sur chacun des liens que mon background-position soit modifié en conséquence.

merci pour votre contribution !
Modifié par lefelinherbivore (01 Sep 2008 - 15:59)
a écrit :
Pourquoi choisir le javascript, alors que tu peux le faire en css avec l'événement :hover ?


Pas dans ce contexte ... de plus cela ne fonctionnera pas sous IE6. Smiley cligne
salut, merci pour la piste à suivre, ça été fructueux.
Le problème est partiellement résolu puisque que concrètement ça marche, mais il me reste cependant à optimiser ce code pour que ce sujet soit pleinement clos...

Donc, pour celles et ceux qui se poseraient la question:

<head>
   <script>
function positionOne()
{
document.getElementById('monId').style.backgroundPosition="0px -10px";
}
   </script>
</head>
<body>
   <a  href="#" onmouseout="positionOne()" onmouseover="rollToitures()"></a>
</body>


Chadom, puisque tu t'es gentiment proposé à m'aider à la rédaction du script, comment puis-je passer la fonction en paramètre, afin de spécifier différentes hauteurs du background en fonction de plusieurs lien.
Concrètement et pour expliciter au mieux, voici mon code actuel:

<script type="text/javascript">
function normalPosition()
{
document.getElementById('monId').style.backgroundPosition="0px 0px";
}
function positionOne()
{
document.getElementById('monId').style.backgroundPosition="0px -10px";
}
function positionTwo()
{
document.getElementById('monId').style.backgroundPosition="0px -20px";
}
function positionThree()
{
document.getElementById('monId').style.backgroundPosition="0px -30px";
}
</script>
<body>
<a id="lien1"  href="#" onmouseout="normalPosition()" onmouseover="positionOne()"></a>
<a id="lien2"  href="#" onmouseout="normalPosition()" onmouseover="positionTwo()"></a>
<a id="lien3"  href="#" onmouseout="normalPosition()" onmouseover="positionThree()"></a>
</body>

Voilà, en passant en paramètre je n'aurait pas à répéter les fonctions, mais quelle en est la syntaxe?
that is the question.

Merci Smiley cligne
Modifié par lefelinherbivore (06 Sep 2008 - 12:33)
Sujet clos
Aller à