28173 sujets

CSS et mise en forme, CSS3

[résolu] Hover sur des liens adjacents

Pages :
Bonjour,

J'ai un menu qui ressemble à ça :


<ul id="Menu">
	<li id="Menu1" class="Menu_j"><a href="/Home_FR.aspx" class="Image"></a><a href="/Home_FR.aspx" class="Text">Accueil</a></li>
	<li id="Menu2" class="Menu"><a href="/Tariffs_FR.aspx" class="Image"></a><a href="/Tariffs_FR.aspx" class="Text">Tarifs</a></li>
...
</ul>


Chaque élément du menu est donc constitué de 2 liens : un pour le texte et un pour l'image. J'aimerais pouvoir changer l'apparence de l'image quand on pointe sur un des de ces 2 liens. Je pensais donc utiliser des sélecteurs CSS adjacents pour cela mais ça ne marche pas. Voici mon code CSS :


#Menu .Image:hover, a.Image + a:hover
{
    background-position:0 -53px;
}


Petite précision, je ne ne veux pas écrire :


#Menu .Image:hover, #Menu li:hover .Image
{
    background-position:0 -53px;
}


car les li ont une surface plus grande que celle des 2 liens. Je veux seulement que quand on pointe sur un des 2 liens, l'image de fond du lien .Image change. Je préférerais éviter de recourir au javascript pour cela.

Merci d'avance pour votre aide.

mathmax
Modifié par mathmax (05 Mar 2007 - 11:51)
Bonsoir,

Il est nécessaire de passer par javascript, les sélecteurs CSS2.1 ne permettent pas d'agir sur un élément de cette manière.
ok, merci. J'ai quelques problèmes avec javascript. Je peux poster ici ou j'ouvre un autre sujet dans la rubrique javascript ?
Modifié par mathmax (03 Mar 2007 - 21:46)
Juste une question, avant de se lancer dans du Javascript : c'est vraiment nécessaire d'avoir deux liens côte à côte et pointant vers la même adresse, le premier de ces liens étant vide de tout contenu ?

Quel est l'effet recherché, précisément ? Je sens venir le truc qui pourrait être fait plus simplement en se prenant moins la tête...
Ok va sur ce site. Il n'y a pas encore de réactions des images quand on pointe sur les éléments du menu, mais l'idée est de faire que les images régissent aussi bien quand on pointe sur le texte que sur les images qui sont juste en dessus. Attention, les textes sont parfois plus large que les images et je ne souhaite pas faire une zone cliquable qui englobe le texte et l'image. Je veux que l'image ne régisse que lorsque je pointe dessus ou sur le texte.

J'ai bien essayé le code suivant :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style>
a:hover #img{
color:red;
}

#img{
display:block;
width:50px;
height:50px;
background-color:green;
}

a{
background-color:yellow;
}
</style>
</head>

<body>
<a href="#">
	<span id="img">Hello</span>
	<span>Pointez ici !</span>
</a>
</body>
</html>


Ca marche bien avec Internet Explorer 7, mais ni avec Mozilla, ni avec IE 6...
Si tu as une idée qui peut se passer du javascript, je suis preneur. Smiley cligne
mathmax a écrit :
Attention, les textes sont parfois plus large que les images et je ne souhaite pas faire une zone cliquable qui englobe le texte et l'image.

Pourquoi, tu as peur qu'il soit plus facile pour les utilisateurs de cliquer sur une zone un peu plus large ? Smiley ohwell
Si ça ne tenait qu'à moi, je ne me casserais pas la tête et utiliserait un seul lien contenant le texte, avec padding-top et image de fond qui change lors du survol. Solution simple et efficace.

mathmax a écrit :
Je veux que l'image ne régisse que lorsque je pointe dessus ou sur le texte.

Dans ce cas, l'image doit être dans le code HTML.
<a href="page1.html">
	<img src="vignette1a.jpg" alt="" /><br />
	Premier lien
</a>

Pour changer la source de l'image d'illustration, il faudra alors effectivement passer par Javascript.

