En-tete Astuces divers html et css
Classic Moderne

Zoom avec Pop-Up sur une image:

But : Lorsque l'on cliquera sur l'image, une fenêtre pop-up apparaitra pour effectuer un zoom.

On devra retailler l'image, pour cela ==> Télécharger Format Factory 3 fr <==

pour réduire vos images

Dans le fichier HTML, je copie le code suivant :


<div class="dauphine">
<a href="#"><img src="picture/dauphine_WinCE.png" BORDER="0" alt="Dauphine à Jacques.H" title="Dauphine à Jacques.H" target="wclose" onclick="window.open('dauphine.html','wclose','width=910,height=780,toolbar=no,status=no,left=20,top=30')"></a>
</div>

Ceci est à appliquer à toute la page.

Remplacez ( Pictures/dauphine_WinCE.png par le nom de votre image rétrécie et son emplacement).
Remplacez ( Pictures/dauphine.png par le nom de votre image d'origine et son emplacement).
Remplacez ( alt="Dauphine à Jacques.H par le nom qui apparaitras si l'image n'apparait pas).
Remplacez ( title="Dauphine à Jacques.H par le nom qui s'afficheras au survole de l'image).
Remplacez ( width=910,height=780 par la taille d'affichage de votre image).
Remplacez ( left=20,top=30 pour le positionnement de l'ouverture du pop-up).

Pour rétrécir votre image, utilisez Image-resizer.



Dauphine à Jacques.H


Maintenant on copie le code suivant dans le fichier CSS :

Pour régler l'emplacement de l'image,
On utilisera les commandes margin,
à laquelle on modifiera les valeurs 30 px,
en fonction de nos besoins. Le code ( background-color: transparent;) permet d'annuler le jaune des liens défini plus haut.


.dauphine
{
float: left; /* L'image flottera à gauche du texte.*/
margin-top : 30px; /*marge extérieure en haut. */
margin-left: 30px; /* marge extérieure à gauche*/
margin-right : 30px; /*marge extérieure à droite */
}

.dauphine a:hover
{
background-color: transparent;/* Le lien seras surligné au passage de la souris */
}

Maintenant dans ma page zoom je copie le code suivant:

<div>
<a HREF="#" > <img src="picture/dauphine.png" BORDER="0" alt="Dauphine à Jacques.H" title="Dauphine à Jacques.H"> </a>
</div>

<br />
<br />

<form method="post">
<p align="center"><input type="button" name="B1"
value="Fermer la fenêtre" onClick="window.close()"></p>
</form>









Haut-de-Page