Discussion :

[maitrebn]

Bonjour,

Je souhaiterais savoir si quelqu'un connaît une technique pour changer la source d'une image via une feuille de style ?

en gros faire :
#blabla {
src=url('LALALA')
}

J'ai trouvé la question dans différents endroits mais pas de réponses ...

Donc si quelqu'un a une idée ...

Merci d'avance !

[Clorish]

j'y connait pas grand chose mais depuis pu j'ai compris certains trucs qui peuvent t'aider :

html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="mon_image">

css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#mon_image {
display : block;
width : 100px;
height : 100px;
background : url(mon_image.gif);
}

j'ai pas tester masi ca devrais le faire non ?

[edit] Peut etre que display n'ets pas necessaire ...

[E.Bzz]

j'ai pas tester masi ca devrais le faire non ?

Heu ... non
Même réponse que pour ta dernière question ...
EDIT : sauf qu'ici c'est l'attribut src du <img> ...

A+

[Clorish]

j'ai essayé, ca marche ... mais pas comme prevu. il garde l'icone "image non trouvee". ca serait trop beau ....
Peut etre en mettant un GIF completement transmarent .. mais c'est pas gagné.

Mais tu peux toujours placer un div a la place de img ...

[E.Bzz]

j'ai essayé, ca marche ...

Ne pas se fier aux apparences : tu as ajouté une image en arrière plan (effectivement : ça marche ), en plus de l'image qui ne s'affiche toujours pas (il aurait fallu modifier le src du img).

[Clorish]

... mais pas comme prevu.

[Candygirl]

Il y a moyen d'afficher une autre image en jouant avec les paddings:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#blabla {
  height:0;width:0;
  padding:200px 100px 0 0;
  background:url(image.png);
}

Le problème est qu'opera semble rétif à réduir une image à 0 et laisse 1px et les versions d'ie inférieure à la 6 n'acceptent pas le padding dessus il me semble.

[Bisûnûrs]

Il faut passer par du Javascript.

[maitrebn]

Merci à tous pour vos réponses !
Effectivement, il semble qu'il faille passer par du javascript ...

Est-il possible en JavaScript de récupérer la valeur d'une propriété de feuille de style ?

L'idée serait d'ajout un élément dans la feuille de style avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#lala {
 background:url('./images/mon_images.gif')
}

et quelque part dans du code javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('mon_image').src = (CSS#lala.background.url);

[maitrebn]

J'ai peu de mal à voir comment je peux accéder au contenu de ma feuille de style css à partir de JavaScript ...

Si quelqu'un a une idée ...

[Bisûnûrs]

Tiens, un peu de lecture :

http://www.quirksmode.org/dom/getstyles.html

Le passage qui risque de t'intéresser le plus est vers la fin.

Sinon, autre possibilité, tu fais :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#lala {
   background:url('./images/mon_image.gif')
}
#lala_over {
   background:url('./images/mon_image.gif')
}

Et après tu changes juste la classe sur le over de l'image avec la propriété Javascript className.

[maitrebn]

Désolé pour le temps de réponse et surtout merci pour votre aide !