Rollover+popup

Statut
N'est pas ouverte pour d'autres réponses.

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...
 
1er
OP
julien_

julien_

harkor.be
Bon voilà mon code que j'utilise

rollover
<a onMouseOver="i132818.src='img_test.jpg'" onMouseOut="i132818.src='Blog__03.jpg'">
<img src="Blog__03.jpg" BORDER="0" NAME="i132818" ALT HSPACE="0" VSPACE="0" width="123" height="92":colere:/a>
Popup
<head>
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
titre="Popup Image - Tout Javascript.com";
w=open("",'image','width=400,height=400,toolbar=no,scrollbars=no,resizable=yes');
w.document.write("<HTML:colere:HEAD:colere:TITLE>"+titre+"</TITLE:colere:/HEAD>");
w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+12,document.images[0].height+30); window.focus();} else { setTimeout('check()',250) } }</"+"SCRIPT>");
w.document.write("<BODY onload='checksize()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0:colere:IMG src='"+img+"' border=0>");
w.document.write("");
w.document.write("</BODY:colere:/HTML>");
w.document.close();
}
</SCRIPT>
</head>
<body>
<A href="javascript:popupImage('img_test_fr.jpg')":colere:img src="img_test.jpg" BORDER=0 NAME="i132818" ALT="" HSPACE=0 VSPACE=0 width="123" height="92"</a>
</body>
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
 

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
 

Soulsight

Elite
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 a dit:
<a href="#" onClick="tonscript" ..> ( je crois que c'est déprécié ca :p )
Non, c'est apprécié. Il faut seulement voir ce que tu codes et comment tu le fais ;)
 
M

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
 
1er
OP
julien_

julien_

harkor.be
Medievilster a dit:
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
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
 
M

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?
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut