histoire de pro ? a: hover span

da capo

da capo

abonné absent
Club iGen
12 Août 2001
17 460
3 598
Bonjour, la question est peut être pointue ou la réponse évidente mais je ne m'en sors pas.

Voilà mon souci : j'utilise le code (présenté plus bas) sur un site en phase de construction. cette page par exemple

Lorsque j'utilise FireFox ou Opera, j'arrive à faire apparaitre un calque bien positionné qui affiche des infos sur l'image survolée. c'est le style .vignette a:hover span qui est utilisé.

Sur IE par contre, cela ne s'affiche pas et je passe donc par des commentaires conditionnels pour ajouter ce texte.

Mais là où cela me turlupine, c'est que des fragments de texte (que j'imagine être ceux provenant du <span>) s'affichent... J'ai même eu le contour (pointillé) de l'élément span qui est apparu.

Aussi, je me demande s'il n'y a pas une astuce spécifique à IE pour pouvoir faire afficher ces maudits commentaires.

merci par avance...

Bloc de code: 
.vignette {
float:left;
margin-bottom:1em;
margin-top:0;
margin-left:2em;
text-align:center;
font-size:80%;
}

.vignette img {
border:none;
}
.vignette a span {
display:none;
}
.vignette a:hover span {
background-color: #767B8A;
position:fixed;
display:block;
margin-top:120px;
margin-left:10px;
height:auto;
width:auto;
color:#ffffff;
text-align:left;
padding:0.5em;
}
 
Jete un petit coup d'½il ici. Je m'étais cassé la tête la dessus, à priori dans Internet Explorer le ":hover" ne marche que sur les liens. Tout ceci dépassant de loin mes compétences j'ai abandonné. :( :( Peut-être y comprendras tu quelque chose !!!!
 
Merci, je viens de faire le tour d'un paquet de forums (en oubliant selfhtml ;)) et pas de solution pour le moment.

En même temps, je ne suis pas très satisfait de l'apparence.

Je vais travailler encore là dessus...

merci
 
starmac a dit:
Bonjour, la question est peut être pointue ou la réponse évidente mais je ne m'en sors pas.

Voilà mon souci : j'utilise le code (présenté plus bas) sur un site en phase de construction. cette page par exemple

Lorsque j'utilise FireFox ou Opera, j'arrive à faire apparaitre un calque bien positionné qui affiche des infos sur l'image survolée. c'est le style .vignette a:hover span qui est utilisé.

Sur IE par contre, cela ne s'affiche pas et je passe donc par des commentaires conditionnels pour ajouter ce texte.

Mais là où cela me turlupine, c'est que des fragments de texte (que j'imagine être ceux provenant du <span>) s'affichent... J'ai même eu le contour (pointillé) de l'élément span qui est apparu.

Aussi, je me demande s'il n'y a pas une astuce spécifique à IE pour pouvoir faire afficher ces maudits commentaires.

merci par avance...
]
Cliquez pour agrandir...

Cet effet est déjà prévue dans IE et Safari, il s'agit de l'attribut "title"de la balise <img> , qui elle n'est pas pris en charge par FF. il me parait donc logique qu'il y ait comme un bug d'affichage... tu lui demandes d'afficher deux choses à la fois...
la solution de kaviar me parait simple sur le papier, mais pour gerer la multitude de commentaires que tu veux mettre cela devient vite inexploitable.

Pour aller plus loin tu pourrais indiquer un attribut d'opacité pour le bg de ton message (même si ce dernier n'est pris en charge que par mozilla - et donc FF - et ignoré par les autres)

.vignette a: hover span{
opacity:0.5;
}
 
fredmac75 a dit:
Cet effet est déjà prévue dans IE et Safari, il s'agit de l'attribut "title"de la balise <img> , qui elle n'est pas pris en charge par FF. il me parait donc logique qu'il y ait comme un bug d'affichage... tu lui demandes d'afficher deux choses à la fois...
la solution de kaviar me parait simple sur le papier, mais pour gerer la multitude de commentaires que tu veux mettre cela devient vite inexploitable.

Pour aller plus loin tu pourrais indiquer un attribut d'opacité pour le bg de ton message (même si ce dernier n'est pris en charge que par mozilla - et donc FF - et ignoré par les autres)

.vignette a: hover span{
opacity:0.5;
}
Cliquez pour agrandir...

En fait, j'ai bien renseigné title dans un premier temps, mais cela ne me convenait pas graphiquement : cela faisait redite avec les commentaires.

Ceci dit, kaviar m'a mis sur la piste ! Et en exploitant les scripts présentés par selhtml, je suis en train d'en voir le bout :up:. La solution que j'exploite en ce moment n'est pas complètement idéale mais fonctionne sur FireFox, IE et Opera sur PC : je suis au boulot : en pleine veille technologique :D :D :D.

C'est un peu lourdingue mais ça devrait le faire.

Si ça roule, je montre :)
 
En fait si j ai bien compris il s agit d' une infobulle ??? si c est le cas on trouve ça sur alsacreation ...

