Image, lien, title et alt

Bonjour à tous,

J'ai un peu de mal avec l'habillage des images...

Le code html :

<div id="sommaire"> <a href="essai" title="Retour à la page d'accueil des jeux de rôle"><img src="role.png" alt="Accueil jeux de rôle" width="150" height="120"/></a>

Le style associé :

#sommaire
{
float:left;
padding-left:1%;
padding-top:1%;
background-color:#2F2C2A;
width:180px;
}

J'aimerai savoir que l'image soit entouré d'un petit cadre de couleur, et quand l'image pointe vers un lien, le cadre change de couleur.

Pour l'instant je sèche. Je suis comme un c... avec ça :

img
{

}


img a
{

}

img a:hover
{

}

Et je ne sais pas quoi faire.


Autre question :

Dans IE, le lien m'active une bulle avec le texte de la balise alt=
Dans Firefox, le lien m'active la bulle avec le texte de la balise title=

Voilà voilà....

Merci d'avance
Modifié le 02 Dec 2004 - 14:57

pour les bulles c'est normal, IE et les standards....

a:hover {
  border-color: red;
  border: thin;
}
a {
  border-color: blue;
  border: thin;
}

un truc de ce genre là je pense... (si t'avais une page online pour illustrer on pourrait tester des modifs ds la feuille de style en temps réel : vive FireFox)

wiwi a écrit :

Dans IE, le lien m'active une bulle avec le texte de la balise alt=
Dans Firefox, le lien m'active la bulle avec le texte de la balise title=

Le alt n'est pas destiné à être affiché dans les bulles, mais IE a choisi de les afficher. Le alt :

W3C recommandations a écrit :
Cet attribut spécifie un texte de remplacement pour les agents utilisateurs qui sont incapables d'afficher les images, les formulaires ou les applets

L'attribut title peut être appliqué à presque tous les éléments html et donc pas que sur img (quelques exceptions tout de même). Le title permet de donner des informations sur l'élément:

W3C recommandations a écrit :
Les agents utilisateurs peuvent restituer les valeurs des attributs title de diverses façons. Les navigateurs visuels peuvent, par exemple, afficher leur valeur sous la forme d'une « infobulle » [ndt. tool tip] (un bref message qui apparaît quand le dispositif de pointage reste au-dessus d'un objet). Dans le même ordre d'idée, les agents utilisateurs sonores peuvent vocaliser les informations de titre. Par exemple, le placement de l'attribut sur un lien permet aux agents utilisateurs (visuels et non-visuels) d'indiquer à l'utilisateur la nature de la ressource reliée

Merci Igor

@Poire :

http://www.chezwiwi.com/role/index.php

J'ai mis une image avec/sans lien.
les valeurs prises et bien... voilà.... J'ai dû rater quelque chose

#sommaire a {
  border-color: red;
}
#sommaire a:hover {
  border-color: blue;
}

petit rappel : IE ne gère les hover que sur les link (balise "a")
edit : employer javascript pour le faire sur autre chose...

img a {
}
représente le style de <a> contenu dans <img> (alors qu'en général c'est +tôt l'inverse )
Modifié le 02 Dec 2004 - 15:39

Je pédale un peu dans la choucroute là je dois dire. Me demande si le plus simple ça va pas être de faire un truc du style "quand souris passe dessus, je charge une autre image".

beh ajouter une bordure c'est pas trop compliqué, parcours les tutoriels d'Alsa si t'as un peu de mal avec le CSS

Sinon explicite plus ce qui te tracasse, les résultats obtenus/voulus, etc...

vi vi ajouter une bordure, pas de problème mais j'aimerai juste qu'elle change de couleur quand la souris passe dessus (et lien derrière l'image).

wiwi a écrit :
vi vi ajouter une bordure, pas de problème mais j'aimerai juste qu'elle change de couleur quand la souris passe dessus (et lien derrière l'image).

La recherche est ton amie : une bordure au survol d'une image

donc tu dois avoir un truc du genre

<a class="MyClass" href=""><img strc="" alt="" /></a>

et comme CSS

.MyClass img {
  border-color: blue;
}

et il te suffit de rajouter un truc du genre

.MyClass:hover img {
  border-color: red;
}

Modifié le 02 Dec 2004 - 16:38

@Poire > seul problème : la balise <a> n'a pas de dimensions, donc cela pose des problèmes avec la bordure (voir lien donné)

Arf...
Merci pour le lien Raphael, j'arrive même plus à utiliser mon amie cet après-midi

Je regarderai ça demain parce que là, je n'arrive plus à me concentrer

Raphael a écrit :
@Poire > seul problème : la balise <a> n'a pas de dimensions, donc cela pose des problèmes avec la bordure (voir lien donné)

un chtit dispay: block et ça roule
Si la bordure est au lien ça peut géner mais on peut pas mettre la bordure à l'image ? et dans ce cas ne pas avoir besoin du display: block ? enfin je dis ça...

wiwi a écrit :

Merci pour le lien Raphael, j'arrive même plus à utiliser mon amie cet après-midi

C'est pourtant une amie qui ne se lasse pas d'être utilisée

Poire a écrit :

un chtit dispay: block et ça roule

Oui et non : un display block nécessite une largeur définie sinon le <a> prendra toute la largeur disponible ... et c'est un peu contraignant de devoir donner une largeur à tous les liens afin qu'ils correspondent bien à la taille de l'image

Poire a écrit :

mais on peut pas mettre la bordure à l'image ? et dans ce cas ne pas avoir besoin du display: block ? enfin je dis ça...

Ouaip, sauf que dans ce cas, il faudrait un img:hover ... or IE bla bla bla

OK

http://www.alsacreations.com/blog/billets/bordures4.htm

avec

comme code :

<!--
a img {
border: 0 none; /* suppression des marges par défaut sur l'image */
}
a {
border : 2px solid white; /* le lien doit posséder une bordure pour éviter les décallages au survol */
float: left; /* float passe la balise en block sans qu'elle n'occupe tout l'espace horizontal */
line-height: 1px; /* pour éviter un bug d'espace sur Mozilla */
}
a:hover {
border: 2px solid blue;
}
-->

Par contre tout ce qui fait référence à <a> passe à la moulinette. Faut pas que j'oublie ça tiens

Raphael a écrit :

Ouaip, sauf que dans ce cas, il faudrait un img:hover ... or IE bla bla bla

un

a:hover img {
  blabla
}

ça marche pas ?

Poire a écrit :

un

a:hover img {
  blabla
}

ça marche pas ?

ça marche sous FireFox, mais tjs pas sous IE
Saloperie de IE