Galerie photo onmouseover

Fermé

lauvizh - 13 janv. 2007 à 12:14
lauvizh - 15 janv. 2007 à 16:47

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>

<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
Galerie photo en ligne gratuite - Guide
Photo aérienne de ma maison - Guide
Traduction photo - Guide
Photo filtre 7 gratuit - Télécharger - Retouche d'image
Photo de profil - Guide

2 réponses

Réponse 1 / 2

Aquel Messages postés 199 Date d'inscription lundi 28 novembre 2005 Statut Membre Dernière intervention 1 octobre 2009 10
13 janv. 2007 à 15:33

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:

<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+

Réponse 2 / 2

lauvizh
15 janv. 2007 à 16:47

Je ne sais pas pourquoi mon message de hier n'est pas passé. Bref, merci à toi je vais essayer ave ça.

Discussions similaires

Dissocier les photos de ma galerie sur Google Photos

Ne plus lier galerie et google photos

Connaitre la date d'une photo.