OVH Cloud OVH Cloud

Insérer des images survolées

3 réponses
Avatar
Stéven Morvan
Salut,

Je me permets de poster une petite question qui appelle une petite
réponse : comment faire pour insérer des images survolées (liens avec
image sans clic et image avec clic) dans le composer HTML Mozilla sans
devoir insérer le Javascript à la main ? Je pose cette question car je
donne des cours d'initiation à la création de pages web avec Mozilla et
ne souhaite pas rentrer dans le détail de Javascript avec mes élèves...
Donc s'il existe une solution simple.

Merci pour toute info !
--
Stéven Morvan

3 réponses

Avatar
Christophe
Stéven Morvan wrote:
Salut,

Je me permets de poster une petite question qui appelle une petite
réponse : comment faire pour insérer des images survolées (liens avec
image sans clic et image avec clic) dans le composer HTML Mozilla sans
devoir insérer le Javascript à la main ? Je pose cette question car je
donne des cours d'initiation à la création de pages web avec Mozilla et
ne souhaite pas rentrer dans le détail de Javascript avec mes élèves...
Donc s'il existe une solution simple.

Merci pour toute info !
--
Stéven Morvan



tien, c'est amusant, j'ai fait un roll-over CSS ce matin.

la page en question http://batraciens.net/dendrobates.htm
C'est la flèche en ligne 10.

Pour y voir plus claire, je t'ai fait un fichier simplifié
http://batraciens.net/essai12.htm, avec commentaires.

regarde le code, c'est assez simple.

--
____________________________________________________________________

http://batraciens.net/
"BATRACIENS" : Un site consacré à l'élevage et à la maintenance des
batraciens, aquatiques ou terrestres.
Nombreuses Photos et articles de maintenance. Petites annonces.
____________________________________________________________________
____________________________________________________________________
Avatar
Thomas
"Christophe" a écrit dans le message de news:
tien, c'est amusant, j'ai fait un roll-over CSS ce matin.

la page en question http://batraciens.net/dendrobates.htm
C'est la flèche en ligne 10.

Pour y voir plus claire, je t'ai fait un fichier simplifié
http://batraciens.net/essai12.htm, avec commentaires.

regarde le code, c'est assez simple.



Ça n'est pas si simple. Il y a même une *astuce* : faire un lien sur un
espace insécable...

Malheureusement, cette astuce à l'effet (involontaire ?) de rendre ce lien
totalement inaccessible à ceux qui ne peuvent voir les images : handicapés
visuels, personnes ayant désactivé l'affichage des images, environnements
non graphiques, etc...

La preuve :
la page test :
http://minilien.com/?9IaWT6RMaS
le lien en situation :
http://minilien.com/?EJApMbNMrv

Thomas
Avatar
Christophe
Thomas wrote:

"Christophe" a écrit dans le message de news:

tien, c'est amusant, j'ai fait un roll-over CSS ce matin.

la page en question http://batraciens.net/dendrobates.htm
C'est la flèche en ligne 10.

Pour y voir plus claire, je t'ai fait un fichier simplifié
http://batraciens.net/essai12.htm, avec commentaires.

regarde le code, c'est assez simple.




Ça n'est pas si simple. Il y a même une *astuce* : faire un lien sur un
espace insécable...

Malheureusement, cette astuce à l'effet (involontaire ?) de rendre ce lien
totalement inaccessible à ceux qui ne peuvent voir les images : handicapés
visuels, personnes ayant désactivé l'affichage des images, environnements
non graphiques, etc...



Ce n'est pas l'astuce qui rend cette visu texte impossible : c'est le
fait que la demande
est d'affichier un lien purement graphique. Alors si on ne voit pas les
graphiques, évidement...

C'est l'inconvénient des roll-over CSS en pure graphisme. On peut
peut-etre ruser en mettant une autre boite en-dessous la première, avec
un z-index inférieur Elle serait alors cachée par la boite graphique.
mais si celle-ci ne passe pas, on verrait la seconde, avec le lien texte.
J'ai pas testé.


--
____________________________________________________________________

http://batraciens.net/
"BATRACIENS" : Un site consacré à l'élevage et à la maintenance des
batraciens, aquatiques ou terrestres.
Nombreuses Photos et articles de maintenance. Petites annonces.
____________________________________________________________________
____________________________________________________________________