Mais je persiste à penser que ça serait se prendre la tête pour rien, quand on pourrait simplement utiliser des images de fond pour cette histoire d'images purement décoratives changeantes au survol.
Tant que j'y suis : pourquoi ceci est-il une image de fond, alors que ladite image transmet bien une information ? L'information « Chateau de Machin - Location de salles pour mariages, séminaires, évènements » est-elle si peu importante qu'il faille la cacher aux utilisateurs aveugles, à ceux qui ont désactivé les images ou les couleurs de fond, ou encore aux moteurs de recherche ? Smiley cligne 

<img src="blabla.gif" alt="Chateau de Machin - Location de salles pour mariages, séminaires, évènements" />

Au passage, il peut être utile de conserver la partie « fond en arc de cercle » comme image de fond, et de n'utiliser que la partie logo+texte comme image de contenu HTML.

Autre remarque : 798px de large pour les principaux blocs de contenu, c'est un peu dommage. Ça ne passera jamais sur du 800x600. 800 pixels moins les bordures de la fenêtre moins la barre de défilement vertical -- de largeur variable suivant la configuration de l'utilisateur ! --, moins de possibles espaces sur les côtés si jamais la fenêtre du navigateur ne prend pas tout l'espace disponible... au final, ça laisse bien moins de 800 pixels de disponible. Dimension de référence : 760px. Ne pas dépasser 770.

Dernière chose : la technique utilisée pour le centrage horizontal des blocs de contenu est très tarabiscotée. Je sens venir les problèmes de compatibilité dans tel ou tel navigateur.
Quelques pistes pour faire les choses plus proprement :
1. Un article de Laurent Denis sur Openweb : Initiation au centrage CSS (article complet avec juste ce qu'il faut)
2. Et Raphaël Goetter sur Alsacréations : Centrer les éléments ou un site web en CSS
Merci pour ta réponse et tes remarques d'accessibilité.
Je suis peut-être perfectionniste mais je tiens à ce que l'on ne puisse cliquer que sur l'image ou le texte.

J'ai pour cela écrit le code suivant :


window.onload=function()
{
    menu=document.getElementById("Menu");
    links=document.getElementsByTagName("a");
    for(var i=0;i<links.length;i++) 
    { 
        link = links[i];
        if(link.parentNode.parentNode==menu) 
        {
            link.onmouseover=function(){this.parentNode.getElementsByTagName("a")[0].style.backgroundPosition="0 -53px";};
            link.onmouseout=function(){this.parentNode.getElementsByTagName("a")[0].style.backgroundPosition="0 0";};
        } 
    } 
}

[/i]
Pouvait-on faire plus simple ?

Pour le centrage, je n'ai justement pas utilisé margin:auto pour rester compatible avec les anciennes version d'IE. La technique positionnement relatif + marge négative est justement une technique conseillée par Raphaël Goetter. Je l'ai prise dans son livre.
Modifié par mathmax (04 Mar 2007 - 19:00)
mathmax a écrit :
Pouvait-on faire plus simple ?

Javascript et moi ça fait huit. Si besoin, poser la question dans le forum JS. Smiley cligne

mathmax a écrit :
Pour le centrage, je n'ai justement pas utilisé margin:auto pour rester compatible avec les anciennes version d'IE.

La technique des marges automatiques est compatible avec les anciennes versions d'IE (et puis franchement : utiliser une technique potentiellement problématique avec 99% des navigateurs en service pour assurer le centrage dans 1% des navigateurs, c'est un peu limite, non ?). Voir l'article de Raphaël dont je donne le lien ci-dessus.

mathmax a écrit :
La technique positionnement relatif + marge négative est justement une technique conseillée par Raphaël Goetter. Je l'ai prise dans son livre.

