Galerie photo onmouseover

lauvizh, le samedi 13 janvier 2007 à 12:14:02

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>

Configuration: Windows XP
Firefox 1.5.0.7

Répondre à lauvizh Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Aquel, le samedi 13 janvier 2007 à 15:33:42

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épondre à Aquel

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

lauvizh, le lundi 15 janvier 2007 à 16:47:28

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

Répondre à lauvizh

Posez votre question Répondre