Change BackgroundImage à l'aide d'une Icone et si click : le BackgroundImage res

Signaler
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
Bonjour,

Voila je dois rendre la semaine prochaine un projet et j'aimerai arriver à donner la possibilité à l'utilisateur de changer le backgroundImage avec comme "interrupteur" une icône ( un Ipod en png ).
J'ai d'abord essayé en fesant la technique du "onmousover et onmouseout" afin que quand il aille avec sa souris, le deuxieme fond d'écran que j'ai mis dans le dossier de la page apparaisse et lui dévoile le nouveau rendu. Et donc ci ce dernier lui plait, il click une fois sur mon icone d'Ipod afin que ce wall reste ! Mais bien sur, ce n'est pas ossi simple et les Onmouse^^ ne fonctionne pas ( ou plutôt ca change juste derriere mon icone d'ipod... donc mais c'est pas du tout ce que je recherche ).

Mais voila, le javascript c'est pas trop mon truc ( je suis juste arrivé a faire l'horloge en temps réelle, waow trop content :p )...

Donc j'aimerai avoir une solution assez simpliste car je suis qu'en premiere année d'un DUT Service et Réseau de Communication.

Voici la ligne du code en question dans ma page html: ( pour ma ligne en dessous, en attendant de trouver la bonne solution afin de faire ce que je souhaite ^^, j'ai juste mit en "onmouseover" ce même Icone d'Ipod mais un peu plus gros et avec des ombres sous lui et sur son texte dans l'écran afin que ca ne fasse pas figé... Mais bon si il doit rester fixe pour que le changement de backbroundImage fonctionne il n'y a aucun probleme. )

"

       
</img
   

"

Merci Beaucoup ;)

28 réponses

Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

s'il vous plait il me reste plus beaucoup de temps...

J'ai fais 2-3 forum dont celui de clubic mais personne n'a pu me donner une solution efficace à mon petit soucis ^^
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
bonjour,
>>il me reste plus beaucoup de temps...
1° fallait bosser avant peut-être ?
2° pas très claire ta demande
    tu veux changer l'image en background d'ene page ?
    si c'est ça : document.body.style.backgroundImage="url('image voulue')"
Cordialement          [mon Site] [M'écrire] Bul         
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

Ca fait un peu 2 mois que je suis dessus ^^

Et vu que j'ai cherché et essayé des tonnes de manip mais en vain, j'en arrive a poser la question ici vu qu'avant je n'ai pu trouver la solution donc...C'est une manip toute bête vu qu'il y a du onmouseover/onmouseout et onpress ou onclick j'imagine !

Je résume mon souhait :

Quand l'utilisateur va avec sa souris sur mon icone "Ipod.png" cela change sur ma page le BackgroundImage ( donc ca enleve celui "par défaut" ) et ca affiche un deuxieme BackgroundImage. Là il y a deux cas :

-> Si ce dernier lui plait, il a juste a clicker sur mon "Ipod.png" pour que ce dernier reste et donc remplace le background initial !
-> Sinon si il quitte avec sa souris mon icone d'Ipod car ce nouveau wall affiché ne lui plait pas (et donc il n'a pas clicker), le wall deriere redevient le "par défaut".

Vous comprennez ?
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

J'ai justement essayé avec document.body.style.backgroundImage="url('image voulue')" en onmouseover et out mais ca ne change le wall que derrière mon Ipod et exclusivement derrière lui (autant dire à peine 5 px en largeur et 5px en hauteur ) tout le reste de ma page garde le même wall !

Vu que je maitrise assez bien le html et le css, ba le java c'est vraiment autre chose et j'ai fait 7 pages compléte mais là derniere a réaliser c'est justement celle ou on doit mettre un code java ... Contrainte oblige !
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
euh... et c'est quoi un wall ?

>>Je résume mon souhait : Quand l'utilisateur va avec sa souris sur mon
>>icone "Ipod.png" cela change sur ma page le BackgroundImage
et bien ; applique ce que je dis lors du survol de l'icône ! non ?
quand aux >>Là il y a deux cas
de 2 choses l'une ( l'autre c'est le soleil ), soit
il valide et c'est bon, soit il ne valide pas et
on remet le fond initial.

>>ba le java c'est vraiment autre chose ... mettre un code java ...

