[CSS] Liens en images différentes Résolu

Question

Bonjour,

Je viens me confier à vous car j'ai un petit soucis pour continuer mon portfolio.
En effet, cela fait un moment que je cherche sur Internet comment résoudre mon problème et beaucoup en parlent mais ne le résolvent jamais :s

En fait, je voudrais faire des liens comme ce site https://www.alsacreations.com/ à savoir une image différente pour chaque lien, mais à quelques exceptions prêt :

La première est que je ne veux pas utiliser d'écriture sur mes liens, le titre du menu étant dirrectement intégré à l'image.

La seconde et que mon image et celle-ci: http://geddo.free.fr/menu.gif 

Je voudrais donc qu'au passage de la souris et une fois le lien activé, que l'image du dessous ( en couleur ) apparaisse et reste visible.

J'ai déjà essayé de m'inspirer de certain tutos concernant le rolehover, mais je n'arrive jamais à mettre plusieurs images... J'ai donc essayer avec une seul image en essayant de découvrir la partie d'en dessous avec des background-position: (lien de mon image) xx px xx px;

mais ça ne fonctionne pas :s Je ne sais pas si c'est moi qui écrit mal mon code ou si c'est autre chose, en tout cas, merci de vos futures réponses qui m'indiqueront j'espère, le code html et css que je dois mettre pour en finir avec ce problème plutôt énervant.

Chiwakimasu · Accepted Answer

Bon problème résolu, en fait c'est juste parce que j'avais oublié de mettre px après un nombre u_u

Voici la solution:

Code css:

#menu             {background : url('../design/menu/menu.gif'); width : 800px; height : 49px; margin: 0px;  padding: 0; position: relative;}
#menu li          {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#menu li, #menu a {height: 49px; display: block;}
#accueil          {left: 15px; width:  112px;}/*Lien accueil.*/
#services         {left: 127px; width: 110px;}/*Lien services.*/
#profil           {left: 227px; width: 80px;}/*Lien profil.*/
#folio            {left: 307px; width: 75px;}/*Lien folio.*/
#contact          {left: 392px; width: 100px;}/*Lien contact.*/
#charte           {left: 492px; width: 85px;}/*Lien charte.*/
#accueil a:hover  {background: transparent url('../design/menu/menu.gif')  0px -49px no-repeat;}/*Lien actif accueil.*/
#services a:hover {background: transparent url('../design/menu/menu.gif') -127px -49px no-repeat;}/*Lien actif services.*/
#profil a:hover   {background: transparent url('../design/menu/menu.gif') -227px -49px no-repeat;}/*Lien actif profil.*/
#folio a:hover    {background: transparent url('../design/menu/menu.gif') -307px -49px no-repeat;}/*Lien actif folio.*/
#contact a:hover  {background: transparent url('../design/menu/menu.gif') -392px -49px no-repeat;}/*Lien actif contact.*/
#charte a:hover   {background: transparent url('../design/menu/menu.gif') -492px -49px no-repeat;}/*Lien actif charte.*/

Code html:

<ul id="menu">
  <li id="accueil" name="accueil"><a href="?page=news"></a></li>
  <li id="services" name="services"><a href="?page=news"></a></li>
  <li id="profil" name="profil"><a href="?page=news"></a></li>
  <li id="folio" name="folio"><a href="?page=news"></a></li>
  <li id="contact" name="contact"><a href="?page=news"></a></li>
  <li id="charte" name="charte"><a href="?page=news"></a></li>
</ul>

J'espère que ça pourra en aider quelques uns :)

Merci de vos réponses en tout cas u_u

Chiwakimasu · Answer

Ce serait bien d'avoir une réponse avant demain, ça fait 2 jours que je plante dessus, j'arrivre pas à avancer sans ça :(

Dsl de faire un up si rapide mais j'ai pas le choix :s

Merci :)

Edouard · Answer

Ta question est pas clair, alors forcément ça dissuade.
Tu veux faire un rollover avec des images ?

Chiwakimasu · Answer

hmm c'est dur à expliquer :s

