Forum Clubic

Fonction "Change Background-image" mais que ca reste !

Bonjour,

J’aimerai une petite aide car j’ai cherché et essayé pas mal de fonction mais le mieux que ca puisse faire c’est quand je passe sur mon image le fond change mais des que je la quitte ça revient à la normal ( onmouseover-onmouseout ) donc c’est pas la bonne solution.

Voici mon code pour ce qui concerne la fameuse image qui soit prit en compte ! :



 <div id="Ipod"><img src="Ipod_Color.gif" border="0px"
 onmouseover="this.src='Ipod_ColorOn.gif'"
 onmouseout="this.src='Ipod_Color.gif'" ></img></div>


Comme vous pouvez l’imaginer, mon image de l’Ipod quand on passe la souris dessus elle s’agrandit bien, avec une ombre derrière ( un peu comme une icône dynamique afin d’éviter le truc tout fixé pas beau ). Et donc je voudrai qu’ une fois que la personne a mit sa souris dessus et donc que l’icône Ipod soit “active” ça change le background-image derrière avec l’url d’une image que j’ai au bon format etc… Et SURTOUT, qu’ avec un “Onpress” ou autre je sais pas, si ça plait à l’utilisateur; il puisse clicker sur l’ipod pour que le background en question soit gardé et non que si il quitte l’Ipod avec la souris, il rebascule sur le background initial .

Voila, si quelqu’un à une tite fonction bien je suis preneur car je cherche depuis pas mal de temps… Bon projet et pour la semaine du 5 Janvier donc j’ai encore le temps !!

Merci beaucoup.
Edité le 14/12/2008 à 14:54

Personne ne sait ?!

Salut,

si tu veux que le bg change “onmouseover” et reste comme ça même après un “onmouseout”, ben… suffit de pas mettre ton “onmouseout”…
si tu veux le rollover tel qu’il est, et en plus que le bg de "onmouseover"soit conservé après un click, il doit y avoir pas mal de solutions:
ex : onclick tu récupères le innerHTML de Ipod, tu supprimes à la volée ton onmouseout=“this.src=‘Ipod_Color.gif’” puis tu remplace le innerHTML de Ipod par cette nouvelle image (qui est sans “onmouseout”)
c’est ptet un peu compliqué pour pas grand chose mais il est tard faut pas m’en demander plus^^

ou plus propre, tu fait 2 classes css : une “rollover” et une “bgFixe”.
Par defaut tu met “rollover” et onclick tu change la classe en “bgFixe”!

Eu là j’avoue, je suis largé avec le coup du “rollover” and co…

Je pense que je vais abandonné mon idée et faire juste bouger mon icone “Ipod” toute bien faite mais sans fonction liée ^^ tanpis

Merci quand même de l’aide :wink:

Je repost car je n’ai toujours pas trouvé de solution à mon probléme mais j’ai la logique a appliqué. Sauf que mon principale soucis c’est de devoir transcrire en code JS ce lien :

—> Icone “Ipod.gif” avec la function"ChangeBG" et donc dans le lié le tout ! Pour que l’activation on va dire de cette function se fasse avec mon iconde d’Ipod :wink: !

La démarche :

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

Si quelqun pourrait m’aider car je sais pas du tout quoi taper. Il me faudrait le code avant les 7 prochains jours ( date butoir du projet à rendre… ).
C’est vraiment pas facile du tout les algos, je sais même pas si je dois me préocuper de variables x,y,z pour mon cas là ^^
Merci du coup de main :wink: !
Edité le 03/01/2009 à 17:38

Je connais pas trop le dev sur Ipod mais en JS je ferais tout simplement, en cas de click, une mise à jour du backgroundImage en prenant l’ID du fond de l’Ipod (connais pas l’ipod, c’est une suggestion)
Je suppose que le fond à un ID propre non?

En JS je ferai document.getElementById(“Id du fond de l’ipod”).style.backgroundImage=“nom de l’image”.jpg ou gif etc…
ou si c’est un -> .src=“nom de l’image”.jpg ou gif etc…

Si c’est différent sur ipod, adapte, mais c’est le principe.

J’ai bien noté l’instruction là :

" document.getElementById(“Id du fond de l’ipod”).style.backgroundImage=“IpodOn”. gif"

Mais je sais pas du tout comment le mettre dans mon code ! Faut il faire une fonction en JS dans le avec le fameux " "

Voici mon code dans le body qui concerne mon souhait : ma div en question avec l’icône de l’Ipod.gif qui servira “d’activateur” pour le ChangeBG :

"

