a:hover spécial...

[Ludo29]

Bonjour,

Voici mon nouveau design pour mon site:

http://img183.imageshack.us/img183/9686/newdesignyh3.png

En fait voila, j'aimerais que quand le visiteur passe son curseur sur un des "blocs", l'image avec le logo en 3d devient plus claire, niveau design, je sais le faire, mais c'est point de vue css maintenant...

Comment faire pour que tout le bloc soit un même lien cliquable et faire cet effet?

Merci d'avance,

Ludo29

[Sarc]

Bonjour,

Tu as tellement de possibilités différentes...

Personnellement, en instinct primaire, je ferais un truc du genre :

a {display:block; float:left; width:50px; height:80px; padding-top:70px; background:url('imagedefond.png'); }

a:hover{background:url('nouvelleimagedefond.png');}

Le block te permet de ne plus avoir le lien comme un élément "en ligne", donc de lui attribuer une taille précise. Le float left, je ne l'ai mis que pour le placement de tes divers liens... Le padding-top, c'est pour écrire dans la case réservée à cet effet. Et enfin, l'image en fond, c'est ce qui te permet de changer en CSS

[KnockedMaster]

Salut,

Avec une seule image :

XHTML :

<a class="maClasse" href="url"><img src="url" /></a>

CSS

.maClasse {
opacity:1;
}

.maClasse:hover {
opacity:0.5;
}

Problème : c'est du css 3, pas compatible avec IE 6, ses clones et sans doute quelques autres ...

Sinon tu utilises une seule image qui contient les deux effets et tu joues sur les marges au moment du hover.

++

[Ludo29]

Merci à vous 2,

Bonne journée,

Ludo29

[Ludo29]

Je viens de tester la méthode de KnockedMaster, elle fonctionne mais petit, soucis, un horrible cadre bleu vient s'ajouter autour ainsi qu'un petit décalage, comment remédier à ce problème?

Voici une capture d'acran:

http://img187.imageshack.us/img187/6799/scrnwt9.jpg

Modifié 24 Février 2008 par Ludo29

[KnockedMaster]

Hello,

Suis de retour de ma petite rando VTT

Tu dois ajouter simplement ceci dans ta css :

.maClasse img {
border:none;
}

Bonne fin d'après-midi !

++

Edit : Le opacity varie entre 0 et 1, au cas où ...

Modifié 24 Février 2008 par KnockedMaster

[Ludo29]

Merci compatriote,

ça fonctionne nickel, comment n'y ai-je pas pensé...

Bonne fin de journée,

Ludo29