5568 sujets

Sémantique web et HTML

Difficultés images réactives

Bonsoir à tous,

je cherche à ouvris une grande image en clikant sur une vignette, et pouvoir refermer cette grande image en clikant sur une zone réactive "close"

voici mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>ess</title>

<style>
.pres{
position:fixed;
margin-left:350px;
margin-top:100px;
}
</style>
</head>

<body>
<!-- définition de l'image grand modèle, invisible au départ -->
<img name="presenta" class="pres" style="border: 0px solid ; width: 789px; height: 553px;" 
alt="" src="" usemap="#ferme">
<!-- définition de la zone réactive-->
<map name="ferme"><area shape="rect" coords="702,19,769,38" href="" onclick="document.presenta.src='';"></map>
<!-- définition de la vignette qui fera apparaitre en cas de click la grande image-->
<a href=""><img src="Photos/bijoux_pm.jpg" onclick="document.presenta.src='Photos/coeuretpastillePMgrand.png';"></a>
</body>
</html>


Malheureusement ca ne marche pas, en effet, la grande image n'apparait que quelques dixièmes de secondes lors du relâchement du click gauche...

voici le lien vers la page test
[URL="http://www.latelier-de-julie.com/ess.html"]http://www.latelier-de-julie.com/ess.html[/URL]

Si l'un d'entre vous peux m'aider ca serait sympa.

Merci d'avance
Philippe
Bonjour,

Ca peut pas marcher puisque le href du lien n'est pas renseigné, ce qui recharge la page et la remet à son état initial.

Puis le NAME dans IMG n'est pas à proscrire mais un ID est quand même préférable.
Modifié par rs459 (13 Feb 2011 - 21:15)
Merci pour cette réponse,

comment faire alors pour le lien ?
Pourquoi Id plutôt que name ?

Merci
Philippe
Déjà le onclick devrait être présent sur le lien pour pouvoir annuler l'event via javascript.

Ensuite tu devrais prévoir que le liens pointe sur la ressource dans le cas ou le javascript serait désactivé, ce qui la rendra d'ailleurs plus visible pour les moteurs de recherche.

Sinon au pire mettre # dans le href (déconseillé, parce que totalement inutilisable sans JS).

Ensuite ID plutôt que NAME parce qu'aujourd'hui presque tous les recommandations n'utilisent plus NAME sauf HTML4.01, ce qui permet une compatibilité avec les nouveaux standards, mais aussi javascript qui permet une manipulation plus standard via getElementById.

N'oublies pas d'utiliser les Alt dans tes img.
Modifié par rs459 (14 Feb 2011 - 00:08)
Sujet clos
Aller à