<img src=“Ipod_Color.gif” border=“0px”
"

Comment j’incrémente le code JS avec ça ^^ ???

Ah ca m’énerve d’être perdu dans ce langage (JS) alors que le html et le css je le maitrise sans aucun soucis ( bon faut dire c’est pas du tout la même chose :stuck_out_tongue: ) mais vu que j’ai fini complètement mon site, ba il me reste plus que cette mauvaise épine qui reste coincée depuis deux mois !

Merci pour l’aide en tout cas :wink:

Je vois que tu as une balise , je suppose que c’est l’image fond à changer?
"

<img src=“Ipod_Color.gif” border=“0px”
"

Tu met directement le test du click dans la balise IMG, comme suit:

la balise de fermeture n'est pas utile, mais je ne sais pas si l'HTML sur IPOD est strict ou pas ?? Et tu as oublié le ">" de fin de la balise IMG... Le div que tu donnes est celui de l'icône sur lequel on clique? si oui, dans cas remplace le this.src par [i][b]document.getElementById("Id_du_fond_ipod").style.backgroundImage[/b][/i] Sur un navigateur ça marcherait, mais sur Ipod ? :neutre:

Pour ton problème de survol et click lors d’un choix de background :

Dans la balise
declare la variable click comme tel dans le code JS :

puis dans la balise IMG :
onmouseover=“this.src=‘nouveau_fond.gif’ '” onmouseout=“if(!click) this.src=‘fond_actuel.gif’’; else click=false;” onclick="click=true; document.getElementById(“Id_du_fond_ipod”).style.backgroundImage=‘nouveau_fond.gif’ "

Maintenant si ton IMG représente le fond de l’ipod, remplace document.getElementById(“Id_du_fond_ipod”).style.backgroundImage par this.src
N’oublie jamais que “.src” est pour la balise IMG et le “.style.backgroundImage” pour une déclaration de fond via "style='background: ‘mon_image.jpg’ ".

Le “else click=false;” est obligatoire car si tu as plusieurs icônes à survoler et click est toujours à “true”, ca ne marchera plus…
Ceci dans le cas où tu survoles plusieurs icônes.
S’il n’y en a qu’un seul, la variable click ne sert plus à rien.

En esperant que cela fonctionne sur ipod :sarcastic:

sinon, ton explication n’est pas très claire :
" 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” "
Survol de quoi, de la surface totale de l’écran, d’un icone ?
Edité le 04/01/2009 à 16:00

Oui quand je parle de “survol” c’est l’icone de l’iPod en soit, comme cela :

Comme quand on va pointer avec sa souris l’icone de Firefox sur son bureau là ^^ et bien imaginons que des que pointeur de la souris passe sur l’icone ça fait apparaitre un autre background-image sur toute la page actuel. Si la personne trouve le nouveau wallpaper sympa, elle a juste a faire un click sur cette même icone et donc il restera !
Sinon, elle a juste a ne plus pointer l’icone avec sa souris en ne le survolant plus et là, le background-image revient normal ( 1ier wallpaper donc : initial) .

C’est ok ? Donc si ce que je veux faire est clair et réalisable ^^ :p) je garde quoi comme code ? Car là, j’avoue c’est super sympa de m’aider autant et de me donner toutes ces solutions mais là je sais pas trop quoi garder et quoi taper dans mon code là :p)

Peut tu juste m’éclairer car déja j’imagine que je garde ça :



--> Pour le <head> :

<script type='text/javascript'>
<!--
var click=false;
//-->
</script>

--> Pour mon <body>, dans ma <div> là ou justement il y a mon icone d' "Ipod.png" :

onmouseover="this.src='nouveau_background.gif' '" onmouseout="if(!click) this.src='Background_actuel.gif''

else click=false;
onclick="click=true; document.getElementById("Id_du_fond_ipod").style.backgroundImage='nouveau_background.gif'"


Tout le reste j’ai un peu prêt compris mais pour le seul truc que je vois pas trop c’est dans la derniere ligne " document.getElementById(“Id_du_fond_ipod”).style.backgroundImage=‘nouveau_background.gif’ "

: id du fond_ipod ?! C’est quoi ? C’est ici que je fais le lien avec le img src=“Ipod.png” pour que ca soit cet icône qui active le tout, ect, ect… Car je ne trouve pas dans le code que tu m’as donnée le moment ou je relie justement tout cela ^^ à mon img src=“Ipod.png” (

C’est toujours ok ?! :p) Merci pour cette aide si précieuse en tout cas, je sens qu’on touche au but :slight_smile: !!!
Edité le 04/01/2009 à 23:46