Même Raphaël peut écrire des bêtises. Smiley lol
(Au fait, cette technique n'utilise pas plutôt le positionnement absolu, normalement ?)
a écrit :
(Au fait, cette technique n'utilise pas plutôt le positionnement absolu, normalement ?)


Mais oui bien sûr. Smiley eek C'est du positionnement absolu que je voulais faire. Je sais pas pourquoi j'ai mis du relatif... A ton avis, qu'est ce qui est le mieux :
Positionnement absolu + margin-left négative ou margin:auto avec correction du text-align pour les versions d'IE antérieur à la 6 comme expliqué dans l'article de Raphaël Goetter ?
mathmax a écrit :
A ton avis, qu'est ce qui est le mieux :
Positionnement absolu + margin-left négative ou margin:auto avec correction du text-align pour les versions d'IE antérieur à la 6
Même si ce n'est pas mon avis que tu voulais, je le donne quand même! Smiley ravi Pour ma part, je favorise tant que possible un placement naturel des éléments dans le flux; un élément ne devrait être positionné que lorsque l'on désire tirer de cette méthode certains aspects intéressants qu'il apporte (superpositions de calques, etc.).
Bonjour,

Sans Js c'est bien possible, le hic serait d'avoir un width déterminé pour ton texte sous l'image et de centrer le dit texte, mais je n'ai pas vraiment l'impression que ça va te convenir.
mathmax a écrit :
A ton avis, qu'est ce qui est le mieux :
Positionnement absolu + margin-left négative ou margin:auto avec correction du text-align pour les versions d'IE antérieur à la 6 comme expliqué dans l'article de Raphaël Goetter ?

Les marges automatiques.

Après, reste le cas IE 5.x. À la rigueur, on s'en fout un peu. Si IE 5.x affiche le site aligné à gauche plutôt que centré, grand bien lui fasse. Le site restera parfaitement accessible. Et comme il est probable que les utilisateurs aient un vieil ordinateur, en 800x600, grand maximum en 1024x768, on n'aura pas d'effet « petit site perdu tout à gauche de l'immense fenêtre du navigateur », effet que l'on obtient avec les grandes résolutions, effectivement.

Voilà pour la base. Le centrage d'un site est une option cosmétique, et ne pas l'obtenir n'est pas grave. Par contre, utiliser le positionnement absolu et une marge négative est potentiellement dangereux : avec certains navigateurs et dans certaines résolutions, une partie du contenu peut sortir du champ visible (sans qu'une barre de défilement n'apparaisse... le contenu est donc définitivement inaccessible).

Mais, si on peut obtenir le centrage vertical dans IE 5.x sans recourir à une technique aux effets secondaires incertains, on peut effectivement l'utiliser. Donc, on utilisera le truc du text-align: center pour obtenir le centrage horizontal dans IE 5.x, si on a envie de perdre dix secondes pour IE 5.x. Smiley cligne
a écrit :
Sans Js c'est bien possible, le hic serait d'avoir un width déterminé pour ton texte sous l'image et de centrer le dit texte, mais je n'ai pas vraiment l'impression que ça va te convenir.


Je ne vois pas trop ce que tu veux dire. Pourrais-tu expliciter ta méthode ?
Florent V. a écrit :
Le centrage d'un site est une option cosmétique, et ne pas l'obtenir n'est pas grave.


Ahem.

Absolutisme déplacé. Irréaliste dans un contexte professionnel Smiley cligne
Salut,

Un truc comme ça:
<style type="text/css">	


a:hover #img{
color:red;
background-color:blue;
}

#img{
display:block;
width:50px;
height:50px;
background-color:green;
}

#texte{
width:150px;
position: absolute;	
top: 50px;
left: -50px;
text-align: center;
background-color:yellow;
}

a{
background-color:yellow;
width:50px;
display:block;
position: relative;
margin: 100px;
}

</style>
</head>
<body>

<a href="#"><span id="img">Hello</span><span id="texte">Pointez ici !</span></a>

</body>
Laurent Denis a écrit :
Absolutisme déplacé. Irréaliste dans un contexte professionnel Smiley cligne

Me transformerai-je en clb56 ? Smiley lol
Ca ressemble beaucoup à ce que j'ai fais plus haut. Le problème est que ça ne fonctionne pas avec IE6.
Modifié par mathmax (05 Mar 2007 - 09:25)
Re,

Autant pour moi, juste ce correctif à ajouter pour IE6
 a:hover {
background: none; /* correction d'un bug IE */
}
Pages :
Sujet clos
Aller à