Cadre autour des icônes

[Katchou]

Bonjour tout le monde & bon weekend x)

Voilà mon souci, j'ai déjà posté sur ce sujet mais je n'avais pas très bien comprit les solutions fournies et je ne retrouve plus le sujet, qui a dut être classé depuis :/
Donc voici le sujet précis, j'aimerais savoir comment faire un cadre autour d'une icône, qui change de couleur au passage de la souris.
Voici les cadres dont je parle:
http://westown-show.forumactif.org/forum.htm
Dans la page d'accueil, dans les parties: "it-boards" & "le staff".
Ou ici:
http://pretty-school.forumpro.fr/
Page d'accueil, dans la partie "Staff & Crédits".

Beaucoup de formes ont ce genre de cadres, mais j'ignore comment les faire, arrondis ou non, avec une changement de couleur au passage de la souris :/

J'espère que quelqu'un saura m'aider x)
A bientôt et bon weekend!

[wwn]

Salut pour le cadre des icones je ne sais pas du tout comment faire ( peut être un template )

Par contre pour les couleur https://forum.forumactif.com/trucs-et-astuces-f8/images-de-la-barre-de-navigation-modifiees-au-passage-de-la-souris-t246228.htm#2235908

Ceci devrait t'aider

[Katchou]

Ah merci beaucoup! x)
Je comprends un peu mieux comment fonctionne le survol et tout ça maintenant^^
Par contre pour le cadre je ne vois vraiment pas du tout O.O
J'espère que quelqu'un pourra m'aider x)

Bonne nuit!

[wwn]

TU peut toujours tenter de mètre les cadre sur chaque image ( avec paint par exemple )

Mais ca va être long :lol!:

[Katchou]

xD Oui c'est sur!
Merci quand même x)

[gagman]

Edit ton prem's message et met résolu
sorry, j'ai cru, en lissant les réponses, que t'avais ta réponse, je vais relire

[Katchou]

Euh... Il n'est pas résolu mon message ^^"

EDIT: Pas grave x)

[marichka]

une solution simple c'est de faire un tableau et de mettre un fond couleur et une bordure derrière l'image

[Katchou]

Merci de votre réponse x)
J'ai essayé mais avec mes connaissances ça ne rendait pas vraiment très bien ><
Je pensais plus qu'il fallait allier CSS & HTML :/
Enfin je vais réessayer avec un tableau mais le rendu n'est pas jolie jolie ><

[Katchou]

Up s'il-vous-plait :/

[*angiesworld*]

Je suis également très intéressée pour savoir comment on fait!
Je pense que cela reléve plus du CSS et du templates qu'autre chose!

[Invité]

Bonjour,
Voici pour vous deux:

Code:

<img src="URL DE VOTRE IMAGE" class="CLASS CSS">

Puis dans votre CSS:

Code:

.CLASS CSS {
  -moz-border-radius:**px;
  background-color:#******;
  border:*px solid #******;
  margin:*px;
  padding:*px;
}

Code:

.CLASS CSS:hover {
  border:*px solid #****** (couleur différente de celle du premier code);
}

J'ai pas testé, mais ça devrait fonctionner...au cas où, n'hésitez pas à poser vos questions

[Katchou]

Tout d'abord, merci pour ton aide, je pensais bien qu'il s'agissait de HTML & CSS combinés x)
Cependant le code ne fonctionne pas, j'ai tout remplit et ait placé une image avec le code sur la page d'accueil, et mon image apparait sans le cadre souhaité :/

[*angiesworld*]

Bonjour,
Voici pour vous deux:

Code:

<img src="URL DE VOTRE IMAGE" class="CLASS CSS">

Je vais tester.. Mais le probléme c'est que l'image réactive sera utiliser pour ma part.. Aussi pour mes partenariats..
Ce qui fait qu'il faut que lorsqu'une fois que l'on clique sur l'image que cela ouvre une nouvelle page avec le site du partenaire en question!
Quel code dois je donc utiliser?!
Pour le moment voici celui que j'utilise :

Code:

<SPAN class=postbody><A href="LIEN SITE" target=_blank><IMG border=0 src="LIEN DE L'IMAGE" width=30 height=30></A></SPAN>

[Invité]

Bizarre, si je test ça fonctionne nikel.
Pouvez-vous me communiquer ce que vous avez mis exactement (css + html)?

@Angie: j'ai du mal à comprendre votre soucis

[Katchou]

Voici ce que j'ai mit:

Sur ma page d'accueil:

Code:

<img src="http://img16.imageshack.us/img16/9385/99792485.png" class="CLASS CSS">

Dans mon CSS:

Code:


.CLASS CSS {
  -moz-border-radius: 3px;
  background-color:#FFFFFF;
  border:3px solid #EFEFEF;
  margin: 3px;
  padding: 2px;
}

.CLASS CSS:hover {
  border: 3px solid #294D63;
}

Merci pour votre aide^^

[*angiesworld*]

@Angie: j'ai du mal à comprendre votre soucis

Et bien.. Ceci est le code à mettre sur page d'accueil..

Code:

<img src="URL DE VOTRE IMAGE" class="CLASS CSS">

Or moi je dois y inclure en plus du lien de l'image.. Un lien de redirection vers le site voulu! (Puisqu'il s'agit d'image de partenaire.. Donc je dois y mettre le lien de leur site en plus..)
Comment l'intégrer?!
Vous comprenez?! =//

Sur le code donné on ne peut que mettre le lien de l'image, mais moi je dois y ajouter le lien du forum en plus..

[Invité]

Ah oui ok.

Dans ce cas:

<a href="URL SITE"><img src="URL DE L'IMAGE" class="CLASS CSS"></a>

[Katchou]

Ah merci également pour ça x)
Par contre je ne vois vraiment pas quel est mon problème T-T
Et toujours pas de cadre autour de mes images ><

[Invité]

Pouvez-vous me communiquer ce que vous avez mis exactement (css + html)?

[Katchou]

Ah pardon vous vouliez tout mon CSS & mon HTML?
Je pensais juste comment j'avais remplit vos codes :/

Voici alors:

Spoiler:

& mon CSS:

Spoiler:

Voilà x)

[Invité]

Whoops, c'est moi qui avait zapé votre message! Autant pour moi.

Donc...mmmh, j'ai mis "CLASS CSS" pour exemple, mais c'était à vous de mettre ce que vous vouliez: "cladreicon", "idoncadre", etc. Bref, un truc assez simple pour que vous vous rappeliez de quoi il s'agit. Changez CLASS CSS par ce que vous voulez dans les html et le css, et ça devrait fonctionner...

[Katchou]

Ah je me disais bien xD
Alors j'ai changé le titre, et j'ai mit: iconcadre, mais si un trait blanc est apparu, il est collé à l'image et quand je passe la souris, la couleur ne change pas T-T
Voici mon forum pour que vous voyiez:

Il s'agit du petit cadre en haut de la page d'accueil :/

EDIT: C'est bon problème résolu^^
merci beaucoup!

[*angiesworld*]

Tout est également bon pour moi aussi!
Merci à toi Makoto Yuki d'avoir prit de ton temps de nous venir en aide!