IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Modifier le css background-image avec Javascript


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2011
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Mars 2011
    Messages : 19
    Points : 13
    Points
    13
    Par défaut Modifier le css background-image avec Javascript
    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, LowTiste.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .style.backgroundPosition
    de manière plus générale les propriété css se transcrivent en javascript en supprimant le tiret et en mettant la lettre suivant en Majuscule

    Background-image => backgroundImage

    Il a quelques rares exception comme float => cssFloat

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 075
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 075
    Points : 44 670
    Points
    44 670
    Par défaut
    Bonjour,
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    // CSS background-position: top left ;
    Element.style.backgroundPosition = valeur +'px';
    <edit>lent, trop lent</edit>

  4. #4
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2011
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Mars 2011
    Messages : 19
    Points : 13
    Points
    13
    Par défaut
    Merci Avec le backgroundPosition je me frotte à un autre problème : je dois mettre deux valeurs (ordonnée et abscisse) or je veux les récupérer séparément pour pouvoir faire des calculs dessus. Il me faut donc une fonction qui me compte le nombre de caractères et qui me renvoie juste les chiffres. J'ai pensé aux expressions régulières, mais c'est assez casse-dent, il n'y aurait pas un autre moyen ?

    Cordialement, LowTiste.

  5. #5
    Membre confirmé Avatar de nadox
    Homme Profil pro
    Développeur
    Inscrit en
    Février 2010
    Messages
    360
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2010
    Messages : 360
    Points : 551
    Points
    551
    Par défaut
    Bonjour,
    Ne serais-t-il pas plus simple d'utiliser une div avec
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    overflow:hidden;position:relative;
    contenant une autre div avec
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    position:absolute;background-image:url('monimage');
    et jouer sur la position de la div intérieure ?

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    tu peux faire un split ...

Discussions similaires

  1. [CSS 3] CSS d'une image avec javascript
    Par fidraman dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 27/05/2012, 16h57
  2. modifier background-image avec lien
    Par tiesto95 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 23/02/2009, 18h40
  3. pb avec CSS background-image et XSL
    Par trotters213 dans le forum XSL/XSLT/XPATH
    Réponses: 5
    Dernier message: 12/02/2006, 17h50
  4. [CSS] background-image : 2 images
    Par ZeImp dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 18/07/2005, 00h59
  5. [CSS] Background-image étirée sur tout l'écran
    Par Amnesiak dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 04/03/2005, 12h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo