[Résolu]Liens - images en survol

[Nogi]

J’ai téléchargé le logiciel que tu me suggères et j’ai finalement opté pour la solution :hover, en fignolant mes images.

 

J’ai utilisez le a et a:hover ; image01 pour le choix de fond de menu et la même image avec un filtre blanc ajouté par-dessus, qui me donne image02, pour le survol.

 

Le seul hic que je n’aime pas est qu’en mettant les photos dans le CSS, la largeur (width) n’accepte pas les %. Je travailles en 1280px X 1024px et j’ai quantifié à 1122px(les photos à 185px), alors quand j’augmente la résolution d’écran, le menu se "réduit" en largeur, mais bon, je vais faire avec.

 

Merci !

Nogi

 

XHTML

. . . .
<div>	
<ul id="menus">		  
 <li class="bio"><a href="biographies_fr.html" alt="Lien - Biographies" title="Lien - Biographies"  
      tabindex="40"></a></li>		
 <li class="shows02"><a href="2009_shows_fr.html" alt="Lien - Dates de spectacles" title="Lien – 
      Dates de spectacles" tabindex="45"></a></li> 
. . . . etc . . . .
</ul>
</div>
. . . .

 

CSS

. . . .
#menus{overflow:hidden; [color="#A0522D"][b]width:1122px;[/b] [/color]margin:3% auto 0; padding:0}
li{float:left; display:inline; list-style:none}
.bio a{background:url("01biographies.png") no-repeat; [color="#A0522D"][i]width:185px;[/i][/color] height:35px; display:block;   
    border:crimson solid 1px; border-right:0}
.bio a:hover{background:url("015biographies.png") no-repeat}
.shows02 a{background:url("02spectacles.png") no-repeat; width:185px; height:35px; display:block; 
    border:crimson solid 1px; border-right:0}
.shows02 a:hover{background:url("025spectacles.png") no-repeat}
. . . . etc . . . .

Modifié le 1 mai 2009 par Nogi

[Dylav]

/* J'ai essayé ceci, mais ça ne fonctionne pas ! */

ul #menus li a:hover{background:url("white.png") repeat}

En fait, ce que tu fais fonctionne, mais pas comme tu le voudrais. Tu demandes en effet d'afficher une image de fond lors du survol de la souris. Une image de fond. Donc l'image choix de menu la masquera, de toute façon.

Ce qu'il faudrait faire, c'est inverser le principe. C'est-à-dire mettre tes choix de menu en images de fond, et ton image blanchâtre directement dans le <li>, en jouant sur son attribut visibility (visible au survol, hidden sinon).

Mais la solution la plus classique est de réaliser deux images différentes pour chaque choix de menu, en image de fond, avec changement d'URL au survol par la souris.

[Nogi]

(Dylav @ lun. 27 avril 2009 à 02h47) : Ce qu'il faudrait faire, c'est inverser le principe. C'est-à-dire mettre tes choix de menu en images de fond, et ton image blanchâtre directement dans le <li>, en jouant sur son attribut visibility (visible au survol, hidden sinon).

 

En fait, c’est ce que j’aimerais avoir comme résultat : que les images de mon menu(ex. : Biographies, Spectacles, etc) demeurent toujours visibles et que mon image-filtre blanchâtre se superpose par-dessus celles-ci, pour démontrer que le curseur est sur le lien en question. Présentement, seul le curseur hand démontre que je suis bien sur le lien, lorsque celui-ci pointe un lien en particulier.

 

Le fait de mettre chaque image-lien de fond dans le XHTML me permet de redimensionner celle-ci en width:16%; et height:34px; car les grandeurs de mes images sont de 500px X 110px. C’est pour cela que je ne peux mettre les images-liens dans le CSS, elles se retrouvent découpées. Le hic, c’est que si je réduis les images à 150px X 34px, le lettrage que j’ai utilisé pour les images de fond de menu devient pratiquement illisible et j’aimerais bien les garder ainsi. Alors je vais essayer l’attribut visibility:visible; avec li{. . . .} comme tu me suggères.

 

PS. : J’ai déjà utilisé a et a:hover en images distinctes sur notre site myspace(question que j’avais demandé sur votre site l’an passé), mais ce n’est pas le résultat que je veux, comme mentionné plus haut dans mon post.

 

Merci !

Nogi

 

Voici un montage-image de ce j’aimerais obtenir :

[Dylav]

Avec quel produit as-tu tenté de changer la taille de tes images ? Parce que, a priori, la réduction d'une image par le navigateur a plutôt tendance à être d'un moins bon rendu visuel que l'affichage direct d'une image retaillée par un produit de retouche. Essaie par exemple PhotoFiltre, que tu trouveras en téléchargement ici même, produit free simple de manipulation et qui sait faire des tas de choses très bien.

 

Parce que, justement, l'utilisation de l'attribut visibility sous-entend que tes choix sont en images de fond…