Rollover avec taille d'image différente
lilius
Messages postés
1
Statut
Membre
-
lilius -
lilius -
Bonjour, je suis sur dreamweaver, j'essaye de faire un rollover sur une image, seulement j'ai plusieurs contraintes. J'ai un tableau dedans j'ai 6 liens sur chacun de mes liens (lien image)je voudrais un rollover qui fasse apparaître une image plus grande à coté de mes liens...mais bien-sûr chaque lien a une image différente. j'ai regardé pas mal de forum et tout ce que j'ai trouvé se résume à agrandir une image grâce au rollover...Vous pourriez m'aider s'il vous plaît? Je ne suis qu'une pauvre débutante qui galère :-p et je suis désolée si la question a déjà été posée.
merci d'avance...
merci d'avance...
A voir également:
- Rollover avec taille d'image différente
- Comment réduire la taille d'un fichier - Guide
- Reduire taille image - Guide
- Image iso - Guide
- Afficher taille dossier windows - Guide
- Taille 32x32 correspondance - Forum Windows
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.
A une prochaine question...^^