Sujet Précédent Sujet Suivant

HELP survol

cindyh -  
alexdelareunion Messages postés 555 Statut Membre -
Bonjour,

J'aurais aimé afficher l'agrandissement des images lors du survol de la souris sur la miniature et non pas en cliquant dessus comme c'est le cas maintenant --> http://www.francoisconstruction.webou.net/chantier.html

Sauriez-vous me dire comment je dois faire (pour info je n'y connais pas encore grand chose dans les codes html, et ...)

Et j'utilise le programe frontage pour créer le site.

Merci

5 réponses

Réponse 1 / 5
alexdelareunion Messages postés 555 Statut Membre 142
 
tu dois utiliser du Javascript. Tu trouvera peut être des exemples sur http://www.editeurjavascript.com/
0
Réponse 2 / 5
alexdelareunion Messages postés 555 Statut Membre 142
 
Tu peux utiliser ce code par exemple. Attention a chaque fois que lon survole une image il y a un petit decalage avant qu'elle s'affiche (le temps qu'il faut pour la téléchager).
tu dois aussi respecter une convention de nomage entre tes grandes et petites images, elles doivent etre a la meme adresse et être en JPG (attention les majuscules sont prises en compte). la seule différence ente les grandes et petites images est l'ajout de '_small' à la fin du nom de la petite image 
<html>

<head>
	<meta http-equiv="Content-Language" content="fr">
	<meta name="GENERATOR" content="Gedit 2.22.3">
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Fran&ccedil;ois Construction</title>
	
	<script type="text/javascript">
		
		function afficheImage(srcImage){//fonction qui remplace le parametre scr (adresse) de l'image par un autre
			srcImage = convertSrc(srcImage);//cette fonction appelle la deuxieme pour 'fabriquer' l'adresse de l'image a afficher
		    document.all("img_aff").src=srcImage;
		}
		
		function convertSrc(srcImage){//cette fonction fabrique l'adresse(src) de la grande image a partir de l'adresse de la petite
			x = srcImage.length - srcImage.indexOf("_small.JPG",0);//trouve '_small.JPG'
			y = srcImage.length - x;
			srcImage = srcImage.substring(0,y) + ".JPG";//et remplace le par '.JPG'
			return srcImage;
		}
		
	</script>
	
</head>

<body bgcolor="#E1E1E1">

	<p align="center">
		<i><b>
			<font size="7" face="Times New Roman" color="#6699FF">Fran&ccedil;ois Construction</font>
			<font face="Times New Roman" size="5" color="#6699FF">
				<marquee bgcolor="#E1E1E1">Sp&eacute;cialiste de la maison personnalis&eacute;e</marquee>
			</font>
		</i></b>
	</p>

	<p>
		<iframe name="I2" src="menu.html" scrolling="no" align="left" border="1" frameborder="1" width="125" height="272">
			Votre navigateur ne prend pas en charge les cadres insérés ou est actuellement configuré pour ne pas les afficher.
		</iframe>
	</p>

	<p align="center">
	&nbsp;</p>

	<p align="center">

		
		<img border="0" src="images/chantiers/chantiers3_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers2_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers1_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers4_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers_small.jpg" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers11_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">

	</p>

	<p align="center">

		<img border="0" src="images/chantiers/chantiers5_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers6_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers7_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers8_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers9_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		
	&nbsp;</p>



	<p style="font-size: 10px" align="center">
		<img id="img_aff" src="" width="500" height="500">
	</p>

	<p style="font-size: 10px">
		<span class="Style6">
			<font size="1" color="#990000">Copyright &copy; 2008 SPRL Fran&ccedil;ois Construction - Tous droits r&eacute;serv&eacute;s.</font>
		</span>
	</p>

</body>

</html>
0
cindyh
 
100x Milles merci cela marche du tonnere

Encore un petit truc, comment dois je faire pour que l'agrandissement de soie pas déformer ?? pour les photos en portrait cela est OK mais pour celle en paysage elles sont deformés
0
Réponse 3 / 5
alexdelareunion Messages postés 555 Statut Membre 142
 
le plus simple est de paramétrer la zone 'aff_img' la ou s'affiche l'image avec une taille standard d'image, genre width='640' height='480' et de n'utiliser que des photos préparées à cette taille, si tu veux utiliser des images de fomat différent, il vaut mieux utiliser des balises <iframe> mais dans ce cas le code est à modifier car la propriétés du <iframe> à modifier selon la photo a afficher, n'est pas 'src' mais 'href'
0
Réponse 4 / 5
cindyh
 
Merci pour cette info et est-ce que tu saurais développer un peu plus pour l'utulisation d'images de fomat différent car je ne comprend pas trop.

merci
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
alexdelareunion Messages postés 555 Statut Membre 142
 
Ok, en fait c'était une très petite modif.
J'ai aussi modifié la position du menu en changeant la ligne n°42 :
- ça : 
<p>

- remplacé par ça : 
<p style="position:absolute;">

Si jamais ça pose un probleme d'affichage sur internet explorer, tu peux remettre la ligne comme elle était avant ma modif.

Un conseil, tu devrais modifier la propriété 'src=""' à la ligne 76, pour qu'une image par défaut s'affiche quand on n'a pas encore survolé les photos. c'est celle la : <img id="img_aff" src="" width="" height="">

Encore une petite remarque, vous ne faites pas de prétubage en chape pour l'installation électrique ? Ah je crois avoir compris, ya une deuxième chape, et en plus vous faites l'install avec des pieuvres :) 

<html>

<head>
	<meta http-equiv="Content-Language" content="fr">
	<meta name="GENERATOR" content="Gedit 2.22.3">
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Fran&ccedil;ois Construction</title>
	
	<script type="text/javascript">
		
		function afficheImage(srcImage){//fonction qui remplace le parametre scr (adresse) de l'image par un autre
			srcImage = convertSrc(srcImage);//cette fonction appelle la deuxieme pour 'fabriquer' l'adresse de l'image a afficher
		    monImage = new Image;
		    monImage.src = srcImage;
		    document.all("img_aff").width = monImage.width;
		    document.all("img_aff").height = monImage.height;
		    document.all("img_aff").src=srcImage;
		}
		
		function convertSrc(srcImage){//cette fonction fabrique l'adresse(src) de la grande image a partir de l'adresse de la petite
			x = srcImage.length - srcImage.indexOf("_small.JPG",0);//trouve '_small.JPG'
			y = srcImage.length - x;
			srcImage = srcImage.substring(0,y) + ".JPG";//et remplace le par '.JPG'
			return srcImage;
		}
		
	</script>
	
</head>

<body bgcolor="#E1E1E1">

	<p align="center">
		<i><b>
			<font size="7" face="Times New Roman" color="#6699FF">Fran&ccedil;ois Construction</font>
			<font face="Times New Roman" size="5" color="#6699FF">
				<marquee bgcolor="#E1E1E1">Sp&eacute;cialiste de la maison personnalis&eacute;e</marquee>
			</font>
		</i></b>
	</p>

	<p style="position:absolute;">
		<iframe name="I2" src="menu.html" scrolling="no" align="left" border="1" frameborder="1" width="125" height="272">
			Votre navigateur ne prend pas en charge les cadres insérés ou est actuellement configuré pour ne pas les afficher.
		</iframe>
	</p>

	<p align="center">
	&nbsp;</p>

	<p align="center">

		
		<img border="0" src="images/chantiers/chantiers3_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers2_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers1_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers4_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers_small.jpg" width="100" height="133" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers11_small.JPG" width="100" height="133" onMouseOver="afficheImage(this.src)">

	</p>

	<p align="center">

		<img border="0" src="images/chantiers/chantiers5_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers6_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers7_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers8_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		<img border="0" src="images/chantiers/chantiers9_small.JPG" width="100" height="74" onMouseOver="afficheImage(this.src)">
		
	&nbsp;</p>



	<p style="font-size: 10px" align="center">
		<img id="img_aff" src="" width="" height="">
	</p>

	<p style="font-size: 10px">
		<span class="Style6">
			<font size="1" color="#990000">Copyright &copy; 2008 SPRL Fran&ccedil;ois Construction - Tous droits r&eacute;serv&eacute;s.</font>
		</span>
	</p>

</body>

</html>
0

Discussions similaires

Excel afficher commentaire quand survol de la cellule
NC59260 -
NeCu -

4 réponses
Infobulle survol souris
olivierngoc -
Vaucluse -

4 réponses
Ajout d'un commentaire dans une cellule protégée
titikio -
titikio -

3 réponses
Survol d'une image
remybelleau -
tontong -

1 réponse
Affichage incomplet des ''Commentaires''
Yvouille61 -
eriiic -

8 réponses