Galerie photo onmouseover
lauvizh
-
lauvizh -
lauvizh -
Bonjour, c'est la première fois que j'écris sur ce forum. J'ai commenc por le première fois un site il y a une semaine, je n'y connait pas grand chose,mais jusqu'ici ça marche comme je le voulais. Une petite chose, cependant, j'ai décidé de mettre une galerie photo sur le principe du onmouseover, juqu'ici tout va bien. La seule petite chose est que l'image agrandie ne peut pas être fixée. Elle se place indépendamment des tableaux,... et donc quand on change de résolution et que donc la page n'est plus centrée de la même manière, l'image agrandie est placée à un autre endroit. Dans ce cas, il est impossible d'organiser une mise en page correcte pour ma page.
Quelqu'un a une petite idée? Comment est)ce que je pourrais fixer cette image dans un cadre ou quoi, pour qu'elle suive "l'évolution" de mon site.
Merci beaucoup pour votre aide.
Voici le script utilisé ( trouvé ici même).
Dans le <head>
Quelqu'un a une petite idée? Comment est)ce que je pourrais fixer cette image dans un cadre ou quoi, pour qu'elle suive "l'évolution" de mon site.
Merci beaucoup pour votre aide.
Voici le script utilisé ( trouvé ici même).
Dans le <head>
<SCRIPT LANGUAGE="JavaScript"><!--
function afficheMaxiTempo(chemin){
i1 = new Image;
i1.src = chemin;
html = '<HTML><HEAD><TITLE>Photos</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=image1 onLoad="window.resizeTo(document.image1.width+14,document.image1.height+32)"></CENTER></BODY></HTML>';
popupImage = window.open('','popupImage','toolbar=0,location=0,directories=0,menubar=0,scrollbars=0,resizable=1');
popupImage.document.open();
popupImage.document.write(html);
popupImage.focus();
popupImage.document.close();
//FermePopup();
}
function FermePopup(){
popupImage.document.write('<script language="javascript">');
popupImage.document.write('setTimeout(');
popupImage.document.write('"self.close()');
popupImage.document.write(';",5000)');
popupImage.document.write('</');
popupImage.document.write('script>');
}
//-->
</SCRIPT>
A l'endroit de l'image
<A HREF="javascript:void(0)" onMouseOver="afficheMaxiTempo('ton image agrandie.jpg'); return false;" onMouseOut="img01.src='ton image vignette.jpg'"><IMG SRC="ton image vignette.jpg" NAME="img01" ALT="Nom de ton image" BORDER=0 onLoad="tempImg=new Image(0,0); tempImg.src='ton image vignette.jpg'"></A>
A voir également:
- Galerie photo onmouseover
- Google photo - Télécharger - Albums photo
- Galerie photo en ligne gratuite - Guide
- Comment masquer une photo dans la galerie - Guide
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
- Google maps photo maison - Guide
2 réponses
Salut,
Si j'étais toi, j'utiliserais un tableau en précisant la taille des cellules et en faisant attention que chaque vignette agrandie fase la même taille.
Je te donne pour ma part le code que j'utilise.
Dans le header:
Dans le body:
Désolé la flême de remettre en forme ce code. En tout cas le tableau du haut est pour la galerie et le tableau du bas pour ta photo agrandie.
A+
Si j'étais toi, j'utiliserais un tableau en précisant la taille des cellules et en faisant attention que chaque vignette agrandie fase la même taille.
Je te donne pour ma part le code que j'utilise.
Dans le header:
<script type="text/javascript">
function afficher(a,b)
{
if (document.images)
a.src=b;
}
</script>
Dans le body:
<table border="0" class="tab_d2" background="images/fond_cellules_demol.jpg" height="231px" cellspacing="0"> <tr align="right"> <td><span onMouseOver="afficher(big1, 'images/demolition/ouen_1_big.jpg')"; onMouseOut="afficher(big1, 'images/demolition/defaut_ouen.jpg')";> <img src="images/demolition/ouen_1.jpg" border="0" /> </span> <span onMouseOver="afficher(big1, 'images/demolition/ouen_2_big.jpg')"; onMouseOut="afficher(big1, 'images/demolition/defaut_ouen.jpg')";> <img src="images/demolition/ouen_2.jpg" border="0" /> </span> <span onMouseOver="afficher(big1, 'images/demolition/ouen_3_big.jpg')"; onMouseOut="afficher(big1, 'images/demolition/defaut_ouen.jpg')";> <img src="images/demolition/ouen_3.jpg" border="0" /> </span> </td> </tr> <tr> <td> <span onMouseOver="afficher(big1, 'images/demolition/ouen_4_big.jpg')"; onMouseOut="afficher(big1, 'images/demolition/defaut_ouen.jpg')";> <img src="images/demolition/ouen_4.jpg" border="0" /> </span> <span onMouseOver="afficher(big1, 'images/demolition/ouen_5_big.jpg')"; onMouseOut="afficher(big1, 'images/demolition/defaut_ouen.jpg')";> <img src="images/demolition/ouen_5.jpg" border="0" /> </span> <span onMouseOver="afficher(big1, 'images/demolition/ouen_6_big.jpg')"; onMouseOut="afficher(big1, 'images/demolition/defaut_ouen.jpg')";> <img src="images/demolition/ouen_6.jpg" border="0" /> </span> </td> </tr> <tr> <td> <span onMouseOver="afficher(big1, 'images/demolition/ouen_7_big.jpg')"; onMouseOut="afficher(big1, 'images/demolition/defaut_ouen.jpg')";> <img src="images/demolition/ouen_7.jpg" border="0" /> </span> <span onMouseOver="afficher(big1, 'images/demolition/ouen_8_big.jpg')"; onMouseOut="afficher(big1, 'images/demolition/defaut_ouen.jpg')";> <img src="images/demolition/ouen_8.jpg" border="0" /> </span> <span onMouseOver="afficher(big1, 'images/demolition/ouen_9_big.jpg')"; onMouseOut="afficher(big1, 'images/demolition/defaut_ouen.jpg')";> <img src="images/demolition/ouen_9.jpg" border="0" /> </span> </td> </tr> </table> <table border="1" class="tab_g2" cellspacing="0" bordercolor="#EEC7A0"> <tr> <td width="300px" height="225px"> <img src="images/demolition/defaut_ouen.jpg" border="0" name="big1" align="middle" /> </td> </tr> </table>
Désolé la flême de remettre en forme ce code. En tout cas le tableau du haut est pour la galerie et le tableau du bas pour ta photo agrandie.
A+
