[résolu] Effet de survol en CSS

Salut tout le monde,

je cherche à faire une fenêtre de visualisation d'images (sans recharger la page). Les images apparaissent dans cette fenêtre en fonction du survol de vignettes qui se trouve sur cette même page.

est ce que quelqu'un connaitrait une technique en CSS permettant de le faire ou un javascript (au pire) ?

La div contenant les vignettes et la div où doit apparaitre les images sont séparée et non-imbriquée l'une dans l'autre.



Merci d'avance.

P.S : J'aimerais poser la question aussi sur css-discuss, mais j'ai toujours pas compris comment on fait pour poster la-bas ?
Modifié par nab_ (01 Apr 2005 - 17:56)

En CSS, ce n'est pas possible car cela implique de devoir modifier des propriétés qui appliquées à des balises "injoingnables" (en gros : c'est pas possible).

En JavaScript, c'est assez simple :

<img src="blank.png" alt="" id="imageOriginale" />

<a href="image1_originale.png" onmouseover="image(this.href);" onclick="return false;"><img src="image1_miniature.png" alt="Texte alternatif" /></a>

<a href="image2_originale.png" onmouseover="image(this.href)" onclick="return false;"><img src="image2_miniature.png" alt="Texte alternatif" /></a>

<a href="image3_originale" onmouseover="image(this.href);" onclick="return false;"><img src="image3_miniature.png" alt="Texte alternatif" /></a>

Voici la fonction :

<script type="text/javascript">
<!--
function image(url)
{
 document.getElementById('imageOriginale').src = url;
}
-->
</script>

Ce code JavaScript est à mettre dans les en-têtes de la page. Si le JavaScript est désactivé, il suffit de cliquer sur l'image pour voir l'originale (j'ai essayé de faire accessible).

ah, c'est beau l'innocence ! Moi qui pensait qu'avec un selecteur spécial et un :hover on pouvait tout faire.

En tout cas merci, ca marche nickel.

Moi je suis persuadé que la FAQ est ton amie et t'évitera d'utiliser javascript
Sinon, les tutoriels sont aussi tes amis

Au passage, c'est le principe que j'utilise pour le menu d'Alsacréations http://www.alsacreations.com/ (sauf que je n'y mets que du texte et pas une image)
Modifié par Raphael (31 Mar 2005 - 15:41)

Personnellement, j'avais compris qu'il voulait modifier l'apparence d'un bloc externe... Bon, on peut toujours faire :

<a class="image1"><span><img src="image1_originale.png" alt="" /></span></a>
<a class="image2"><span><img src="image2_originale.png" alt="" /></span></a>
<a class="image3"><span><img src="image3_originale.png" alt="" /></span></a>

a.image1, a.image2, a.image3 { display: block;
/* Par exemple */ width: 100px; height: 50px;  }
a.image1 { background-image: url(image1.png); }
a.image2 { background-image: url(image2.png); }
a.image3 { background-image: url(image3.png); }
a.image1 span, .image2 span, .image3 span { display: none; }
a.image1:hover span { position: absolute; left: 0; top: 0; display:block; }
a.image2:hover span { position: absolute; left: 0; top: 0; display:block; }
a.image3:hover span { position: absolute; left: 0; top: 0; display:block; }

Mais je trouve que le JS a plus sa place ici...
Modifié par Nyro Xeo (31 Mar 2005 - 16:01)

Nyro Xeo a écrit :
Personnellement, j'avais compris qu'il voulait modifier l'apparence d'un bloc externe...

Ah moi j'ai cru qu'il voulait afficher une image au survol d'une image-vignette, un peu comme le fait Eric Meyer.
Dans ce cas, CSS est approprié et fonctionnera même si javascript est désactivé.
Modifié par Raphael (31 Mar 2005 - 16:10)

cool !

Merci 2 fois.

Re-salut,

par contre j'avais oublié de préciser que mon design est centré et mon image qui apparait en gros, çà serait cool qu'elle reste dans mon conteneur principal en haut à gauche.

Ce qui n'est pas trop possible si je la positionne en absolute. J'ai fait le tour de la FAQ, et j'ai lu les tutos sur le positionnment et le centrage mais j'ai pas trop d'idée là...