[Résolu]Survol d'une image...

y a pas grand monde sur ce forum...

Bin d'abord on n'est pas aux pièces, hein  .. Et puis pas de réponse en cat Prog en une seule petite heure et en plein midi, c'est un peu normal, non ?  


Logique : tu déclares ton image et dans ta balise <img> et dans ta CSS.. Celle qui l'emporte est ....... celle de ta balise <img> : elle est en avant-plan, alorsque ta CSS ne déclare que celle d'arrière-plan  ..

Donc, pour bien faire, tu fais ceci dans ton code HTML :

En HTML 4.01 (obsolète) :

<a class="image" href="#top"><img src="images/transparent.png"></a>

Et en XHTML 1.0/1.1 (actuel) :

<a class="image" href="#top"><img src="images/transparent.png" alt="" /></a>

Ceci te permettra d'avoir ton image qui va changer au survol.. Le "transparent.png" est un pixel transparent (n'importe quel éditeur d'image sait le faire) qui sera dupliqué sur tout la surface de ton image, puisque tu as déterminé ses dimensions par la CSS..

Sinon, évite de mettre trop d'espaces pour aérer ton code : il se pourrait que certains navigateurs ne comprennent pas bien et se trouvent face à des attributs vides (l'espace étant naturellement un séparateur).. Et puis, plus tu mets d'espaces pour aérer, plus tes fichiers seviennent lourds : 1 espace = 1 caractère = 1 octet (8bits) dans le jeu de caractère occidental iso-8859-15 (peut être plus en codage Unicode utf-8)..

 

il y a moyen de s'en sortir sans image a l'intérieur ...

Effectivement, on peut définir un <a> sans avoir d'image dedans.. Mais ça peut éventuellement merdouiller au niveau de la validation du code (voir comment arrive le <a> dans la sémantique de la page) : à vérifier avec un site de validation (W3C ou WDG)..

 

Hello, déjà merci pour vos réponses!  

Alors effectivement j'avais réalisé que j'avais ma photo à double...

Par contre, en ne mettant rien dans le <a>, tout fonctionne correctement sous IE mais pas sous FF...

Est-ce que vous seriez pourquoi?

Voici mon code .css:

.image

{

display:block;

width:16px;

height:18px;

background-image:url('C:/site_html/site_FR/images/s_nav/new_s_nav/FlecheHaut.jpg');

}

 
.image:hover 

{

background-image:url('C:/site_html/site_FR/images/s_nav/new_s_nav/FlecheHaut2.jpg');

}

et mon code dans ma page .htm:

<a class="image" href="#top"></a>

Merci

M'enfin, puisqu'on te dit d'y mettre quelque chose !

Merci pour ta réponse... mais tranquille, pas besoin de m'agresser...

Mal réveillée ce matin et pas tout vu...

Je vais essayer cela maintenant!

Meuhh non, je ne t'agresse pas.
QUAND JE VEUX AGGRESSER QUELQU'UN C'EST COMME CA QUE JE LE FAIS !
Mais je ne le ferais pas.

Tu nous dis quand ça marche ?

Ok, alors j'ai fait une image transparente que j'ai inséré dans ma page comme cela:

<a class="image" href="#top"><img border="0" src="../images/s_nav/new_s_nav/transparent.png" alt="" /></a>

et le reste, je n'ai rien changé...  

Sur IE, ça fonctionne tjs mais sous FF mon image n'apparaît tjs pas...

Par contre en survolant la zone, j'ai bien le lien qui me permet d'aller en haut de ma page...

C'est tout à fait normal : IE étant intégré à Windows, il sait aussi se comporter comme un simple explorateur de fichiers, ce pour quoi FF n'est pas du tout prévu (un navigateur Web n'est pas, sauf quelques uns, un explorateur de fichiers local).

Dans ta CSS, ce qui ne va pas, ce sont les emplacements de tes images : tu spécifies un chemin absolu qui ne passe pas..

Voici ce qui va aller, en utilisant des chemins relatifs (ce qui était d'ailleurs impec' dans ton premier post) :

.image

{

display: block;

width: 16px;

height: 18px;

background-image: url('images/s_nav/new_s_nav/FlecheHaut.jpg');

}

 
.image:hover 

{

background-image: url('images/s_nav/new_s_nav/FlecheHaut2.jpg');

}

Tout en sachant que le chemin relatif précisé dans la CSS est relatif à la position de la CSS elle-même ! Comme c'est aussi le cas pour les images et les scripts appelés depuis une page Web.

 

Ok, merci beaucoup, c'est tout bon et tout marche nickel!!!  

A bientôt