problème balise span

14 août 2008, 18:10

Bonjour,
J'ais mis en place une image réactive avec une infobulle seulement je souhaite faire en sorte que le fond de l'infobulle soit de la même couleur que le fond de la page (#3C3C3C) et que la couleur du texte de l'infobulle soit en rouge
Voici le bout de code utilisé

Code : Tout sélectionner

<SPAN TITLE="Retour à l'accueil">
<a HREF="#" onMouseOver="Bouton.src = imageB.src"
onMouseOut="Bouton.src = imageA.src"><img SRC="logo4.jpg"
NAME="Bouton" BORDER="0"></a></span>

Comment dois je procéder?

Merci d'avance
[/code]

15 août 2008, 04:13

Tu parles de l'infobulle

Code : Tout sélectionner

TITLE="Retour à l'accueil"

Si c'est ça, c'est (encore) impossible, car ça vient du navigateur et/ou même de l'OS, donc tu ne peux pas modifier ça...

Après, si tu y tiens vraiment, tu peux toi-même créer ton infobulle en CSS et Javascript si tu veux que ça soit plus dynamique...
Mais cette solution reste pas fiable à 100%
Et surtout, n'oublie pas le

Code : Tout sélectionner

alt=""

pour l'accessibilité

15 août 2008, 19:55

Hey

,

Une solution qui serait très agréable serait tout simplement :

Code : Tout sélectionner

<a href="#" title="Texte de ton infobulle" class="image">Texte de ton image ou du lien</a>

et avec un simple CSS :

Code : Tout sélectionner

a.image {
    display: block;
    height: /* hauteur de ton image */;
    width: /* largeur de ton image */;
    background: transparent url("imageA") 0 0;
}

a.image:hover {
    background: transparent url("imageB") 0 0;
}

Il existe encore une autre solution, plus poussée, qui va t'économiser de la bande passante et améliorera le confort de l'utilisateur. Cela consiste à fusionner les images, verticalement, et tu aurais le code CSS suivant :

Code : Tout sélectionner

a.image {
    /* pareil */
    background: transparent url("imageFusionnee") 0 0;
}

a.image:hover {
    background: transparent url("imageFusionnee") 50% 0;
}

En fait, on décale le fond de sa moitié vers le haut. Comme les deux images sont fusionnées verticalement, on verra la première image, puis la seconde (si elles font la même hauteur).

Est-ce que tu comprends ? C'est beaucoup plus correct sémantiquement, c'est plus rapide, enfin bref, c'est mieux partout

.

15 août 2008, 21:30

Il existe encore une autre solution, plus poussée, qui va t'économiser de la bande passante et améliorera le confort de l'utilisateur. Cela consiste à fusionner les images, verticalement, et tu aurais le code CSS suivant :
Code : Tout sélectionner
a.image { /* pareil */ background: transparent url("imageFusionnee") 0 0; } a.image:hover { background: transparent url("imageFusionnee") 50% 0; }
En fait, on décale le fond de sa moitié vers le haut. Comme les deux images sont fusionnées verticalement, on verra la première image, puis la seconde (si elles font la même hauteur).

Il s'agit de la technique dite des "portes coulissantes", qui permet de réunir autant d'images qu'on veut en une seule, l'économie en bande passante s'expliquant par le fait qu'une seule image est chargée.

À noter que l'on peut améliorer la feuille de style et obtenir le changement d'image qu'on obtient au survol lorsqu'on navigue au clavier. Pour cela, il suffit de modifier la dernière déclaration CSS comme suit :

Code : Tout sélectionner

/* La pseudo-classe :focus produit un effet équivalent à la pseudo-classe :hover */
a.image:hover, a.image:focus {
    background-position: 50% 0;
    /* Pas besoin de reprendre les valeurs de background-color et de background-image,
    puisqu'elles ne changent pas */
}

Dans les versions inférieures à la 8, IE n'implémente pas la pseudo-classe :focus ; auquel cas, il faut employer la pseudo-classe :active, qui fera le même effet que :focus pour les versions d'IE précédemment citées :

Code : Tout sélectionner

/* Déclaration CSS équivalente à a.image:focus pour IE jusqu'à la version 7
(IE 8 implémente la pseudo-classe :focus)
déclaration à insérer dans une feuille de style à part appelée au moyen
du commentaire conditionnel <!--[if lte IE 7]><![endif]--> */
a.image:active {
    background-position: 50% 0;
}

À noter que, dans cet exemple, il faut que les deux images soient mises côte à côte horizontalement, étant donné que la valeur qui change est la première : celle du positionnement par rapport au côté gauche de l'image. Si les deux images étaient disposées côte à côte verticalement, c'est la seconde valeur de background-position (celle du positionnement par rapport au côté haut de l'image) qui changerait.

15 août 2008, 23:36

Ahh merci de me reprendre sur l'ordre des valeurs top et left, je me plante systématiquement

.
Désolé webide de cette erreur, j'aurais dû vérifier

.

16 août 2008, 02:44

Ahh merci de me reprendre sur l'ordre des valeurs top et left, je me plante systématiquement .

Moi pareil

Faut dire qu'il n'y a (à ma connaissance) que le background pour lequel on commence par la gauche. Pour les padding, margin, on commence par le haut. Y'a de quoi entretenir l'embrouille

16 août 2008, 11:05

Exact. Surtout qu'on peut les inverser si on précise les valeurs top et left textuellement, et pas une valeur numérique …

16 août 2008, 16:11

Exact. Surtout qu'on peut les inverser si on précise les valeurs top et left textuellement, et pas une valeur numérique …

Effectivement.

Pour illustrer le propos, voici ce que dit la spécification CSS 2.1 :

If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position.

En français :

Si au moins une valeur n'est pas un mot-clé, alors la première valeur représente la position horizontale et la seconde la position verticale.

Autrement dit, pour l'exemple donné plus haut, on peut écrire :

Code : Tout sélectionner

a.image:hover, a.image:focus {
  background-position: center top;
}

ou

Code : Tout sélectionner

a.image:hover, a.image:focus {
  background-position: top center;
}

indifféremment.

problème balise span

Qui est en ligne