Aller au contenu

Sujets conseillés

Posté

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

Posté

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 :)

Posté

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.

++

Posté (modifié)

Hello,

Suis de retour de ma petite rando VTT :P

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é par KnockedMaster

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...