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 :

Besoin d'aide sur une modification


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Février 2007
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 40
    Points : 30
    Points
    30
    Par défaut Besoin d'aide sur une modification
    Bonjour,

    J'ai un site web ou j'utilise des pseudos pop up pour ouvrir une image miniature en plus grand.

    Pour se faire, je passe un titre et l'url de la photo a afficher en grand.

    La pseudo pop up est créé via un script javascript que je vous donnerais.

    Le probleme, c'est que quand le titre est + grand que l'image, la largeur prend celle du texte et non de l'image donc ca fait moche.

    Je voudrais que quoiqu'il arrive, la largeur soit celle de l'image et que le texte si il le faut, se mette sur plusieurs lignes.

    Voici les codes sources :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <a href="../grand/2000-95.jpg" title="Blabla bla"><img src="../petit/2000-95.jpg"></a>
    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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
     
    <!-- redirection des liens image jpg. Michel Deboom 04/2005
     
    // Création de la pseudo-popup :
    fe='<div id="pop" style="position:absolute;border:1px solid orange;left:3px;top:3px;display:none;z-index:200;background-color:#FFF;'
    //ajoute une ombre pour IE seulement
    fe+='filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#63421b,strength=6)">'
     
    fe+='<div id="tet" onmousedown="dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;" onmouseup="drag=0" style="cursor:move;background-color:orange;line-height:18px;color:white;font-size:12px;padding:0 20px 0 .5em;font-family:cursive;">'
    fe+='p<img title=" Fermer " src="../images/fermer.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" height="14" width="16"'
    fe+='style="cursor:default;position:absolute;margin:1px;right:0;top:0; " /></div></div>'
     
    function initLienImg(){
    db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6
    gdim=D.getElementById('pop'); lx=D.getElementById('tet')
    addEvent(D,"mousemove",controle_position) 
    elem=document.getElementsByTagName('select');
     
    //création de l'image
    im1=D.createElement("img");gdim.appendChild(im1);
    with(im1.style){border=0;margin="1px";}
    //écriture des évènements
    l=D.getElementsByTagName('a');
    for(var i=0;i<l.length;++i){
      //ajoute onclick=grdimg dans liens image avec extention .jpg ou .JPG
      result=l[i].href.search(/jpg$|JPG$/);
      if(result!=-1){l[i].onclick=grdimg;}
      }
    }
     
    function controle_position(e){
    sx=gk?pageXOffset:db.scrollLeft;     //scroll h
    sy=gk?pageYOffset:db.scrollTop;      //scroll v
    px=gk?e.pageX:event.clientX+sx;      //curseur x
    py=gk?e.pageY:event.clientY+sy;      //curseur y
    if(drag)with(gdim.style){left=px-dx+"px";top=py-dy+"px";}
    return false 
    }
    //Renvoi image et title dans le calque.
    function grdimg(){
    fx=gk?innerWidth-20:db.clientWidth   //l fenêtre
    fy=gk?innerHeight:db.clientHeight    //h fenêtre
    //charge l'image dans le cache du navigateur.
    im=new Image();im.src=this.href;
        //l'affiche en grandeur réduite repositionnée.
    with(gdim.style){display="block";top=sy+2+'px'};
    with(im1){src=im.src;width=height=100};
    if(!cr)cr=gdim.offsetHeight-127;
    if(gk)im1.style.marginBottom=-cr+"px";//correction Gecko 
    //montre le message d'attente. 
    lx.firstChild.data="patientez svp";
    //colore le lien comme visité, récupère le message title
    this.style.color=D.vlinkColor;txt=this.title;
    //Lance le controle de chargement 
    actif=setTimeout('controleChargement()',100)
    //désactive l'action normale du lien HTML 
    ;return false 
    }
     	  //controle du chargement de l'image
    function controleChargement(){
    //éxécute imgOK quand c'est terminé
    im.complete?imgOK():
    //sinon relance le contrôle toutes les 100 ms
    actif=setTimeout('controleChargement()',100)
    }
     
    function imgOK(){ // image chargée.
    clearTimeout(actif);lx.firstChild.data=txt;
    //L'image ne dépasse pas la fenêtre:
    if(im.width>=fx){im.height*=(fx-20)/im.width;im.width=fx-20;}
    if(im.height>=fy){im.width*=(fy-30)/im.height;im.height=fy-30;}
     
    //applique les dimensions recalculées à l'image.
    im1.width=im.width;im1.height=im.height;
    voirSelect('hidden')
    }
     
    // bug ie corrigé : cache les <select>
    function voirSelect(v){
    if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
    }
     
    function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant.
    if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+
    else if(obj.attachEvent)obj.attachEvent("on"+evType,fn)   // IE 5+
    else {return false;}
    } 
     
    // initialisation
    D=document;gk=window.Event?1:0/*Gecko*/;
    dx=dy=e=drag=cr=0
    addEvent(window,"load",initLienImg) 
    D.write(fe)
    //-->


    Il s'agit d'un code que j'ai recuperé sur le net, mais n'etant pas une fleche en javascript, j'arrive pas a faire cette petite modif.

    Merci de m'aider.

  2. #2
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Février 2007
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 40
    Points : 30
    Points
    30
    Par défaut
    Personne pour relever le defi ?

  3. #3
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Points : 2 757
    Points
    2 757
    Par défaut
    bonjour,

    regarde du côté de "text-overflow : ellipsis;" (CSS)

  4. #4
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Février 2007
    Messages
    40
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 40
    Points : 30
    Points
    30
    Par défaut
    Merci pour la proposition, mais ca ne fait que masquer le probleme, ca tronque avec des ...

    Or je voudrais que cela s'affiche dans sa totalité, mais sur plusieurs lignes si necessaire

  5. #5
    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 672
    Points
    66 672
    Billets dans le blog
    1
    Par défaut
    text-wrap ?

    en tout cas ce n'est pas un problème javascript à moin que tui ne veuilles calculer la largeur occupée par le texte ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. [SQL] Besoin d'aide sur une requête
    Par Angath dans le forum Langage SQL
    Réponses: 2
    Dernier message: 17/01/2006, 16h26
  2. besoin d'aide sur une requette sql
    Par maxidoove dans le forum Langage SQL
    Réponses: 13
    Dernier message: 10/10/2005, 18h42
  3. Besoin d'aide sur une fonction
    Par PrinceMaster77 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 30/08/2005, 17h40
  4. Réponses: 1
    Dernier message: 03/08/2005, 11h41
  5. Besoin d'aide sur une requête (JOIN + COUNT ?)
    Par PanzerKunst dans le forum Langage SQL
    Réponses: 2
    Dernier message: 01/06/2005, 10h29

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