Rollover avec taille d'image différente
Fermé
lilius
Messages postés
1
Date d'inscription
dimanche 22 février 2009
Statut
Membre
Dernière intervention
22 février 2009
-
22 févr. 2009 à 13:06
lilius - 3 mars 2009 à 01:55
lilius - 3 mars 2009 à 01:55
A voir également:
- Rollover avec taille d'image différente
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Taille 32x32 correspondance ✓ - Forum Loisirs / Divertissements
- Réduire taille pdf - Guide
- Recherche par image - Guide
- Image iso - Guide
1 réponse
Bonjour
Avec un petit javascript :
<script language="javascript">
function montre(nomFichier) {
x = document.getElementsByName("fullview"); // retourne un tableau de valeurs
x[0].src = nomFichier;
x = document.getElementById("content-fullview"); // affiche le container
x.style.zIndex = 1;
}
</SCRIPT>
un peu de CSS :
<style type="text/css">
.zoom td {
text-align:center;
}
.miview {
width:146px; /*largeur de la grande image*/
height: 110px; /*hauteur de la grande image*/
position: absolute;
right: 100px; /*position par rapport à la droite de ton div de la grande image*/
top: 10px; /*position par rapport au haut de ton div de la grande image*/
visibility:visible;
}
</style>
et le HTML :
<div class="zoom">
<div id="content-fullview" style="z-index: -1">
<div id="content-sub-2">
<table width="60%" border="0">
<tr>
<td class="zoom"><img src="image1" width="45" height="33" alt="image1" onmouseover='javascript:montre(this.src);'></td> //1ère image
</tr>
<tr>
<td class="zoom"> <img src="image2" width="45" height="33" alt="image2" onmouseover='javascript:montre(this.src);'> </td> //2ème image
</tr>
<tr>
<td class="zoom"><img src="image3" width="45" height="33" alt="image3'" onmouseover='javascript:montre(this.src);'></td> //3ème image et ainsi de suite
</tr>
</table>
<div class="miview"><img name="fullview" src="transparent.gif" alt="full view" />
</div>
</div>
</div>
</div>
Pour le "transparent.gif" on peut créer un GIF transparent mais ce n'est pas nécessaire, il suffit de donner un nom d'image bidon dans src.
Je ne l'ai fait qu'avec 3 images mais le nombre n'est pas limité.
J'espère que cela t'aidera.
Avec un petit javascript :
<script language="javascript">
function montre(nomFichier) {
x = document.getElementsByName("fullview"); // retourne un tableau de valeurs
x[0].src = nomFichier;
x = document.getElementById("content-fullview"); // affiche le container
x.style.zIndex = 1;
}
</SCRIPT>
un peu de CSS :
<style type="text/css">
.zoom td {
text-align:center;
}
.miview {
width:146px; /*largeur de la grande image*/
height: 110px; /*hauteur de la grande image*/
position: absolute;
right: 100px; /*position par rapport à la droite de ton div de la grande image*/
top: 10px; /*position par rapport au haut de ton div de la grande image*/
visibility:visible;
}
</style>
et le HTML :
<div class="zoom">
<div id="content-fullview" style="z-index: -1">
<div id="content-sub-2">
<table width="60%" border="0">
<tr>
<td class="zoom"><img src="image1" width="45" height="33" alt="image1" onmouseover='javascript:montre(this.src);'></td> //1ère image
</tr>
<tr>
<td class="zoom"> <img src="image2" width="45" height="33" alt="image2" onmouseover='javascript:montre(this.src);'> </td> //2ème image
</tr>
<tr>
<td class="zoom"><img src="image3" width="45" height="33" alt="image3'" onmouseover='javascript:montre(this.src);'></td> //3ème image et ainsi de suite
</tr>
</table>
<div class="miview"><img name="fullview" src="transparent.gif" alt="full view" />
</div>
</div>
</div>
</div>
Pour le "transparent.gif" on peut créer un GIF transparent mais ce n'est pas nécessaire, il suffit de donner un nom d'image bidon dans src.
Je ne l'ai fait qu'avec 3 images mais le nombre n'est pas limité.
J'espère que cela t'aidera.
3 mars 2009 à 01:55
A une prochaine question...^^