D’abord avant de te répondre un coup de gueule et carton rouge pour clubic !!! :
Quand on tape un texte suivi d’un envoi alors qu’on est censé ne plus être connecté (suppression des cookies entre temps, eh oui on a d’autres sites ouverts, pas seulement clubic), on clique sur le lien pour se connecter et on perds tout ce qu’on a tapé !!!
Vous n’aviez pas prévu ce cas???, quand on clique sur le lien de reconnection sauvegardez le texte dans une variable session par exemple !!! pour le réafficher dans la textarea… bref, pas cool…


Bon, retour au topic (seconde écriture :nexath ) Si je reprends ton code :
[i]
[/i] est le div qui représente le background de l'ipod [i]<img src=[/i] est le fond la déclaration du fond de l'ipod

Donc c’est très simple :
Tu gardes le code JS, à savoir

Dans la balise
onmouseover="if(!click) this.src=‘nouveau_fond.gif’ " onmouseout="if(!click) this.src=‘fond_actuel.gif’ " onclick="click=true; this.src=‘nouveau_fond.gif’ "
Voilà, je pense que ça devrait fonctionner…

ATTENTION, n’oublie par de réinitialiser click à false lorsqu’un nouveau fond est dispo
sinon j’ai ajouté “if(!click)” dans onmousever pour éviter un réaffichage alors que l’utilisateur a déjà cliqué :slight_smile:


Autre chose pour clubic : Lorsqu'on fait une prévisu et qu'on revienne en mode édition, les émoticons ne sont plus dispo ! et vous avez mis "justify" par défaut, voyez les espaces enormes sur la ligne "onmouseout..." ???? Edité le 05/01/2009 à 14:11

Ok merci beaucoup donc je j’ai juste c’est deux petit bout de code à mettre, à savoir ( je met la div complète de mon Ipod pour bien voir si je me trompe pas dans l’implantation de ton code, dans le mien :wink: ) :


     <head>

<script type='text/javascript'>
<!--
var click=false;
//-->
</script>

     </head>

     <body>

<div class="menu2">
     <div id="Ipod"><img src="Ipod_Color.gif" border="0px" 
onmouseover="if(!click) this.src='nouveau_fond.gif' " onmouseout="if(!click) this.src='fond_actuel.gif' " 
onclick="click=true; this.src='nouveau_fond.gif' "></img></div>	
</div>

     </body>

Mais maintenant que je relie le tout bien au propre, j’ai l’impression que ca ne va pas faire ce que je souhaite ! J’ai le sentiment ( :p) ) que au moment ou on ira sur mon icône d’Ipod, ça va remplacer mon “ipod.gif” par un nouveau_fond juste à sa place là ^^ et que quand on arrête de pointer ici, l’icône d’Ipod revient à la place du fond ^^

Car moi ce que je veux c’est bien un BackgroundImage entier qui change au survol de mon icône d’Ipod.gif ^^ . Et je ne retrouve pas justement comme instruction “BackgroundImage” alors j’ai un peu peur… :p)
Edité le 05/01/2009 à 15:24

Tu n’as pas d’ipod pour faire un test :etonne2:
Comme je te l’ai expliqué plus haut, la propriété “BackgroundImage” est réservé à un style, un

, , etc…
Par exemple <div style="background: url(mon_image.jpg)>
Dans ton code le div ne contient pas de style mais le fond, tu l’affiches par la balise
hors, on change l’image d’une balise avec .src et non .style.backgroundImage…
Capito?
Mais pour que ça marche il faut ABSOLUMENT que le
que tu cites soit bien le fond de l’ipod…
Je ne suis pas sorcier, je ne peut pas le deviner à ta place :paf:

Comment ça je n’ai pas d’Ipod pour faire un test ?!

L’ipod c’est mon icône sur ma page web, une icône qui est en 60px/60px dans une barre latérale ( à la vista ) sur ma page d’accueil de mon site ^^ donc…

Donc je comprend pas trop ce que tu veux dire là avec " le fond de l’ipod… " Et moi c’est pas l’image de la balise

justement que je veux changer c’est tout le backgroundImage de ma page ^^ !!! L’image en question dans ma div c’est mon icone : " img src=Ipod.gif " !!

C’est cette icône qui fait changer le fond de ma page en ENTIER et elle ne doit pas bouger mais alors pas du tout ! C’est quand la personne va justement sur cette icône que le backgroundimage doit changer ( et rester si il y a un click ) ! Si l’icone est remplacée par quelque chose d’autre, alors ca ne remplit pas du tout ce que je pensais ^^ mdr !