en fait je veux simplement que quand on passe la souris sur un menu ça change de couleur et donc d'image.

J'essaie juste de trouver un moyen pour faire ça en css ( pas de javascript :s )

Donc pour accueil par exemple, quand il est off il est gris, quand il est on ( quand on passe la souris dessus et quand on a cliqué dessus et qu'on est sur la page accueil ) il est en orange :)

J'espère avoir mieux expliquer :s

Edouard · Answer

hem,
Par définition, tu veux détecter un évenement ? (la souris au dessus = onmouseover) c'est donc du javascript.
Là tu as deux choix : utiliser des fonctions javascript toutes faites et qui fonctionne, ou te faire ta fonction qui changerait le style css affecté à un élément.
C'est toi qui voit, mais t'es juste en train d'essayer de réinventer l'eau froide...
Edouard

Chiwakimasu · Answer

J'veux rien réinventer du tout, je veux juste que ça fonctionne sans javascript :)

Edouard · Answer

Et comment tu veux détecter l'évenement !?

Chiwakimasu · Answer

bah avec une classe #menu a:hover a:active;

Mais en fait, j'arrive bien à mettre accueil correctement mais dès que je dois mettre le menu d'à coté, je sais plus quoi faire :s

Edouard · Answer

onmouseout style...

Chiwakimasu · Answer

mais c'est du javascript ça...

Chiwakimasu · Answer

Bon j'avance petit à petit mais j'ai toujours un problème, il ne lit qu'un seul lien...donc le menu accueil fonctionne parfaitement, mais les autres ne sotn même pas considéré comme des liens....

mon code css :

#menu {background : url('../design/menu/menu.gif'); width : 800px; height : 49px; margin: 0px;  padding: 0; position: relative;}
#menu li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#menu li, #menu a {height: 49px; display: block;}
#accueil {left: 15; width: 112px;}
#services {left: 127; width: 110;}
#profil {left: 227; width: 80;}
#folio {left: 307; width: 75;}
#contact {left: 392px; width: 100;}
#charte {left: 492; width: 85;}
#accueil a:hover {background: transparent url('../design/menu/menu.gif') 0px -49px no-repeat;}
#services a:hover {background: transparent url('../design/menu/menu.gif') -127px -49px no-repeat;}
#profil a:hover {background: transparent url('../design/menu/menu.gif') -227px -49px no-repeat;}
#folio a:hover {background: transparent url('../design/menu/menu.gif') -307px -49px no-repeat;}
#contact a:hover {background: transparent url('../design/menu/menu.gif') -392px -49px no-repeat;}
#charte a:hover {background: transparent url('../design/menu/menu.gif') -492px -49px no-repeat;}

Mon code html:

<code><ul id="menu">			
<li id="accueil" name="accueil"><a href="accueil.html"></a></li>
<li id="services" name="services"><a href="services.html"></a></li>
<li id="profil" name="profil"><a href="profil.html"></a></li>
<li id="folio" name="folio"><a href="folio.html"></a></li>
<li id="contact" name="contact"><a href="contact.html"></a></li>
<li id="charte" name="charte"><a href="charte.html"></a></li>
</ul>

</code>

Doctor C · Answer

t'essaie de faire ca avec une seule image ?

personnellement, je découperais chaque item de mon menu (découper l'image en plusieurs images, chacune représentant un élément du menu) et j'appliquerais un hover sur chacun de tes items.

Chiwakimasu · Answer

Bah l'avantage de ça c'est justement qu'il y a qu'une seule image et que les navigateurs ont besoin de chargé que cette unique imge...

Je sais qu'il y a moyen, je me suis inspiré de plusieurs code source, le problème c'est que chez moi, ça fonctionne pas et j'arrive pas à savoir pourquoi u_u

Chiwakimasu · Answer

Problème toujours pas résolu :s

mICKEY · Answer

Salut possible de voir le résultat en ligne sur ton site ?
Au moins comme ça on pourrait mieux comprendre et utiliser ton astuce.

Merci

[CSS] Liens en images différentes

15 réponses

Discussions similaires

Newsletters