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

Question

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. ) "

Young09 · Answer

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 ^^

Bul3 · Answer

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

Young09 · Answer

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 ?

Young09 · Answer

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 !

Bul3 · Answer

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

Young09 · Answer

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

Bul3 · Answer

>>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

Young09 · Answer

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;"

Bul3 · Answer

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

Bul3 · Answer

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

Young09 · Answer

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)

Bul3 · Answer

>>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

Young09 · Answer

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

Bul3 · Answer

>>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

Young09 · Answer

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 ^^ ! ;)

Bul3 · Answer

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

Young09 · Answer

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.

Bul3 · Answer

>>[../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

Young09 · Answer

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 !

Bul3 · Answer

ok... j'abandonne...
          [mon Site] [M'écrire] Bul

Young09 · Answer

Super merci ^^ ;)

ca aurait tellement plus simple depuis le début si j'aurai eu un code pour tester si ca fonctionne direct parce que là j'ai pas avancé d'un yota !

Et franchement c'est pas de la mauvaise volonté, ni du "t'as pas essayé" c'est que je comprend pas du tout comment rendre cohérent le tout... Un coup c'est si, un coup c'est ça...

Bul3 · Answer

>>ca aurait tellement plus simple depuis le début
bah !!! je t'ai fourni toutes les infos pour faire !
si tu ne sais pas, ou plus exactement si tu n'essayes même pas,
    pas la peine que je fasse un quelconque effort pour toi, qui
    n'en fais aucun.
          [mon Site] [M'écrire] Bul

Young09 · Answer

Ba oui je sais pas, ça fait 3 pages que je le dis !!!

Je vais pas inventer un code comme ça en js vu que je sais pas comment m'y prendre, j'aurai tout essayé franchement là... En 60 jours tu crois pas que j'ai déja essayé de taper des trucs avec une logique trés proche de celle que tu as écrite ^^

Si tu veux pas me donner le réel code ba fallait me le dire des le début, tanpis. J'ai pas avancé du tout et je vais donc changer d'idée je pense car là...

C'est bien beau de me montrer la logique, ça je l'ai et je comprend comment un algo ça fonctionne mais je SAIS PAS le retranscrire en JS et le TAPER sur ma page HTML pour relier la function à mon icone Ipod point !

Pas grave, merci quand même pour le temps au moins que tu m'a accordé, bonne aprémidi et bonne année.

Bul3 · Answer

je ne veux pas te donner tout cuit,
dans 15 jours si tu me contactes, 
je te donnerais les 3 lignes nécessaires
( met 'projet raté' et un lien vers ce topic dans le message )
           [mon Site] [M'écrire] Bul

Young09 · Answer

Et mais c'est super ça didonc, c'est un projet DUT pour finaliser mon semestre et tu voudrais me donner la réponse une fois que je l'aurai rendu...

C'est vraiment énorme, j'ai juste besoin d'un code de 3 lignes apparemment pour enfin finir complètement mon site que j'ai fais de A a Z tout seul et là c'est du JS, donc ca y est pas de solution...

Merci ;) vraiment... A quoi ça me sert de savoir ça dans 15 jours alors que c'est dans moins de 7 jours que je risque de rendre ça...

Bul3 · Answer

>>dans moins de 7 jours que je risque de rendre ça
risque ?
alors compte un peu plus de temps pour ma réponse,
je voudrais être sûr.


          [mon Site] [M'écrire] Bul

Young09 · Answer

Sur de quoi ?!

Je comprend strictement rien et j'ai l'impression de perdre légèrement mon temps sans vouloir t'offenser...

Bul3 · Answer

>>j'ai l'impression de perdre légèrement mon temps
c'est sûr... tu ferais mieux d'apprendre/d'approfondir... le javascript.
          [mon Site] [M'écrire] Bul

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

28 réponses

Votre réponse

Discussions similaires