HELP survol
Fermé
cindyh
-
19 juin 2008 à 22:02
alexdelareunion Messages postés 544 Date d'inscription dimanche 18 mars 2007 Statut Membre Dernière intervention 24 février 2012 - 21 juin 2008 à 12:10
alexdelareunion Messages postés 544 Date d'inscription dimanche 18 mars 2007 Statut Membre Dernière intervention 24 février 2012 - 21 juin 2008 à 12:10
5 réponses
alexdelareunion
Messages postés
544
Date d'inscription
dimanche 18 mars 2007
Statut
Membre
Dernière intervention
24 février 2012
142
19 juin 2008 à 22:19
19 juin 2008 à 22:19
tu dois utiliser du Javascript. Tu trouvera peut être des exemples sur http://www.editeurjavascript.com/
alexdelareunion
Messages postés
544
Date d'inscription
dimanche 18 mars 2007
Statut
Membre
Dernière intervention
24 février 2012
142
19 juin 2008 à 23:44
19 juin 2008 à 23:44
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
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ç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çois Construction</font>
<font face="Times New Roman" size="5" color="#6699FF">
<marquee bgcolor="#E1E1E1">Spécialiste de la maison personnalisé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">
</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)">
</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 © 2008 SPRL François Construction - Tous droits réservés.</font>
</span>
</p>
</body>
</html>
alexdelareunion
Messages postés
544
Date d'inscription
dimanche 18 mars 2007
Statut
Membre
Dernière intervention
24 février 2012
142
20 juin 2008 à 22:47
20 juin 2008 à 22:47
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'
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
merci
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
alexdelareunion
Messages postés
544
Date d'inscription
dimanche 18 mars 2007
Statut
Membre
Dernière intervention
24 février 2012
142
21 juin 2008 à 12:10
21 juin 2008 à 12:10
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 :
- remplacé par ça :
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 :)
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ç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çois Construction</font>
<font face="Times New Roman" size="5" color="#6699FF">
<marquee bgcolor="#E1E1E1">Spécialiste de la maison personnalisé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">
</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)">
</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 © 2008 SPRL François Construction - Tous droits réservés.</font>
</span>
</p>
</body>
</html>