Menu image ouvrant.

???

17 décembre 2005 à 23:23:57

Salut à tous!

Bah voila ... J'aimerai savoir quelques chose ...

Comment crée un menu du style :

Il y a une image (que j'ai crée moi genre du nom accueil)
Quand on passe par dessus avec la souris, sa affiche d'autre image (que j'aurai crée aussi) par exemple : Nous contacter, News ... Et que quand on clique sur l'une des c'est image, sa envoie sur un lien biensur.

J'éspère que je me suis bien exprimé ! lol.

Merci de votre aide :euh:

Anonyme

18 décembre 2005 à 0:06:50

En utilisant les :link, :hover, et :visited je pense :euh:

! En CSS j'entend

!

Sinon, c'est une foction en JS il me semble qui peut faire ça aussi :euh:

Celasse

18 décembre 2005 à 1:01:03

Oui mais comment ?

Quelqu'un pourrai me donner cette fonction fava ?

merci

mebon

18 décembre 2005 à 10:38:42

tu fais quelque chose dans ce style :

<ul id="menu">
<li id="lien-acceuil"><a href="accueil.html"><span>Accueil</span></a></li>
<li id="lien-autrechose"><a href="autrechose.html"><span>Autre chose</span></a></li>
</ul>

#menu li span {
display:none;
}

#menu li a {
display:block;
width:largeurdetesimages px;
height:hauteurdetesimages px;
}

#lien-accueil a {
background:url('tonimage1.png');
}

#lien-accueil a:hover {
background:url('tonimage2.png');
}

#lien-autrechose a {
background:url('tonimage3.png');
}

#lien-autrechose a:hover {
background:url('tonimage4.png');
}

Celasse

18 décembre 2005 à 13:40:57

Merci, j'ai faiit tt sa, mais sa ne marche pas.

Enfin, ya juste les image que je ne vie pas.

Sinon sa a l'air de marché.
Comment je fais poru que les image aparaisse ?

merci

ps : ('tonimage4.png'); j'ai bien mis ou sont les images et tout

citizen

18 décembre 2005 à 18:55:22

Bonsoir,

Je suis débutant, mais j'ai fait un design un peu dans le même style que ce que tu expliques, et pour mes rollover j'ai fait ça : si ça peut t'aider ? car chez moi ça marche bien !

a.image1
{
position: absolute;
width: ..px; /* largeur de l'image réactive */
height: ..px; /* hauteur de l'image réactive */
left: ..px; /* position gauche de l'image réactive */
top: ..px; /* position haute de l'image réactive */
background-image: url('menu/image1.jpg'); /* source de l'image de départ */
background-repeat: no-repeat;
}
a.image1:hover
{
text-decoration: none;
background-image: url('menu/image1_2.jpg'); /* source de l'image d'arrivée */
}

bon courage !

jo2500

18 décembre 2005 à 20:55:27

Je suis débutant aussi mais j'ai lu un très bon bouquin sur le css2(celui d'alsacration)
Normalement tu peux réaliser un rollover grâce à du css, il faut que tu crée en une seule image:
-Ton lien inactif
-Ton lien survolé

Ensuite tu intègre l'image en tant que lien et il faut, grâce au css, caché la seconde partie de l'image,(suffit que sa deborde d'un cadre avec overflow:hidden) et quand tu survole, ou lcique sur le lien il suffit de déplacer l'image pour que la partie visible soit la seconde^^