28217 sujets

CSS et mise en forme, CSS3

Image qui disparait

Bonjour à vous tous...

Je suis en train de faire un site pour une entreprise et je me pose une question à laquelle je n'arrive pas à trouver de réponses (ni dans le forum, ni dans ma tête)...

J'aimerai qu'au passage de la souris sur une de mes images, celle-ci disparaisse pour laisser apparaitre du texte qui serait afficher dans un bloc ayant les mêmes dimensions que mon image.

J'ai essayé de le faire en utilisant opacity et z-index, mais pour tout vous dire, je ne maitrise pas trop et j'aurai surtout besoin de connaitre la démarche à suivre.

De plus, je voulais savoir si avec les css, il est possible de faire un rollover sans utiliser la balise <a>, ce qui serait fort utile dans mon cas.

J'espère avoir été clair, à cette heure-ci, j'ai l'esprit un peu embrumé...

Donc petite synthèse :

Deux blocs qui se superposent.
Le premier contient une image et est affiché dès l'ouverture de la page.
Au survol de la souris sur l'image, celle-ci disparait et laisse apparaître le texte contenu dans le bloc inférieur...

Est-ce que pour cela, je suis obligé d'utiliser du javascript?

Merci d'avance à vous tous.
Euh, pierreandre, l'exemple que tu propose est un simple rollover, qui plus est en javascript.

En plus sur cette page les evenements javascript sont directement placé dans
le code (X)HTML, c'est mal. Smiley smile
ah ah ah ! Eh bien c'est moi qui te remercie !

Mille excuses ! je croyais bien faire. Je vais suivre ce post pour voir s'il n'y a pas une sotion que je pourrais appliquer.

Bonne journée, pierreandre
Sensei a écrit :
Bonjour à vous tous...
[...]
De plus, je voulais savoir si avec les css, il est possible de faire un rollover sans utiliser la balise <a>, ce qui serait fort utile dans mon cas.
[...]
Merci d'avance à vous tous.

C'est possible en CSS, avec la pseudo-classe hover. Malheureusement, ça ne fonctionne pas sous Internet Explorer, il lui faut du Javascript à côté pour le gérer Smiley bawling
FlorentG a écrit :

C'est possible en CSS, avec la pseudo-classe hover. Malheureusement, ça ne fonctionne pas sous Internet Explorer, il lui faut du Javascript à côté pour le gérer Smiley bawling


Sur les exemples que j'ai donné cela fonctionne trés bien sous IE sans Javascript et en utilisant la pseudo class hover. Il faut utiliser une balise <a> mais le l'effet s'applique à un bloc (span ou img).

C'est une astuce simple et efficace.
Modifié le 08 Feb 2005 - 15:48
jb_gfx a écrit :


Sur les exemples que j'ai donné cela fonctionne trés bien sous IE sans Javascript et en utilisant la pseudo class hover.

C'est une astuce simple et efficace.

Oui, il faut utiliser un <a> Smiley cligne Mais parfois ça peut poser problème...
Bonjour,

Pour ta première question, je ne vois pas, mais l'idée est intéressante. je vais y réfléchir, mais je ne promets rien.

Pour la deuxième:

a écrit :
FlorentG a écrit:
C'est possible en CSS, avec la pseudo-classe hover. Malheureusement, ça ne fonctionne pas sous Internet Explorer, il lui faut du Javascript à côté pour le gérer.

Je m'excuse, FlorentG, mais je ne suis pas sûr de bien comprendre ta phrase. Veux-tu dire que ça ne fonctionne pas du tout sous IE sans javascript, ou veux-tu dire que ça ne fonctionne pas sous IE hors de la balise <a> sans javascript?

Le rollover en css marche sous IE, mais uniquement avec la balise <a>

Un exemple :

page avec rollover css

Si ta page tient sur un écran (et sur ceux de tes visiteurs), tu peux toujours faire un lien vide <a href="#"> : un clic sur l'image provoquera le réaffichage de celle-ci... depuis son début.

liens sur le sujet et sur des sujets connexes :

Une image réactive (rollover) sans javascript

Zoomer une image

Zoom d'images avec les CSS

<edit>
a écrit :
Sensei a écrit:
Deux blocs qui se superposent.
Le premier contient une image et est affiché dès l'ouverture de la page.
Au survol de la souris sur l'image, celle-ci disparait et laisse apparaître le texte contenu dans le bloc inférieur...

Oups, j'avais pas bien tout lu, mes excuses.

Dans ce cas, l'article Afficher / Masquer des "calques" sans javascript de Raphael , déja cité par jb_gfx est évidement tout indiqué.</edit>
Modifié le 08 Feb 2005 - 16:47
thierry a écrit :

Je m'excuse, FlorentG, mais je ne suis pas sûr de bien comprendre ta phrase. Veux-tu dire que ça ne fonctionne pas du tout sous IE sans javascript, ou veux-tu dire que ça ne fonctionne pas sous IE hors de la balise <a> sans javascript?

Le rollover en css marche sous IE, mais uniquement avec la balise <a>

Voilà, ça ne marche qu'avec la balise <a>. Théoriquement, ça devrait fonctionner avec n'importe quelle balise Smiley decu
Bon, alors, je suis en train de tester plusieurs solutions pour mon problème, mais hier je suis parti sur quelquechose qui me paraissait logique et je ne comprends pas trop pourquoi çà ne marche pas...

Si quelqu'un peut éclairer ma lanterne (par simple curiosité)...

Voici la solution que j'avais mis en place (j'ai tout simplifié mon code pour ne m'axer que sur ce problème :

<html>
<head>
<title>Test</title>

<style type="text/css">
<!--


.bloc1 {

position :absolute;
left: 100px;
top: 200px;
width : 200px;
height: 100px;
z-index:3;

}

.bloc1 a:hover {
z-index:1;
}

#bloc2 {

position :absolute;
left: 100px;
top: 200px;
width : 200px;
height: 100px;
color: blue;
background-color: red;
z-index:2;
}


-->
</style>
</head>

<body>

<a href=""><img src="images/c.gif" class="bloc1" alt="image"></a>
<div id="bloc2"></div>


</body>
</html>


Bon voilà... Alors si quelqu'un peut m'expliquer pourquoi ça ne fonctionne pas...
Modifié le 08 Feb 2005 - 16:48
Tu as mis : 
.bloc1 a:hover {
Hors, l'élément de classe bloc1 est ici situé dans ton <a>, donc il faut mettre : 
a:hover .bloc1 {
Ah oui, en effet, l'erreur est grossière. Maintenant, ca fonctionne beaucoup mieux...
Et grâce à cela, j'ai notamment pu me rendre compte que cette solution avec z-index n'était pas vraiment la meilleure pour mon problème. J'ai maintenant un sautillement de mon bloc inférieur et il faut vraiment ne pas bouger la souris pour que celui-ci soit lisible.

En fait, je me demande si le concept même de ce que je veux faire est vraiment intelligent...

Et hop... Je me remets au boulot...
Sujet clos
Aller à