Survol d'une image...

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Survol d'une image...

fgiuliano

Bonjour à tous,

Je me retrouve bloqué à cause, j'en suis sûre, de qqch de très facile mais que je n'arrive pas à comprendre...
J'essaie de faire un survol sur une image (quand je passe sur mon image, elle change...)et je ne m'en sors pas.

Voilà ce que j'ai fait:
Sur ma page .htm:

Code :

<a class = "image" href = "#top"><img src = "images/s_nav/new_s_nav/FlecheHaut.jpg"></a>

Sur ma page .css:

Code :

a.image
{
display: block;
width: 16px;
height: 18px;
background-image: url (images/s_nav/new_s_nav/FlecheHaut.jpg);
background-repeat: no-repeat;
}
a.image:hover
{
background-image: url(images/s_nav/new_s_nav/FlecheHaut2.jpg);
}

Quel est le problème?
Mon image s'affiche mais si je passe dessus, rien ne se passe...
Merci

Message édité par fgiuliano le 20-06-2006 à 13:48:13

Publicité

afbilou

pouet your life

il faut que tu enleves l'element img a l'interieur de ton lien.
Dans ton cas l'element a englobe parfaitemenent l'image et cette image ne permet pas de voir le fond appliqué au <a>.

evite les espaces entre un attribut et sa valeur :
class = "truc" --> class="truc"

pour faire un rollover plus efficace que ce que tu fais tu peux faire :
http://afbilou.free.fr/tmp/preload.html
le but etant de creer un fichier image contenant les deux etats en meme temps : normal et hover
de positionner correctement le background-image en fonctione de cet etat
ca permet de ne pas attendre que le navigateur charge la nouvelle image au survol du lien

gatsu35

Blablaté par Harko

tu vire la balise img qu'il y a dans ton code ca marchera ptet mieux [:petrus75]

Message cité 1 fois

fgiuliano

gatsu35 a écrit :

tu vire la balise img qu'il y a dans ton code ca marchera ptet mieux [:petrus75]

ok, déjà merci pour vos réponses... Ensuite, si je comprends bien, il faudrait enlever cette ligne:

Code :

<img src = "images/s_nav/new_s_nav/FlecheHaut.jpg">

?

En faisant ceci, j'ai bien ma seconde image qui apparaît quand je passe dessus avec ma souris mais la première non...

Bon, je vais aller sur le lien que afbilou m'a conseillé et je vais voir si je m'en sors...
Merci

fgiuliano

Bon, ben... j'ai beau essayer, je n'y arrive pas...

voilà mon code dans mon <head>:

Code :

<title>Chargement instantanné des images</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
a.image {
display: block;
width: 16px;
height: 18px;
background-image: url(images/s_nav/new_s_nav/FlecheHaut.jpg);
}
a.image:hover {
background-image: url(images/s_nav/new_s_nav/FlecheHaut2.jpg);
}
</style>

et au moment de l'affichage de l'image:

Code :

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

Qu'est-ce qui ne va pas?! :pt1cable:

Message cité 1 fois

xtof_83

Freeride Spirit

avoir rien dans le a

met un  

Message cité 1 fois

fgiuliano

xtof_83 a écrit :

avoir rien dans le a

met un  

je viens de le faire... mais ça ne fonctionne tjs pas... :pfff:

afbilou

pouet your life

Message cité 1 fois

fgiuliano

afbilou a écrit :

:ange:

Désolée pour le temps passé juste pour cela mais je vous remercie, tout fonctionne correctement maintenant...
:hello:

afbilou

pouet your life

de riiiiien :ange:

Publicité

fgiuliano

Re bonjour à tous... alors tout fonctionne correctement mais...

avec Internet Explorer et pas avec FireFox... :fou:

En effet, sous FireFox, l'image n'apparaît pas du tout...
Je suis en train de regarder à droite et à gauche mais je ne vois pas pourquoi...

Est-ce que quelqu'un aurait une idée? :??:

Merci d'avance!

Message cité 1 fois

afbilou

pouet your life

fgiuliano a écrit :

On cherche a partir de koi ?

fgiuliano

fgiuliano a écrit :

voilà mon code dans mon <head>:

Code :

<title>Chargement instantanné des images</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
a.image {
display: block;
width: 16px;
height: 18px;
background-image: url(images/s_nav/new_s_nav/FlecheHaut.jpg);
}
a.image:hover {
background-image: url(images/s_nav/new_s_nav/FlecheHaut2.jpg);
}
</style>

et au moment de l'affichage de l'image:

Code :

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

Tjs le même code... sorry

FORUM HardWare.fr

Programmation

HTML/CSS

Survol d'une image...

Sujets relatifs
zoom sur image??	Image Submit
Soumettre avec une image	[javascript] affichage de l'iamge au survol de l'image
Zoom sur survol d'image	image au survol d'un texte
Image qui se modifie au survol de la souris	[CSS] affichage d'une image au survol d'un texte
[VB] image qui change au survol de la souris..	comment ouvrir une image au survol d'un liens? SVP
Plus de sujets relatifs à : Survol d'une image...

Page générée en 0.050 secondes