HTML : besoin de votre avis

Résolu

loicDu28 Messages postés 332 Date d'inscription Statut Membre Dernière intervention -
loicDu28 Messages postés 332 Date d'inscription Statut Membre Dernière intervention - 28 mars 2009 à 21:19

Bonjour,

Je suis entrain de réaliser un site web en HTML et je souhaiterais avoir vos avis, vos conseils sur un point.

Je souhaite avoir une page avec des imagettes et lorsqu'on clique dessus, cela les affiches en taille normal.
J'ai trouvé le code HTML suivant :

<a href="image/NotreRencontre/ma puce.jpg" retour><img src="image/NotreRencontre/ma puce.jpg" width="50"/></a>

Je souhaiterais avoir votre avis, vos conseil, votre aide sur les choses suivantes c'est à dire que j'hésite entre plusieurs choses :
1) lorsqu'on clique sur l'imagette, elle s'affiche en taille normal à côté c'est à dire séparer la page en deux. Côté gauche les imagettes et côté droit les photos en taille normal (avec bouton pour choissir image suivante ou précédente).
2) lorsqu'on clique sur l'imagette, elle s'affiche dans une page (nouvelle onglet) en taille normal avec un lien permettant le retour et que la page ne soit pas en grande.(un peu comme quand on clique sur une photo d'un skyblog).
3) lorsqu'on clique sur l'imagette, elle s'affiche en taille normal c'est à dire sur la même page (à la place de la page ou se situe les imagettes.) comme cela se fais pour le moment. Mais si je choisit cette solutions, j'aimerai avoir un lien retour.

Quelle solutions me conseiller vous?? Avez vous des exemples de codes ou des conseil à me faire parvenir pour la solution??

Merci d'avance

Afficher la suite

A voir également:

HTML : besoin de votre avis
Editeur html - Télécharger - HTML
Espace html ✓ - Forum HTML
[**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
/Var/www/html/index.html ✓ - Forum Linux / Unix
Html download - Télécharger - HTML

1 réponse

Réponse 1 / 1

loicDu28 Messages postés 332 Date d'inscription Statut Membre Dernière intervention 53

bonjour,

j'ai trouvé la solution, voici le code que j'utilise :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<embed src="music/Anais-MonCoeuMonAmour.mp3" autostart="true" loop="1" hidden="true"></embed>  
<title>
	notre rencontre
</title>
<script language="javascript" type="text/javascript">
//maxi est le repertoire des images grands formats
//mini est le repertoire des images petits formats

function AfficheMaxi(a)
{
	document.getElementById('ZonePrMaxi').src = 'image/NotreRencontre/'+a;
}
</script>
<style>
#img_menu img
{
	border: 1px solid black;
	margin-bottom: 5px;
	margin-top: 5px;
	cursor: pointer;
	vertical-align: top;
}

#image_clignotant
{
	text-align:center;
}
</style>
</head>
<body background="fond_ecran-amour/coeur-1139259557.jpg">
<div id="image_clignotant">
	<img src="image/Titre_clignotant.gif"/>
</div>
<table border="1" align="center">
  <tr>
    <td id="img_menu">
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('Marie Pineau.jpg')"><img src="image/NotreRencontre/Marie Pineau.jpg" id="test" width="100" height="80" alt="Ma puce" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('ptite foto au park.jpg')"><img src="image/NotreRencontre/ptite foto au park.jpg" id="test" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('ma puce.jpg')"><img src="image/NotreRencontre/ma puce.jpg" id="test" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('image10.jpg')"><img src="image/NotreRencontre/image10.jpg" id="test" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('Image 2.jpg')"><img src="image/NotreRencontre/Image 2.jpg" id="test" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('mi lycé.bmp')"><img src="image/NotreRencontre/mi lycé.bmp" id="test" width="100" height="80" alt="elle" /></a><br/>
	</td>
	<td width="700" height="500" align="center">
		<img id="ZonePrMaxi" src="image/NotreRencontre/Marie Pineau.jpg" alt=""  />
	</td>
	<td id="img_menu">
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('moi + casque.jpg')"><img src="image/NotreRencontre/moi + casque.jpg" id="test" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('149753303.jpg')"><img src="image/NotreRencontre/149753303.jpg" id="test" width="100" height="80" alt="elle" /></a><br/>
		<a href="javascript:void(0)" onmouseover="AfficheMaxi('100_0518.JPG')"><img src="image/NotreRencontre/100_0518.JPG" id="test" width="100" height="80" alt="elle" /></a>
	</td>
  </tr>
</table>

Lorsque je t'es vu sur ce blog, mon coeur s'est emballé soudainement par ta beauté fatale!!
</body>
</html>

Ce code me permet d'avoir 3 colonnes dont les 2 de chaque extrémité corresponde o image en taille réduite et celle du milieu, l'image en taille réel.

onmouseover permet d'afficher l'image en grand en faisant simplement glisser la souris sur l'imagette.

Cordialement

Discussions similaires

Votre réponse

Discussions similaires