Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1516 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modifier le css background-image avec Javascript

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Modifier le css background-image avec Javascript

n°2068058
LowTage
Posté le 05-04-2011 à 11:19:14  profilanswer
 

Bonjour,
 
Je recherche un code ou une astuce qui pourrait me permettre de modifier les coordonnées d'une image de fond en css. Ma finalité serait de pouvoir faire bouger ces coordonnées pour avoir une image mouvante dans un cadre bien précis.
 
Merci d'avance.
 
Cordialement, LowTage.

mood
Publicité
Posté le 05-04-2011 à 11:19:14  profilanswer
 

n°2068217
rufo
Pas me confondre avec Lycos!
Posté le 05-04-2011 à 15:48:56  profilanswer
 

Faudrait en dire plus sur ton besoin (et nous sur une solution technique répondant à ton besoin). Pour info, avoir une animation sur une page web, à moins que celle-ci apporte de l'info, n'est pas une bonne idée car distrait le visiteur, son oeil étant constamment attiré par l'animation. Prévoir aussi un bouton "stop" pour arrêter l'animation dans el cas où le visiteur est épileptique...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2068315
GordonF_69
Posté le 06-04-2011 à 04:47:20  profilanswer
 

Sur un de mes sites, j'ai ca :
 

Code :
  1. document['body'].style.backgroundImage="url("+fond[b]+" )";


 
Et pour changer l'image (sprite ou deplacer le background, tu va devoir modifier ca :
 
...style.backgroundPosition: '150px 250px'

n°2068383
LowTage
Posté le 06-04-2011 à 11:46:24  profilanswer
 

Le backgroundPosition est vraiment pas mal, mais après il faut couper les coordonnées en deux avec un Split. Et pour enlever les 'px' il faut refaire un Split.
Mon but serait de pouvoir toucher aux coordonnées pour pouvoir ensuite en faire une image mouvante.  
---------------------------------
|    ______________________    |
|    _    =============    _    |
|    _    =                    =    _    |
|    _    =============    _    |
|    ______________________    |
---------------------------------    
 
Le cadre avec les - est un tableau en fond.  
Le cadre avec les _ est l'image qui rebondit sur les bords du tableau.
Le cadre avec les = est la partie visible de l'image. C'est en fait un <div> qui permet de ne voir qu'une partie de l'image.  
 
Je ne sais pas si j'ai été clair :) Ce n'est vraiment pas facile à expliquer, mais une fois qu'on a visualisé ce que ça fait, c'est plus simple. Mais étant donné que je débute en JavaScript ce n'est pas la partie précédente qui est dur mais celle ci :p
 
Cordialement, LowTiste.

n°2068384
rufo
Pas me confondre avec Lycos!
Posté le 06-04-2011 à 11:54:52  profilanswer
 

Est-ce que ça serait pas plus simple de faire un gif animé?
 
Cela dit, t'as toujours pas exprimé ton besoin initial, seulement une solution technique :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2068398
fred777888​999
Posté le 06-04-2011 à 13:58:18  profilanswer
 

Faut arreter de reinventer la roue a chaque fois... JQueryUI gere tres bien les animations en javascript et permet un tas d'effets a moindre efforts. En primes, c'est compatible avec tous les navigateurs passes et ce sera mis a jour pour les navigateurs a venir.

n°2071692
vanish
Ce qui brûle, brûle !
Posté le 22-04-2011 à 16:32:28  profilanswer
 

Salut Fred,

 

on peut aussi avoir envi de faire les choses avec ses mimines parfois, et tu vas rire, on peut même dev ses ptits plugins JQ histoire d'avoir un truc opti à nos besoins spécifiques. (et dans la plupart des cas les licences des plugins permettent de travailler à partir de l'existant pr peu qu'on cite les sources ds le script)


Message édité par vanish le 22-04-2011 à 16:33:27

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modifier le css background-image avec Javascript

 

Sujets relatifs
Javascript & GridViewbackground non visible dans email HTML
[Javascript] création boutons + onClick[Javascript] Lier un bouton à un player
[Perl / JS] [contourné] récupérer le contenu d'une variable JSImage mouvante derrière une image fixe
Variable PHP dans une fonction JavascriptPourquoi ce javascript ne fonctionne-t-il pas ?
agrandisseur image / diaporama pour site webbug d'affichage image
Plus de sujets relatifs à : Modifier le css background-image avec Javascript


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR