[résolu]Changuer une propiété css avec javascript

Bonour je souhaite changer l'image de fond ainsi que sa position dans le style suivant:

#fond {
	position: absolute;
	margin-left: -278px;
	margin-top: 249px;
	left: 50%;
	background: transparent url(fond/image1.gif) no-repeat center center;

voici les changements:

background: transparent url(fond/image2.gif) no-repeat center center;

background: transparent url(fond/image3.gif) no-repeat center bottom;

je sauhaite faure ca à la volé avec du Javascrit en changeant le propriété de l'ID avec GetElementById mais je connais pas la syntaxe exacte.

Quelqu'un a ca sous la main ??

amicalement
Modifié par khoudj (23 Jan 2007 - 12:09)

Tu peux essayer en créant deux classes differentes avec deux backgrounds differents et en passant de l'une a l'autre comme ça:

function changeClass(el) {
var tonLien = document.getElementsById('iddetonlien');
 var elementQuiChange = document.getElementsById('iddelelementquichange');
    tonLien.onclick = function(){
      elementQuiChange.className = 'nouvelleclass';
    }
}
window.onload = changeClass;

Modifié par matmat (23 Jan 2007 - 05:07)

En modifiant les styles via document.getElementById, tu vas en réalité affecter des styles en ligne, ce qui n'aura pas tout à fait les mêmes conséquences. ON peut modifier le style réel avec document.styleSheets, mais il est beaucoup plus aisé d'utiliser deux classes comme cela a déjà été dit.

Pourquoi modifier la classe?
Cette ligne devrait suffire

document.getElementById('monId').style.background="transparent url(fond/image3.gif) no-repeat center bottom";

Si tu veux la correspondance entre javascript et css tu trouvera ca ici: Propriétés css et leurs correspondance javascript

Salut,

maniT4c a écrit :
Pourquoi modifier la classe?

Parce qu'autant que possible, il est préférable de séparer le comportement de la présentation, comme on a l'habitude de faire la séparation entre xhtml et css. Cela facilite la maintenance du code. Et puis, en passant par les classes, on peut, par exemple, changer le style du document via un styleswitcher sans avoir à remodifier tous les styles qui auraient été générés via JS. On a aussi la possibilité d'indiquer correctement (dans le css ou le xhtml) le(s) media(s) pour le(s)quel(s) ces propriétés de style sont attribuées, ce qui évite les mauvaises surprises, en particulier lorsqu'on souhaite imprimer les pages. Il existe bien une propriété media pour l'objet style mais il me semble que tout le monde ne la supporte pas. L'intégration de propriétés de style via l'objet style ne sert que rarement... dans des petites animations, entre autres.

QuentinC a écrit :
ON peut modifier le style réel avec document.styleSheets

Le support de document.stylesheet est malheureusement lui aussi encore imparfait, en particulier du côté de IE qui ne suit pas les recommendations ou encore Safari, Konqueror, ICEbrowser, iCAB, Opera8,... pour lesquels le support est imparfait... ce qui rend cette collection peu utile...
Modifié par koala64 (23 Jan 2007 - 09:23)

koala64 a écrit :
Des choses intéressantes...

+200
Modifié par Julien Royer (23 Jan 2007 - 10:03)

Merci pour toutes vos recommendations
je vais me debrouiller avec tout cas

Amicalement