• Résolu Image 2 apparaît dans fenêtre au survol de image 1 ?


    Jeudi 9 Août à 14:43
    Mayouri

    Bonjour 

    C'est un peu frustrant parce que je suis certaine que le sujet a déjà été traité , c'est obligé: pourtant je ne trouve que des topics qui se rapprochent de l'effet souhaité .

     

    Je précise que je ne sais pas comment on s'y prend pour applisuer un code en Css , si il existait une solution en html , ce serait plus simple pour moi  ...

    J'aimerais partager certains de mes motifs géométrique pour Gimp : pour que ce soit plus clair , je voudrais afficher  les motifs sur une page , quand le visiteur survol un motif , le rendu du motif appliqué apparaît dans une nouvelle fenêtre ! Comme ça , on voit en direct si on prends ou pas le motif .

    En gros , on survole image 1 et image 2 apparaît dans une fenêtre à part .

     J'ai trouvé un petit bout de code tout simple , à ma portée , qui permet de remplacer image 1 par image 2 mais pas de l'afficher dans une nouvelle fenêtre : c'est possible de faire ça en html ?

     

    Voilà

    Merci à ceux qui voudront bien répondre !

    Bonne journée 

     

     

     

     

     

    Vendredi 10 Août à 07:49
    Pipiou

    Bonjour,

    il faut probablement indiquer dans le html un truc du genre

    href="adresse de l'image" target="_blank"

    et ce pour chaque image/lien.

    il y a peut-être un codage + pratique si toutes les images sont dans le même article ? à savoir : indiquer que dans l'article en question [module_contenu_articlesxxxxxx] (où xxxx = n° affecté à l'article] les liens img ont pour cible _blank ? (mais ça risque de s'appliquer à toutes les img...)

    Quelqu'un pour confirmer ?

     

    Vendredi 10 Août à 11:16
    Mayouri

    Salut Pipiou !

    Merci de ta réponse !

     

    Ca me dérange pas si il faut mettre le code autant de fois qu'il y a de motifs ( il n'y en aura pas 20 non plus )

     

    Je suis nulle en code , je trouve des codes tout prêt à l'emploi moi (-_-)"

     

    Si je mets <a href="URL DU LIEN IMAGE2" target="_blank"><img src="URL DE L'IMAGE 1"  /></a> = chaque image aura un lien  , il faudra cliquer dessus l'image 1 pour accéder à l'image 2 .

     

    Ou surement  j'ai pas compris ce que tu voulais dire ...

     

    Ce que je voudrais , c'est que l'image 2 apparaisse dans une fenêtre , sans remplacer l'image 1 si c'est possible du moins .  Un peu comme une infobulle en fait , mais à la place du texte , ce serait une image !

     

    Merci d'être passé répondre en tout cas !

     

    Edit : J'ai bien pensé à faire un simple tableau mais pour bien voir un rendu , il faudrait que les images soient d'assez grandes tailles , ça risque de faire une page très surchargées , surtout si j'ajoute des motifs de temps en temps 

     

     

    Samedi 11 Août à 08:58
    Pipiou

    pour moi  il suffit de mettre un lien sur image1 qui dirigera vers l'image2, l'image2 s'ouvrant en nouvelle fenêtre. (ou alors j'ai rien compris, c'est possible aussi he)

    c'est toujours + facile quand on on peut voir/tester/valider les liens et images en question :

    peux-tu indiquer le lien de l'article où ces images sont visibles ?

     

    Samedi 11 Août à 09:36
    stormalo

    Bonjour Pipiou.

    Bonjour Mayouri,   

    Ce que je voudrais , c'est que l'image 2 apparaisse dans une fenêtre , sans remplacer l'image 1 si c'est possible du moins .  Un peu comme une infobulle en fait , mais à la place du texte , ce serait une image !

    Fenêtre et infobulle c'e n'est pas la même chose ! smile

    -------------------------------------------------------------------------------------------------------

    Si c'est  obtenir une image dans une infobulle ET si l'autorisation d'insérer du code  Javascript à été accordée par le staff, essaye ce principe de codage :

    <p>Texte éventuel <img onmouseover="Help.bubble(this,' &lt;img src=\'adresse de l'image qui apparaitra dans une bulle\'&gt;&lt;/img&gt;')" src="adresse de la vignette image à survoler" alt="" />texte éventuel</p>

    Surligné en jaune, c'est du code en langage Javascript.

     Surligné en bleu, c'est du code html

     Utiliser de préférence des images stockées sur eklablog (ekladata.com) car le dimensionnement est plus facile (en utilisant @--X--.jpg en fin d'url  ; par ex @250x250.jpg pour obtenir un format  carré de 250px)

     Pour simple info, concernant le code Javascript:
    &lt; signifie <
    &gt; signifie >
    \"  signifie "  ( " commedu texte )
    \'  signifie '  ( ' comme du texte )

    Samedi 11 Août à 13:10
    Mayouri

    Merci pour vos réponses !

     

    @Pipiou : En fait , en cliquant sur les vignettes , on les récupère à la taille réelle déjà ... C'est pour ça , pouvoir se faire une idée juste en survolant les différents motifs , ça auraient été pratique ( j'ai mis les motifs sans les rendus en attendant de trouver une solution : article )

     

    @stormalo 

    Super ! Merci beaucoup , je vais essayer ça ! Merci pour le "décortiquage" pour les nuls , c'est tout noté qu'est ce qu'il faut remplacer et par quoi , je devrais y arriver sans problème !!! cool

    Je passerai mettre le topic en résolu si ça a marché !

    Merci !!!! 

    Edit : Ca marche ! Merci beaucoup !!!! Je vais pouvoir installer tout ça , chouette !

     

    Lundi 13 Août à 08:30
    Pipiou

         

     




    Vous devez être membre pour poster un message.