Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[résolu] Image HTML et :hover

Nogi

Par Nogi
dans Programmation

 Partager

Messages recommandés

Nogi Member

Nogi

Posté(e)
Posté(e) (modifié)

Ça fonctionne! ... et j'espère faire présentement ce qu'il faut pour mentionner que mon problème est résolu! ... en cliquant "Terminer".

 

Et merci encore!

 

Nogi :P

Modifié par Nogi

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Lorsque tu décides de doter une zone d'une image de fond, tu dois obligatoirement donner de la surface à ta zone. L'image de fond vient en effet, comme son nom l'indique, garnir le fond de la zone. Mais si la zone a des dimensions nulles, l'image manque de place pour apparaître…

 

Par ailleurs, ta zone sensible (balise <a>) doit être incluse dans une zone physique, un bloc (balise <div>, par exemple), la classe (roll) ne semblant pas pouvoir être directement associée à une balise <a>. D'où le code suivant :

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<style type="text/css">
.roll a {
 display:block;
 width:50px;
 height:50px;
 background:url(CV.jpg);
}
.roll a:hover {
 background:url(CR.jpg);
}
</style>
</head>
<body>
<div class="roll">
 <a href="#"></a>
</div>
</body>
</html>

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

Dylav : d'un côté elle a raison de donner la classe "roll" à son <a> parce que sous IE6 le style :hover ne sera pas pris en compte si c'est une <div>, d'un autre il lui manque un contenu dans sa balise parce qu'il me semble que IE6 ignore les attributs de style si l'élément n'a pas de "contenu" (pas de noeud fils) (*)

Il faut donc avoir, dans le corps de la page :

<a href="#" title="verso du schéma de l'appareil digestif" class="roll"> </a>

Note : il n'y a pas d'attribut alt pour les liens.

 

(*) à moins que ce "bug" ne soit là que pour les cellules de tableaux, je ne sais plus...

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Salut KC !

 

Je ne voudrais pas polémiquer (et je sais que la pseudo-classe :hover est censée ne pas fonctionner sous IE6), mais il se trouve que le code que j'ai donné ci-dessus fonctionne parfaitement sur mon IE 6.0.29 :P (et sur FF 1.5).

 

Par ailleurs, il est clair que les images de fond de Nogi ne s'afficheront pas (ou incomplètement) s'il ne donne pas à la zone réceptrice les mêmes dimensions que ces images (en l'occurrence, les miennes étaient en 50x50).

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

Wooops ! Je n'avais pas fait attention au fait que tu avais changé les a.roll et a.roll:hover en .roll a et .roll a:hover

Désolé.

En effet, dans ces conditions-là, ton code fonctionne.

 

(et je confirme : il faut que le <a> ait les mêmes dimensions que l'image qu'on souhaite afficher...)

Nogi Member

Nogi

Posté(e)
  • Auteur
Posté(e) (modifié)

En ajustant qq détails du code de Dylav, tout est ok, ça fonctionne! Voici le résultat, si parfois qq'un d'autre pourrait en aurait de besoin:

 

<html>

<head>

<style type="text/css">

.roll a {

display:block;

width:180px;

height:130px;

background:url("http://a523.ac-images…..jpg");}

.roll a:hover {

background:url("http://a327.ac-images…..jpg");}

</style>

</head>

<body>

<div class="roll">

<a href="#"></a>

</div>

</body>

</html>

 

Merci de votre aide et de vos conseils! :P

 

Nogi :P

Modifié par Nogi
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Nogi, tu viens de commettre une petite erreur, en modifiant ton premier post : désormais, on ne sait plus quel était ton problème ! En fait, ce qu'on te demandait, c'était d'ajouter le mot [résolu] dans le titre de ton post… :P

 

Le problème semble avoir trouvé sa solution.

Ainsi, afin de signaler clairement à ceux qui ont un problème similaire qu'ils ont peut-être une solution toute trouvée (s'ils pensent à utiliser la fonction Recherche en indiquant le mot-clé "résolu" auparavant), et afin de signaler aux autres contributeurs qu'il est inutile de continuer à se creuser la tête sur le problème (à moins d'avoir des suppléments d'informations à apporter pour mieux comprendre ce qui posait problème), un modérateur a préfixé le titre du topic avec la mention [résolu].

Merci, à l'avenir, de bien vouloir prendre à votre charge cette mise à jour quand vous estimez que votre problème a été résolu de manière satisfaisante (et parallèlement, si le problème a disparu "mystérieusement", inutile d'induire les gens en erreur :P) Pour cela, p_edit.gif votre premier message :P

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...