erreur de forum alors, ici c'est javascript et pas java !

          [mon Site] [M'écrire] Bul        
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

Ba un wall ^^ un wallpaper = fond d'écran ...

Ah donc en javascript il est impossible de réaliser une function qui execute selon click ou pas click, onmouseover ou onmouseout l'action de changer le fond d'écran de la page

Bon ba dsl alors, j'abandonne l'idée... Moi qui pensait quand javascript on pouvait faire ça
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
>>donc en javascript il est impossible de réaliser
ben si  on peut ! où tu as vu que je disais qu'on ne pouvait pas ?
tu ne dois pas faire comme il faut....
mais bon, sans ce que tu fais....
          [mon Site] [M'écrire]  Bul         
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

Ba je croyais que

" ba le java c'est vraiment autre chose ... mettre un code java ...
erreur de forum alors, ici c'est javascript et pas java ! "

Ca voulait dire que ma demande est impossible en javascript ^^ bon...

Alors c'est quoi la meilleur solution a faire pour réaliser ma demande !

J'ai éssayé hier avec mais rien à faire ca change juste derriere mon image d'Ipod qui fait 80*80px alors que le background sur ma page a changé fait 1280*1024..

onClick="last.style.backgroundImage='url(imageinitiale)'; this.style.backgroundImage='url(test1.jpg)';last=this;"
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
euh ?!???!!!???
je te disais "pour java tu n'es pas sur le bon forum, ici c'est javascript"
( j'ajoute et javascript n'a strictement rien à voir avec java ! )
comment tu peux comprendre que ça ne fonctionne pas en javascript ????

ton onclick change le background-image de quoi ?
pas de la page en tout cas... relis mon 1er message peut-être ?

          [mon Site] [M'écrire]  Bul         
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
de plus, onmouseover et onmouseout ? on y fait quoi ?

et je pensais qu'il fallait proposer une autre image en fond de page
au onmouseover sur l'IPOD et si on click sur l'IPOD la garder,
sinon revenir à l'image initiale de fond de la page.

c'est pas ça ?  j'ai mal lu ?
si oui... fais au moins comme ça !
si non, réexplique le but.

          [mon Site] [M'écrire] Bul         
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

Oula... Je je ne veux pas faire de java mais juste du javascript, je sais même pas la différence entre les deux donc je pense plutôt à une mal compréhension..

Le onclick il change juste la "zone" du background-image qui se trouve juste derriere mon icone d'Ipod ! Donc en gros, tout le backgroundImage reste le même sauf l'emplacement de mon Ipod ou derriere lui, je reconnais bien la couleur de mon deuxieme background. Mais en plus quand je quitte l'icone Ipod avec ma souris, ca reste comme ça, le deuxieme background ne s'anule pas ! ( alors que je n'ai pas clicker )

Ca m'a lair bien compliquer, moi qui pensait que ca serait super facile :p)
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
>>je ne veux pas faire de java mais juste du javascript,
pourquoi parler de java alors ?
java est un langage, javascript aussi... et pas le même

>>Le onclick il change juste la "zone" du background-image qui se trouve juste derriere mon icone d'Ipod
ben oui ! que ça ne change pas l'image de fond de la page !
je t'ai montré l'instruction comment,    ce que tu ne fais pas.
tant qu'au reste, mon foie, ne sachant toujours pas ce que tu fais....

et si tu ne fais pas ce que tu décris... ben ça ne marchera pas !
tu veux faire selon une logique et tu ne la respectes pas ?
ça ne marchera donc pas comme tu veux !

ipod, au survol : changer le fond ce page  de la page
       quand on ne survole plus : y-a-t-il eu un click sur l'ipod ?
                                           non : mettre le fond de page initial
       si on clique : noter qu'il y a eu un click sur l'ipod

         [mon Site]  [M'écrire]  Bul         
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

Oui voila le processus décrit en dernier est bien ce que je souhaite ^^

Pour le on click, si ca change juste la zone derrière l'icone et non toute le backgroundImage, ba je ne savais pas !

Je croyais que "onclick" ca pouvait remplir le " si l'utilisateur click sur l'Ipod alors le nouveau background reste bien en remplacant le precedent "

Ok bon alors comment j'organise tout ça pour enfin arriver à

" ipod, au survol : changer le fond de page  de la page
       quand on ne survole plus : y-a-t-il eu un click sur l'ipod ?
                                           non : mettre le fond de page initial
       si on clique : noter qu'il y a eu un click sur l'ipod
                         donc on remplace le fond de page initial par le fond de page "new" "

comment je tapes tout ça en javascript car else, if, ect... J'ai jamais rellement vu
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
>>comment je tapes tout ça en javascript car else, if, ect... J'ai jamais rellement vu
bah... il te reste à apprendre le javascript
c'est pas compliqué ( au moins au départ, après on se rend compte
        que c'est un langage assez sophistiqué et qu'on peut faire
        plus que la plupart n'imagine )
mon foie, if else, ce n'est pas spécifique au javascript
      à la syntaxe près, mais quand il ne reste que des problèmes
      de syntaxe.... c'est résolu.

je t'ai donné la logique, l'instruction à utiliser...
si je te donne tout ( j'ai fait un exemple pour tester,
il est chez moi, et : 1 seul if, pas de else par exemple
franchement c'est 3 lignes en javascript )
ça apporterait quoi à qui ? à toi rien, tu n'apprendras rien

          [mon Site] [M'écrire] Bul         
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

Oui mais je crois que ce que tu n'as pas bien saisis c'est que ça fait 2 mois que j'ai cherché et tanter de retranscrire mes idées et cette logique justement que tu as écrite parfaitement ^^  mais j'ai vraiment du mal...

Donc bon là je vais terminer mon autre page et je vais tanter de m'y remettre en essayant de faire cette function ( mais je met quoi comme variable ??? )

Mais ce que j'arrive pas c'est pas forcement ce qu'il y a dans " <script type="text/javascript"> " c'est plutôt dans le , je n'arrive pas a faire le lien et à inclure mon icone "Ipod.png" ect... A ce que tout soit bien mit et c'est bien pour ca que je nague en js.

Bon et bien merci quand même de l'aide ^^ ! ;)
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
je me cite :
je t'ai donné la logique, l'instruction à utiliser
c'est 3 lignes en javascript
tu ne tentes même pas d'appliquer... je ne peux plus rien pour toi

   [mon Site] [M'écrire] Bul      
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

Ca fait 2 mois que je tante d'appliquer comme tu dis, c'est ça le truc qui apparemment te sors de la tête...

Donc quand on a essayé pas mal de truc et que tout ce qui est variable + dans le body : relié l'icone en png a cette fonction ect... Tout ça je n'y suis jamais arrivé pendant mes 2 mois de recherche et application alors c'est pas parceque là maintenant j'ai compris ta logique en question qui est trés claire, ca je te l'accorde, que tout d'un coup je vais savoir le retranscrir en js !!!

Tanpis, je vais faire autre chose.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
>>[../auteur/YOUNG09/1568536.aspx ]Ca fait 2 mois que je tante d'appliquer comme tu dis,
bah.. je n'ai répondu qu'aujourd'hui !
et tant que tu ne respecteras pas mon exemple, donné dans ma
    1ère réponse, tu ne parviendras pas à changer l'image de fond
tu n'appliques pas ce que je dis !
    tu utilise this, tu n'as pas compris à quoi ça correspond je pense
    je te disais : document.body.style.backgroundImage="url('image voulue')"
    et tu ne fais pas comme ça !?!??? donc... ça ne marche pas

ce n'est pas un problème javascript, mais un problème de français ?
navré pour toi, je ne vois pas comment te dire ça autrement.

          [mon Site] [M'écrire]  Bul         
Messages postés
15
Date d'inscription
vendredi 2 janvier 2009
Statut
Membre
Dernière intervention
3 janvier 2009

Ah ba déja c'est pas trés clair franchement entre va savoir quand c'est moi qui parle, qui est cité, ect... Juste avec des " > " ...

Donc je vois bien cette instruction " document.body.style.backgroundImage="url('image voulue') " mais avec le js j'en fais quoi ?! Car ca je comprend vu que pour moi c'est du html, mais pour relier ça avec mon icone d'Ipod je fais comment ?

Vu que je sais pas comment relier l'instruction en question avec le js a cette icone ( image src...) donc je n'avancerai jamais, c'est ça le truc !
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
10
ok... j'abandonne...
          [mon Site] [M'écrire] Bul