Ne fonctionne pas sous IE
Le
Le Fou
Bon, mon précédent fil partant sur OS X, Linux etc. J'en ouvre un autre
beaucoup plus SIMPLE ;-)
Ce bout de code HTLM tout bête :
= Début code =
<html>
<head>
<style type="text/css">
.lightbox {
display: none;
}
.lightbox:target {
display: block;
}
</style>
</head>
<body>
<a href="#cible1"><img src="images/annonces/p_Jeunes_01.jpg"></a>
<div class="lightbox" id="cible1">
<img src="images/annonces/Jeunes_01.jpg" alt="Jeunes">
</div>
</body>
</html>
= Fin code =
Fait apparaitre une grande image quand on clique sur une petite et
utilise la pseudo-classe "target".
Fonctionne parfaitement sous Firefox.
Ne fonctionne pas sous IE9.
Pourquoi ?
La page est visible ici :
<http://ffessm.cd84.free.fr/_test_lightbox.htm>
Merci.
--
A' tchao
Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/
beaucoup plus SIMPLE ;-)
Ce bout de code HTLM tout bête :
= Début code =
<html>
<head>
<style type="text/css">
.lightbox {
display: none;
}
.lightbox:target {
display: block;
}
</style>
</head>
<body>
<a href="#cible1"><img src="images/annonces/p_Jeunes_01.jpg"></a>
<div class="lightbox" id="cible1">
<img src="images/annonces/Jeunes_01.jpg" alt="Jeunes">
</div>
</body>
</html>
= Fin code =
Fait apparaitre une grande image quand on clique sur une petite et
utilise la pseudo-classe "target".
Fonctionne parfaitement sous Firefox.
Ne fonctionne pas sous IE9.
Pourquoi ?
La page est visible ici :
<http://ffessm.cd84.free.fr/_test_lightbox.htm>
Merci.
--
A' tchao
Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/
Le 10/11/2014 20:18, Le Fou a écrit :
Tu devrais commencer par mettre un DOCTYPE, si ça se trouve ça suffira
à faire fonctionner la page sur IE. Je me rappelle qu'à l'époque où je
m'y intéressais, c'est-à-dire environ à l'arrivée d'IE6, le fait de ne
pas trouver de DOCTYPE (ou un DOCTYPE incorrect) le faisait passer dans
une sorte de mode de comptabilité avec IE5, avec tous les bugs liés à
cette version antédiluvienne.
Tu n'as pas mis de TITLE dans ton HEAD alors que c'est obligatoire.
Peut-être aussi une source de problème.
Là il y a une autre erreur, l'absence d'attribut alt, mais je ne
pense pas que ça puisse être l'origine d'un bug.
Cordialement,
--
Olivier Miakinen
Je n'ai pas IE mais Mozilla dit que ça doit fonctionner avec IE.9
Peut-être essayer de donner une taille (styles width et height) au div à
révéler ?
Ça aide bien les IE qu'ils aient le "Layout"
(voir la Bke de Données de M$ à propos de "HasLayout")
(voir aussi alsacreations avec même sujet)
M'enfin ... ça ne devrait pas fonctionner avec les IE <9
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Ce "truc" là d'agrandi n'a un intérêt que très limité !
Dans la mesure où, de toutes façons, la grande vue est chargée à
l'ouverture de la page !
Autant ne se servir que d'elle et en modifier la taille au survol:
css :
==== .vue { text-decoration: none; border: none; }
.vue img { width: 210px }
.vue:hover img { width: 640px; }
html:
====
Mais il serait plus à propos d'utiliser une image de background qui,
elle, ne sera chargée qu'à la demande
(avec un temps de latence surtout pour les visiteurs avec ADSL lent)
css :
==== .vue { text-decoration: none; border: none; }
.vue img { width: 210px; height: 141px;
bakground:url(petite.jpg) no-repeat center center; }
.vue:hover img { width: 640px; height: 430px;
background-image:url(grande.jpg); }
html:
====
'vide.gif' est une image transparente N/B de 1 pixel
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
voir modifs ici :
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
et modifs en variante :
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
et un p'tit dernier pour la route :
Toujours pas testé sous IE (que je n'ai pas)
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Alors, sous IE9 :
- Fonctionne, mais...
L'image s'agrandit dès que le curseur de la souris survole la page
(n'importe quel endroit) ;-)
- Fonctionne mais sans les effets de transition.
- Fonctionne à moitié, l'image "petit format" n'est pas visible.
Je garde tes exemples sous le coude, ils sont sympas mais ce que je
souhaite c'est vraiment faire fonctionner la pseudo-classe "target" avec
MON IE9.
Car ceci n'est qu'un exemple, même en essayant de modifier le background
d'un DIV ou la couleur u texte et. ça ne fonctionne pas avec MON IE9 et
ça m'énerve ;-)
Merci.
--
A' tchao
Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/
J'ai rapidement essayé avec un DOCTYPE "4.01 Transitional", ça
fonctionne en local mais pas en ligne...
J'essayerai demain avec d'autres DOCTYPEs.
Merci.
--
A' tchao
Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/
Alors ça, c'est bizarre. Vérifie d'une part que la page a bien été
transférée (c'est un piège qui arrive plus souvent qu'on ne le croit)
et d'autre part que l'ancienne page n'est pas restée en cache, soit
dans ton navigateur, soit sur un éventuel proxy.
Pour être sûr que c'est la bonne page, ajoute un texte quelconque.
Bon bin... J'y comprends rien non-plus.
Avec un DOCTYPE ça fonctionne en local mais pas en ligne !
Essais effectués avec les DOCTYPEs :
- HTML 4.01 Transitional
- HTML 4.01 Strict
- HTML 4.0 Transitional
- HTML 4.0 Strict
- HTML 5 (<!DOCTYPE html>)
Je vais finir par croire que ma version de IE9 est daubée ;-)
--
A' tchao
Le Fou
http://shippylelivre.free.fr/
http://www.ffessm-cd84.com/