[CSS] Liens en images différentes
Résolu
Chiwakimasu
Messages postés
13
Statut
Membre
-
mICKEY -
mICKEY -
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.
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.
A voir également:
- [CSS] Liens en images différentes
- Vérificateur de liens - Guide
- Des images - Guide
- Telecharger liens direct - Accueil - Outils
- Ou trouver les liens copiés sur android - Guide
- Extraire images pdf - Guide
15 réponses
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:
Code html:
J'espère que ça pourra en aider quelques uns :)
Merci de vos réponses en tout cas 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
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 :)
Dsl de faire un up si rapide mais j'ai pas le choix :s
Merci :)
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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
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
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 :
Mon code html:
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>
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.
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.