Rechercher : dans
Par :

Rollover avec taille d'image différente

Dernière réponse le 3 mar 2009 à 01:55:31 lilius, le 22 fév 2009 à 13:06:58 
 Signaler ce message aux modérateurs

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...

Configuration: Mac OS X
Firefox 3.0.6

Meilleures réponses pour « rollover avec taille d'image différente » dans :
Diminuer la taille d'une image VoirSi vous trouvez que vos photos sont trop grosses ou trop lourdes (par exemple pour envoyer par mail ou pour publier sur une page web), voici 4 étapes pour diminuer la taille des fichiers: Étape 1 (optionnel !) : Passer GREYCStoration sur...
Optimiser la taille des images PNG VoirOn peut optimiser de manière importante la taille des fichiers PNG, ce qui est particulièrement intéressant pour les pages web. La méthode décrite ci-dessous permet de réduire les fichiers PNG en moyenne à 40% de leur taille originale. Comment...
LaTeX - Insertion d'images VoirStyle LaTeX permet d'insérer des images de différents formats. Le plus simple est d'insérer des fichiers de type eps (Encapsuled Postscript) : Il suffit d'insérer dans le préambule la ligne suivante : \usepackage{graphicx} Puis d'insérer...
Webmastering - Ergonomie d'un site web VoirNotion d'ergonomie L'ergonomie est l'utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) dans le but d'améliorer son environnement de travail. L'ergonomie se caractérise généralement selon deux...
Compression JPEG VoirLa compression JPEG L'acronyme JPEG (Joint Photographic Expert Group prononcez jipègue ou en anglais djaypègue) provient de la réunion en 1982 d'un groupe d'experts de la photographie, dont le principal souci était de travailler sur les façons de...

1

ayrton, le 25 fév 2009 à 20:54:16
  • +1

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.

Répondre à ayrton

2

 lilius, le 3 mar 2009 à 01:55:31

Vraiment merci beaucoup, je crois que je dois me plonger encore plus en profondeur dans le code si je veux que mon site ressemble à quelque chose, je te remercie encore.
A une prochaine question...^^

Répondre à lilius