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 :

Zoom sur image : zoom vers la droite et non vers la gauche


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    200
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 200
    Points : 66
    Points
    66
    Par défaut Zoom sur image : zoom vers la droite et non vers la gauche
    Bonjour,

    J'ai trouvé un script sur le net qui fait qu'une image soit zoomée au survol de la souris.
    Il fonctionne plutôt bien si ce n'est que pour mes besoins, je voudrais que le zoom s'effectue vers la gauche et non vers la droite car sinon, elle dépasse la largeur du site...

    Comment faire pour que le zoom s'effectue vers la GAUCHE et non l'inverse ?
    merci d'avance

    Voici le code en question :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <script language="JavaScript">
    <!--
    var coeff=4;//Coefficient de reduction
    var larg=400;//largeur maxi de l'image
    var haut=388;//hauteur maxi de l'image
    var coeffinit=coeff;
    function changer() {
    if (document.image.width < larg) {
    coeff = coeff-0.2;
    document.image.width = Math.round(larg/coeff);
    document.image.height = Math.round(haut/coeff);
    chang=window.setTimeout('changer();',60);//vitesse de l'effet
    }
    else {window.clearTimeout(chang);}
    }
    function initial() {
    if (document.image.width > larg/coeffinit) {
    window.clearTimeout(chang);
    coeff = coeff+0.2;
    document.image.width = Math.round(larg/coeff);
    document.image.height = Math.round(haut/coeff);
     
    initi=window.setTimeout('initial();',60);//vitesse de l'effet
    }
    else {window.clearTimeout(initi);}
    }
    //-->
    </script>

  2. #2
    Membre du Club
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    200
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 200
    Points : 66
    Points
    66
    Par défaut
    Bonjour, je relance les sujet...
    Personne n'a rencontré auparavant ce problème ?
    merci d'avance pour votre aide

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Il "suffit" de décaler l'image vers la gauche en même temps que tu l'agrandis.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    200
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 200
    Points : 66
    Points
    66
    Par défaut
    Merci pour ta réponse Bovino... mais comment je fais pour décaler l'image vers la gauche ?

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    C'est pour cette raison que j'avais mis il "suffit"
    Cela va dépendre de l'architecture de ta page. Le plus simple étant de positionner ton image et de jouer sur la propriété style.left.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

Discussions similaires

  1. zoom sur image
    Par HiT dans le forum 2D
    Réponses: 8
    Dernier message: 03/04/2008, 00h05
  2. [VB.NET2.0][Debutant]zoom sur image
    Par Emcy dans le forum Windows Forms
    Réponses: 2
    Dernier message: 15/06/2006, 15h03
  3. [html][css] 3 lv de zoom sur image sous IE et firefoxe
    Par avogadro dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 10/04/2006, 22h37
  4. [FLASH 8] Zoom sur image
    Par kmomille dans le forum Flash
    Réponses: 6
    Dernier message: 09/03/2006, 14h17
  5. zoom sur image de formulaire
    Par bourvil dans le forum VBA Access
    Réponses: 2
    Dernier message: 01/10/2003, 09h25

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