Sujet Précédent Sujet Suivant

[CSS] Liens en images différentes

Résolu/Fermé
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 - 14 juin 2007 à 16:30
 mICKEY - 27 sept. 2007 à 10:30
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.

15 réponses

Réponse 1 / 15
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 7
15 juin 2007 à 10:57
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
7
Réponse 2 / 15
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 7
14 juin 2007 à 19:35
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 :)
0
Réponse 3 / 15
Edouard
14 juin 2007 à 19:44
Ta question est pas clair, alors forcément ça dissuade.
Tu veux faire un rollover avec des images ?
0
Réponse 4 / 15
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 7
14 juin 2007 à 19:48
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
Edouard
14 juin 2007 à 19:54
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
0
Réponse 6 / 15
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 7
14 juin 2007 à 19:55
J'veux rien réinventer du tout, je veux juste que ça fonctionne sans javascript :)
0
Réponse 7 / 15
Edouard
14 juin 2007 à 19:58
Et comment tu veux détecter l'évenement !?
0
Réponse 8 / 15
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 7
14 juin 2007 à 20:01
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
0
Réponse 9 / 15
Edouard
14 juin 2007 à 21:05
onmouseout style...
0
Réponse 10 / 15
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 7
14 juin 2007 à 21:28
mais c'est du javascript ça...
0
Réponse 11 / 15
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 7
14 juin 2007 à 21:50
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>
0
Réponse 12 / 15
Doctor C Messages postés 627 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 19 février 2016 398
14 juin 2007 à 22:02
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.
0
Réponse 13 / 15
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 7
14 juin 2007 à 22:15
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
0
Réponse 14 / 15
Chiwakimasu Messages postés 13 Date d'inscription mardi 20 juin 2006 Statut Membre Dernière intervention 7 octobre 2007 7
15 juin 2007 à 09:55
Problème toujours pas résolu :s
0
Réponse 15 / 15
mICKEY
27 sept. 2007 à 10:30
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
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
ne pas utiliser la souris mais le clavier
isabela -
thomas-richet -

32 réponses