javascript

Discussion dans 'Programmation' créé par ScoRPinA, 19 Avril 2012.

  1. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
    salaam chkon kay9ch3 chwiya f javascript y3t9ni <D

    supposons 3ndi plusieurs images a chak fois ke je passe le curseur de la souris sur une d'elles taficha liya f un autre cadre(tableau ou une div)

    des idees :confused::confused:

     
  2. RedEye

    RedEye - أبو عبدالرحمن - Membre du personnel

    J'aime reçus:
    4153
    Points:
    113
    dak le cadre dialek finahowa par rapport aux images, 7dahoum awla un peu plus loin dans la page ?? wash bgitiha tafficha aggrandie ??
     
  3. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
    nn cadre hdahom wé bghitha tafficha agrandie
     
  4. RedEye

    RedEye - أبو عبدالرحمن - Membre du personnel

    J'aime reçus:
    4153
    Points:
    113
    si tu veux un truc basic, il te faudra 2 images, une pour la vignette, et une aggrandie..
    sinon tu cherche un plugin jquery, qui te donnera des options de zoom, sur tous les détails de l'image.

    pour le premier cas, tu dois jouer sur les évènements "mouse over" et "mouse out", créer une image transparent awla fiha que du blanc et l'utiliser comme par défaut dans le cadre.
    dans l'évenement "mouse over", tu fais appel à une fonction via l'attribut html "onmouseover" du tag "<img>", dans le quel tu charge dans l'image du cadre aggrandie, l'image correspondante à la vignette
    et quand la souris quitte ta vignette, c l'évenement "mouse out" qui se produit, et pour l'exploiter, tu fais appel via l'attribut "onmouseout" du tag "<img>", à une fonction javascript qui rétablira dik l'image par défaut.

    tu t'y retrouve awla mazal ??
     
  5. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
    d'acc je vé modifier le code knt dayra les images comme background image des <div>
    merci bcp RedEye :eek:
     
  6. RedEye

    RedEye - أبو عبدالرحمن - Membre du personnel

    J'aime reçus:
    4153
    Points:
    113
    ana 3titek le plus basique du javascript..

    tu peux aussi jouer sur des divs, en les mettant comme background
     
  7. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
    le probleme onmouseover makatkhdmch f les div
     
  8. RedEye

    RedEye - أبو عبدالرحمن - Membre du personnel

    J'aime reçus:
    4153
    Points:
    113
    onmouseover et onmouseout tu les utilise f les tags <img< des vignettes

    et la <div< tu l'utilise au lieu de <img> pour l'image aggrandie
     
  9. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
  10. RedEye

    RedEye - أبو عبدالرحمن - Membre du personnel

    J'aime reçus:
    4153
    Points:
    113
  11. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
    [MENTION=80]RedEye[/MENTION] ca y est ca marche <D merci bcp :eek::eek:
     
  12. RedEye

    RedEye - أبو عبدالرحمن - Membre du personnel

    J'aime reçus:
    4153
    Points:
    113
    3ala ro7bi wa sa3a

    comme j'ai dis l'exemple que je t'ai fourni est du basique, tu peux remplacer le tag <img> de l'image grande, par un <div> et bien sûr modifié le code dans les fonctions javascript pour remplacer l'arrière plan, sauf que dans ce cas, il faudra fournir la hauteur et largeur dans la fonction du mouseover, pour les attribuer à la div, sinon l'image en arrière plan ne s'affichera pas..ou bien, fixer la largeur et hauteur de la div dans le css à des valeurs maximales, et lors de l'affichage de l'image en arrière plan l'afficher centrée, en jouant sur l'attribut "background-position" du CSS en le mettant à "center center".

    à noter que tu peux faire cela et plus en utilisant jQuery..et aussi qu'il y a des plugins jQuery, concernant l'affichage des images, les galleries, le zoom sur les images, etc, une recherche sur google t'aidera..

    autre chose, en javascript pour afficher une image, il faut que celle-ci soit préchargée avec la page lors de l'accès à celle-ci, cela va amrcher rapidement car tu fais le test en local, par contre en ligne ça va prendre un peu de temps à charger l'image aggrandie
     
  13. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
    yalah chft l'exemple il est tres interessant srt ana jé modifié le code tani je suis entrain de travailler avec un tableau

    daba kandir formation en javascript 3ad ndoz l jquery wa7da wa7da <D<D
     
  14. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
    jé une autre question si les images sont stockees en bd mysql ??:confused:
     
  15. RedEye

    RedEye - أبو عبدالرحمن - Membre du personnel

    J'aime reçus:
    4153
    Points:
    113
    donc ce cas c dimanique lool ktabtba w 3gazt nse7a7ha <D

    ça va rester la même chose
    c juste, que tu va charger les vignettes par exemple :
    PHP:
    <?php
    foreach ($images as $image) {
    echo 
    '<img src="'.$image->nom_fichier.'" onmouseout="outImage();" onmouseover="overImage(this.src)" />'."\n";
    }
    ?>
     
  16. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83


    mafhmtch <(
     
  17. RedEye

    RedEye - أبو عبدالرحمن - Membre du personnel

    J'aime reçus:
    4153
    Points:
    113
    les images sont stockées comment dans la base mysql ??
     
  18. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
    jé stocké le chemis des images ,
    jé trouvé qu'on peutaussi les stocker sous forme de blob
     
  19. RedEye

    RedEye - أبو عبدالرحمن - Membre du personnel

    J'aime reçus:
    4153
    Points:
    113
    oui bah voilà, comme je t'ai montré dans le code, je suppose que le nom de ta table est "images" et, le champ du chemin est "chemin" alors ton code sera comme ça :

    PHP:
    <?php
    $q 
    "SELECT * FROM images";
    $r mysql_query($q);
    while (
    $row mysql_fetch_object($r)) {
    echo 
    '<img src="'.$row->chemin.'" onmouseout="outImage();" onmouseover="overImage(this.src);" />'."\n";
    }
    ?>
     
  20. ScoRPinA

    ScoRPinA Accro

    J'aime reçus:
    393
    Points:
    83
    d'acc hana ghanchof :eek::eek:
     

Partager cette page