Rollover+popup

Discussion dans 'Web, design' créé par julien_, 14 Juillet 2006.

Statut de la discussion:
Fermée.
  1. Offline
    julien_ harkor.be
    Voilà je m'explique... Je crée en fait un blog pour un amis et il aimerait au survol de son image l'image en plus clair lors du passage... Ce que j'ai réussi à faire correctement...
    Mais il voudrait une fois dessus qu'on clic et qu'un popup de 610*460 s'ouvre...

    Mais je n'arrive pas à combiner les deux...
    Si vous pouviez vite regarder à ça.. Après c'est tout ;-D

    image foncée: image_foncee.jpg
    image qui devient claire au passage: image_claire.jpg
    image qui s'ouvre dans le popup: image_gr.jpg

    Je vous remercie d'avance...

    Ps: j'ai pris les script de l'éditeur javascript...
    julien_, 14 Juillet 2006
    #1
  2. Offline
    julien_ harkor.be
    Bon voilà mon code que j'utilise

    rollover
    Popup
    Les deux fonctionnent séparément mais pas sur la même page...
    Si je met les deux sur la même page il n'y a plus que le popup qui fonctionne...
    Et si je combine le code il n'y a que le popup qui fonctionne...

    Voilà si quelqu'un maintenant pourrai m'aider ce serait pas mal
    Merci d'avance
    julien_, 15 Juillet 2006
    #2
  3. Offline
    MbK_ Etudjant
    Le plus simple, c'est d'avoir une seule image que tu redimensionnes lorsqu'elle est en miniature et d'appliquer un filtre d'opacité lorsqu'on passe dessus.

    Apres d'ouvrir un popup lorsqu'on click avec l'image en taille reelle...

    Ca t'évitera d'emcombrer ton serveur avec pleins d'images...

    PS : l'etape suivante pour les miniatures est la librairie GD en PHP mais ca devient plus complexe
    MbK_, 15 Juillet 2006
    #3
  4. Offline
    Soulsight Touriste
    pour le rollover utilise le css :

    a {

    background-image:url('tonimage.jpg');
    display:block;
    width: widthdetonimage;
    height: heightdetonimage;

    }
    a:hover {
    background-image:url('tonimageausurvol.jpg');
    display:block;
    width: widthdetonimage;
    height: heightdetonimage;
    }


    pour le popup : javascript !

    <a href="javascript:tonscriptpopup" ..>

    ou <a href="#" onClick="tonscript" ..> ( je crois que c'est déprécié ca :p )
    Soulsight, 15 Juillet 2006
    #4
  5. Offline
    Loetheri Absent
    Non, c'est apprécié. Il faut seulement voir ce que tu codes et comment tu le fais ;)
    Loetheri, 15 Juillet 2006
    #5
  6. Online
    Medievilster ex membre
    si c'est juste une image plus ou moins claire, utilise la fonction style="filter:alpha(opacity=**)"

    Ca doit donner un truc du genre

    <a href="adresse... ou pop-up":colere:img name="nom de l'image" src="source de ton image" border=0
    style="filter:alpha(opacity=20)"
    onMouseover="this.filters.alpha.opacity=100"
    onMouseout="this.filters.alpha.opacity=20":colere:/a>


    [edit]
    ha oui, pour ton pop-up, pas besoin de 500 lignes de code :p
    <SCRIPT LANGUAGE="JavaScript">
    function pop-up()
    {
    window.open("anges1.htm", "PorteDesAnges", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,width=600,height=500");
    }
    </SCRIPT>

    et tu lances ca avec un onclick par exemple
    Medievilster, 15 Juillet 2006
    #6
  7. Offline
    julien_ harkor.be
    Heu ton code m'a l'air plus clair que les autres mais je ne comprend vraiment pas somme ça... Pourrais tu me faire un exemple sur une page html avec une ou deux images?

    Pour le css je n'ai jamais touché, je ne comprend presque rien mais bon c'est un bête blog donc pas besoin des grands moyens...

    Ps: les script que j'ai eu proviennent de l'éditeur javascript.com
    Merci beaucoup pour vos réponses
    julien_, 15 Juillet 2006
    #7
  8. Online
    Medievilster ex membre
    dans <HEAD:colere:/HEAD> (histoire de rendre ça compatible pour ceux qui n'utilisent pas IE)
    <script language="JavaScript1.2">

    function nom_du_script(cur,which){
    strength=(which==0)? 1 : 0.2

    if (cur.style.MozOpacity)
    cur.style.MozOpacity=strength
    else if (cur.filters)
    cur.filters.alpha.opacity=strength*100
    }

    </script>


    et dans <BODY:colere:/BODY>

    <A HREF="javascript:history.go(0)" OnClick="window.open('folder/nom_dufichier.extention','nom_de_ton_pop-up','width=taille_en_pix,height=taille_en_pix'); return false":colere:img src="folder/ton_image.extention" border=0 style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="nom_du_script(this,0)" onMouseout="nom_du_script(this,1)":colere:/A>

    Au final, tu as une image qui est peu visible (20%, mais tu peux changer ça toi même) qui devient visible à 100% au "mouse over" (passage de la souris) et si tu cliques sur l'image ca ouvre une nouvelle fenêtre sans menus ni rien aux dimentions que tu choisis

    PS : n'oublies pas d'éditer ce qui est en italique

    [edit] qqun peut me dire pourquoi des espaces apparaissent dans mes messages?
    Medievilster, 16 Juillet 2006
    #8
Statut de la discussion:
Fermée.