High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

Galerie photo onmouseover

Dernière réponse le 15 jan 2007 à 16:47:28 lauvizh, le 13 jan 2007 à 12:14:02 
 Signaler ce message aux modérateurs

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

Posez votre question Répondre

1

Aquel, le 13 jan 2007 à 15:33:42
  • +1

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

2

 lauvizh, le 15 jan 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
Ils ont besoin de votre aide