[CSS] Affichage 2 images en même temps ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Affichage 2 images en même temps ?

Roby

Bonsoir,

Débutant en CSS, j'aurais besoin d'aide pour finaliser la conception d'un menu.

Fonctionnement actuel :

J'ai une image avec 6 zones qui, au passage de la souris, affiche une image partant de ce point. Ceci fonctionne parfaitement.

Maintenant ce que j'aimerais faire, c'est afficher une deuxième image au passage de la souris sur 1 zone ...

J'ai cherché, mais rien a faire, mise à part que mes 2 images n'en fassent plus qu'une, mais c'est beaucoup trop gros

Voici un bout de code :

Code :

#menu2 {
top:181px;
left:260px;
}
#menu2:hover{
top:89px;
left:259px;
height:102px;
padding-left:180px;
background-image:url(2-2.gif);
z-index:10;
width: 142px;
voice-family: "\"}\"";
voice-family:inherit;
width: 0px;
}

Ce code m'affiche donc l'image 2-2.gif quand je passe sur la zone "menu2". J'aimerais donc pouvoir afficher l'image 2-1.gif (à un autre endroit) en même temps ...

Merci d'avance pour vos idées

Bonne continuation

Publicité

FlorentG

Unité de Masse

C'est possible en CSS3 : avoir plusieurs background. Par contre, ça ne fonctionne que sous Safari

Message cité 1 fois

Roby

FlorentG a écrit :

C'est possible en CSS3 : avoir plusieurs background. Par contre, ça ne fonctionne que sous Safari

mince alors, ca fait pas énorme en compatibilité

donc pas possible avec du firefox/ie6 ?

merci pour la réponse

FlorentG

Unité de Masse

En trichant un peu... Imagine que ton élément #menu2 est un li, avec un lien dedans :

<li><a href="pouet.html">Pouet</a></li>

Rajoute un span :

<li><a href="pouet.html"><span>Pouet</span></a></li>

En truandant bien, tu pourra afficher un background sur le a, et aussi un sur le span :

a:hover {
background: url('truc.png');
}
a:hover img {
background: url('truc2.jpg');
}

Faut aussi mettre un padding sur le a, enfin à toi de voir suivant ce que tu veux faire...

Message cité 1 fois

gatsusat

FlorentG a écrit :

En trichant un peu... Imagine que ton élément #menu2 est un li, avec un lien dedans :

<li><a href="pouet.html">Pouet</a></li>

Rajoute un span :

<li><a href="pouet.html"><span>Pouet</span></a></li>

En truandant bien, tu pourra afficher un background sur le a, et aussi un sur le span :

a:hover {
background: url('truc.png');
}
a:hover span {
background: url('truc2.jpg');
}

Faut aussi mettre un padding sur le a, enfin à toi de voir suivant ce que tu veux faire...

Roby

Déjà, merci pour la réponse, je vais essayer ce soir, et je vous tiens au courant

pour gatsusat, j'ai pas tout compris

gatsusat

j'ai corrigé un buot du code de Flo

FlorentG

Unité de Masse

Ah merde ouais

Message cité 1 fois

gatsusat

FlorentG a écrit :

Ah merde ouais

Ben oué gamin, tu commence à vieillir

Roby

J'ai un petit souci :

voci donc la modification de mon code :

Code :

#menu3{
top:198px;
left:260px;
}
#menu3:hover{
top:198px;
left:260px;
height:139px;
padding-left:165px;
background-image:url(3-2.gif);
}
#menu3:hover span{
top:10px;
left:10px;
height:139px;
padding-left:165px;
background-image:url(2-2.gif);
}

puis :

Code :

<li><a id="menu3" title="menu3" accesskey="3" href="#"><span>Menu 3</span></a></li>

et j'ai toujours une seule image qui apparait ...

Merci de votre aide

Publicité

Roby

up ?

snp

quand on sait pas, on se tait

up pour une question identique...

snp

quand on sait pas, on se tait

Bonjour,
en fait ça fonctionne chez moi sur FF et sur ie7, opera...mais pas sur ie6.
J'aimerai une soluce SVP pour le rendre compréhensible par ie6 SVP.
Mon bout de code HTML :

Code :

<div id="menu_photo">
<a href="index.php?page=photo" alt="Photographie" title="Photographie" ></a><span></span>
</div>

et sa CSS :

Code :

#menu_photo:hover span
{
position:absolute;
top:470px;
left:40px;
height:50px;
width:300px;
background-image:url('../images/tphoto.gif');
background-repeat: no-repeat;
}

Message édité par snp le 17-04-2008 à 08:16:47

avander

Ce serait pas un IE6 popup bug des fois? Essaie d'ajouter ceci:

overflow: hidden; /** fix for IE6 popup bug */

snp

quand on sait pas, on se tait

ajouté mais rien n'y fait.
merci pour le coup de main.

Autres suggestions ?

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] Affichage 2 images en même temps ?

Sujets relatifs
CSS : caler une image de fond sur un texte centré.	Faire défiler un lot d'images
Script de randomisation d'affichage d'une image	affichage d'une partie d'un fetch array..
CSS : Afficher un bloc lors du survol d'un lien	fichier ayant un temps de validité comme une session..
[TABLE/CSS] Tableau avec ascenseur !	superposer 2 images en PHP
Redimensionnement, CSS & JavaScript ;)	temps d'execution
Plus de sujets relatifs à : [CSS] Affichage 2 images en même temps ?

Page générée en 0.047 secondes