a.info {
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info:hover span {
display: inline;
position: absolute;
top: 2em;
left: 1em;
background: orange;
text-align: center;
color: white;
padding: 2px;
}
 
  • J’aime
Réactions: da capo
starmac, je viens de me rendre compte d'un autre soucis...
lorsque le dimensionnement de la fenêtre du navigateur fait apparaître un ascenceur et que tu descend ce dernier, le positionnement des info en est modifié d'autant ...

Le plus simple ne consisterait-il pas à faire un texte sous ta photo ?
 
  • J’aime
Réactions: da capo
Le plus simple ne consisterait-il pas à faire un texte sous ta photo ?
Cliquez pour agrandir...
J'y pense :)
j'y pense...

orsque le dimensionnement de la fenêtre du navigateur fait apparaître un ascenceur et que tu descend ce dernier, le positionnement des info en est modifié d'autant ..
Cliquez pour agrandir...
je regarde ça... mais je ne comprends pas ce que tu indiques...
 
hemelune a dit:
En fait si j ai bien compris il s agit d' une infobulle ??? si c est le cas on trouve ça sur alsacreation ...
Cliquez pour agrandir...
Je me suis intéressé à cette option, mais je souhaite que mon texte se positionne au-dessus de l'image.
Dans la dernière version, j'ai réinventé la roue...
MAIS J'Y ARRIVERAI ! .... avant que ma chérie ait trouvé un nom de domaine convenable :D:D :D
 
kaviar a dit:
Là je pense que tu auras du mal à faire mieux :D :D

Cliquez pour agrandir...

Je ne vois rien :( :heu:

Mais cela ressemble à ce que j'ai fait ???

Le but final est de ne couvrir qu'une partie de l'image... Je sens que je n'ai pas fini de chercher ;)
 
kaviar a dit:
":hover" ne marche que sur les liens.
Cliquez pour agrandir...

ben c'est bien le cas ici non ? :

starmac a dit:
est le style .vignette a:hover span qui est utilisé
Cliquez pour agrandir...
ou bien&#8230;

&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;

Bon, si je résume bien : tu as une sorte de galerie / index pour laquelle tu souhaiterais un affichage contextuel de la description des galeries liées ?
 
Nephou a dit:
Bon, si je résume bien : tu as une sorte de galerie / index pour laquelle tu souhaiterais un affichage contextuel de la description des galeries liées ?
Cliquez pour agrandir...

Oui, c'est bien cela.

Je résume mes soucis :
- voeu 1 : lisibilité la plus étendue possible (PC :IE Firefox Opera MAC : Safari Firefox Opera)
- voeu 2 : éviter le javascript, éviter les hacks pour IE
- au final : afficher un texte libre, sur un fond permettant d'assurer un bon contraste en ne recouvrant qu'une partie de l'image située dessous (voir miniature). Si la hauteur de cette zone s'adaptait au texte... ce serait le rève...

J'ai fait quelques essais mais sans grand succès :
- je peux afficher le texte seul au dessus de l'image mais dans ce cas, j'ai un souci de lisibilité avec les images NB fortement contrastée.
- je peux remplacer l'image complète par un fond grisé : là on lit bien, mais on ne voit plus l'image... sauf si je l'ajoute en background mais le pb de contraste est de retour...
 
J'ai la réponse pour une partie de ta question (en effet tu peux oublier la transparence avec ie 6). tu es intéressé ? en fait c'est un trigger-bug connu de ie :p


Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" >

    <head>
        <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8"  />
        <meta name="author" content="Corporate communications"  />
        <title>test</title>
        <style type="text/css">
        <!--
        .image {position:relative;float:left;display:inline;margin: 0 0 15px 13px;height:160px;width:158px;background:#00669b;}
        .image a {color:#yellow;}
        .image a span {position:absolute;display:none;}
        .image a:hover {text-indent:0;}
        .image a:hover span {display:block;bottom:0;right:0;background-color:lightblue;}
        -->
        </style>
    </head>
    <body>
    <div class="image">
    <a href="#">essai<span>&nbsp;(en cours)</span></a>
    </div>
    <div class="image">
    <a href="#">essai<span>&nbsp;(en cours)</span></a>
    </div>
    <div class="image">
    <a href="#">essai<span>&nbsp;(en cours)</span></a>
    </div>
    <div class="image">
    <a href="#">essai<span>&nbsp;(en cours)</span></a>
    </div>
    <div class="image">
    <a href="#">essai<span>&nbsp;(en cours)</span></a>
    </div>
    <div class="image">
    <a href="#">essai<span>&nbsp;(en cours)</span></a>
    </div>
    <div class="image">
    <a href="#">essai<span>&nbsp;(en cours)</span></a>
    </div>
    </body>
</html>
 
  • J’aime
Réactions: da capo
Nephou a dit:
J'ai la réponse pour une partie de ta question (en effet tu peux oublier la transparence avec ie 6). tu es intéressé ? en fait c'est un trigger-bug connu de ie :p
Cliquez pour agrandir...

Bien sur que je suis intéressé !
 
Pour aller plus loin :
pour qu'internet explorer évalue la valeur des changements de propriété du span contenu dans a:hover, il faut qu'il ait à évaluer la valeur de a:hover seul et qu'il y ait un changement (pour cela j'ai modifié un attribut sans importance, le text-indent). Il évalue ensuite normalement les changement d'attributs du span contenu.
 
Merci beaucoup !
Je vais travailler ça et tenter de l'adapter proprement à mes pages.

:up: :up:
 

Sujets similaires

Y
Problème défilement des ancre avec script jquery sous Safari
Réponses
6
Affichages
6K
Développement web
momo-fr
momo-fr
pb88081
Comment espacer les titres d'un menu ?
Réponses
6
Affichages
3K
Développement web
pb88081
pb88081
omzen
pb alignement block
Réponses
1
Affichages
2K
Développement web
momo-fr
momo-fr
A
Code body et balises compatibles sur tous les navigateurs ?
Réponses
5
Affichages
2K
Développement web
ag5669
A
omzen
Firefox / Safari = language CSS différent ?
Réponses
7
Affichages
4K
Développement web
momo-fr
momo-fr
Haut Bas
Back