Changer contenu IMG par JAVASCRIPT

Résolu/Fermé
Utilisateur anonyme - 30 sept. 2009 à 02:23
 Utilisateur anonyme - 30 sept. 2009 à 19:57
Bonjour,

Je souhaiterais tout simplement changer une image contenue dans une div (nommée 'bck') en cliquant sur une image contenue dans une autre div (nommée 'left').

Voici mon code JS:
<script language="javascript" type="text/javascript">
function ChangeBackGround(fichier) {
document.GetElementById('bck').src=fichier
}
</script>

Et mon HTML:
<div id="bck"><img src="fond2.jpg" width="100%" height="100%"/></div>
<div id="left">
<FORM>
<INPUT type=button value='Changer' onClick="ChangeBackGround('newyork2.jpg')">
</FORM>
</div>


Merci pour votre aide.

PS: Si à tout hasard vous sauriez comment faire un preloader sur ce changement d'image, ce serait génial.
A voir également:

8 réponses

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
30 sept. 2009 à 13:51
Ce code est proche de la solution, hormis des fautes de syntaxe. Voici une version corrigée:

<script language="javascript" type="text/javascript">
function ChangeBackGround(fichier) {
document.getElementById('bck').src=fichier;
}
</script>

En javascript une instruction se finit par un ";" et on écrit: getElementById (sans majuscule à get)
0
Utilisateur anonyme
30 sept. 2009 à 16:13
Merci, mais le probleme n'est toujours pas résolu, le contenu de IMG dans la div bck ne change toujours pas quand je click sur le bouton de la div left.

Avec ton code javascript corrigé, voici le html:

<div id="bck"><img src="fond2.jpg" width="100%" height="100%"/></div>
<div id="left">
<FORM>
<INPUT type="button" value='Fond Rouge' onClick="ChangeBackGround(newyork2.jpg)">
</FORM>
</div>
0
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
30 sept. 2009 à 17:21
Salut. C'est normal que ca ne fonctionne pas, tu essayes de modifier le src d'un div. Il faut que tu mette un id sur l'image et tu fait ton getElementById sur cet Id. Et n'oublie pas les ' dans ton champs onclick.

<script language="javascript" type="text/javascript">
function ChangeBackGround(fichier) {
document.getElementById('chgImg').src=fichier;
} 
</script>

<div id="bck">
<img src="fond2.jpg" width="100%" height="100%" id="chgImg"/>
</div>
<div id="left">
<FORM>
<INPUT type="button" value="Fond Rouge" onClick="ChangeBackGround('newyork2.jpg')">
</FORM>
</div>

Ça devrais mieux fonctionner.

PS : Ne met pas sur ton site que tu respect les standard alors que pas du tout : http://validator.w3.org/check?uri=http://www.2pulse.com/contact.html
Sinon j'aime bien le design.
0
Utilisateur anonyme
30 sept. 2009 à 18:42
Merci beaucoup,

Pour l'histoire de respect des standards, comme annoté en page d'accueil, le site est en travaux. C'est simplement un message écrit en avance, donc je serais bel et bien respectueux des standards web ;)
En tout cas merci pour le commentaire sur le design, ca se fait rare :)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
30 sept. 2009 à 19:09
Ba de rien.
Perso, quand je code du html, je vérifie souvent la validation (avec ce petit module pour Firefox). C'est plus simple de le faire au fur et à mesure, que de corriger ca à la fin où on se retrouve avec une tonne d'erreur.
Enfin voila, c'est juste un ptit conseil (à prendre ou pas).
Sinon, met le topic en résolut.
0
Utilisateur anonyme
30 sept. 2009 à 19:13
Derniere petite chose...(je suis embetant je sais).
Saurais tu m'aiguiller si je veux faire un fondu vers la nouvelle image ? C'est a dire qu'au moment du onClick, une transition s'effectue pour adoucir le changement d'image ?

Merci beaucoup !
0
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
30 sept. 2009 à 19:48
A vrai dire, je ne bosse plus trop avec du javascript comme tu le fait. Je suis passé à jquery.
Tu y gagne sur tout les plans, niveau temps de développement et surtout compatibilité entre les navigateurs.
Fait une petite recherche sur google avec "fondu image jquery" et tu devrais trouver plein de pistes.
Sinon, si tu ne veux pas passer par jquery, il faut faire une fonction qui incrémente ou décrémente l'opacité de l'image avec document.getElementById('chgImg').style.opacity = 0.5 (enfin pour Firefox, IE utilise un autre truc), puis tu fait un setTimeOut sur cette fonction.
Enfin bref, de la grosse prise de tête pour ce que jquery sais faire en une fonction (non non, je n'incite pas ^^).
0
Utilisateur anonyme
30 sept. 2009 à 19:57
Merci énormément.

Ciao !
0