Je crois qu’on c’est pas bien compris ^^ :p)

c’est qu’on ne s’est pas bien compris du tout, tu aurais dû commencer par là ^^
->L’ipod c’est mon icône sur ma page web, une icône qui est en 60px/60px dans une barre latérale ( à la vista ) sur ma page d’accueil de mon site ^^ donc…

Je pensais que tu bossais sur un script pour l’ipod, c’est pour ça que je te disais
“Je connais pas trop le dev sur Ipod mais en JS je ferais…” et "En esperant que cela fonctionne sur ipod " :ane:
Je précise encore une fois, j’y connais en dev sur ipod.

Bref, là je comprends mieux que c’est pour ta page web :stuck_out_tongue:
Ca donne ça :
onmouseover="if(!click) document.body.background=‘nouveau_fond.jpg’ " onmouseout="if(!click)
document.body.background=‘fond_actuel.jpg’ " onclick="click=true; document.body.background=‘nouveau_fond.jpg’ "

Tu m’aurais dit que c’était pour ta page web, on aurait pas galèré :ane:
Edité le 05/01/2009 à 16:45

Ah je suis vraiment dsl mais là oui on a du bien tourner autour du pot en une dizaine de post pour un truc qui pourtant me paraissait tout bête pour les conaisseurs de JS !

Je me disais aussi que ta première phrase " Je connais pas trop le dev sur Ipod mais en JS je ferais tout simplement …" m’a un peu surprise mais j’en ai fais abstraction et j’aurai pas du :stuck_out_tongue: mdr !
Et là le coup du " en espérant que cela fonctionne sur l’ipod " là je me suis dis c’est vraiment bizarre la façon dont il parle de mon icône… :stuck_out_tongue: !!

Bon et bien OK, je retiens au final ce code pour ma page HTML, :slight_smile: :


     <head>

<script type='text/javascript'>
<!--
var click=false;
//-->
</script>

     </head>

     <body>

<div class="menu2">
   <div id="Ipod"><img src="Ipod_Color.gif" border="0px" 
   onmouseover="if(!click) 
   document.body.background='nouveau_fond.jpg' " 
   onmouseout="if(!click)
   document.body.background='fond_actuel.jpg' " 
   onclick="click=true; document.body.background='nouveau_fond.jpg' "></img></div>	
</div>

     </body>

Bon ba je pourrais tester tout ça dans environ 1 petite heure, je pense que là tout est OK et je m’y retrouve correctement :stuck_out_tongue: ! Merci pour tout ce temps accordé et surtout d’avoir surmonter mon incompréhension face au développement sur Ipod :stuck_out_tongue: !

Bonne soirée :wink:
Edité le 05/01/2009 à 17:02

Je vois que t’es une demoiselle, si ça marche j’aurai droit à un chti bisou :paf: ?

Alors pour le bisous (trahie par “surprise”) , il y a encore un problème :stuck_out_tongue:

Ce que je vais faire pour bien montrer le code que j’ai tout bien tapé, comment il est “mit” avec ce que j’avais déjà dans ( la function de l’horloge en temps réelle par ex ) et dans mon body :


<head>

     <script type="text/javascript">	
     <!--

var click=false;

function horloge(){
var heure,hh,mm,ss,clock;
heure=new Date();
hh=heure.getHours();
mm=heure.getMinutes();
ss=heure.getSeconds();
clock=hh + ":" + mm + ":" + ss;
document.montre.affichage.value=clock;
setTimeout("horloge()",1000);
}

     //-->
     </script>

</head>

<body>

<div class="menu2">
     <div id="Ipod"><img src="Ipod_Color.gif" border="0px" 
onmouseover="if(!click) document.body.background='cian.jpg'" 
onmouseout="if(!click) document.body.background='LeoSpace.jpg'" 
onclick="click=true; document.body.background='cian.jpg'"></img></div>
</div>

</body>

Voila ^^ donc en gros quand je survole l’iPod, rien ne se passe (pas de changement de wallpaper et j’ai bien vérifié mes noms ect…) et il n’est pas clickable. :@
Edité le 05/01/2009 à 20:47

:love:

En fait c’est très simple :
j’ai donné la varible “click”, mais en fait click() est une methode utilisé par input.
Mais vu que la variable se nomme “click” et non “click()”, jamais je n’aurais pensé que IE serait si pointilleux :fou:
J’ai essayé sous firefox et ça fonctionne sans problème, merci IE !! :paf:

Renomme click par clic ou autre chose :yeux4:

J’ai quand même mérité un bisou, c’est la faute à IE :MDR