5545 sujets

Sémantique web et HTML

[RÉSOLU] Rendre gif animé cliquable html5

Bonjour,

voila je débutes dans la création d`un site internet et bien sur je suis confrontée à plein de problèmes !!!
J`ai beaucoup appris avec les tutos du site du zéro et bien sur ceux d`Alsacréation qui m`aident beaucoup.

Voila mon problème: j`ai créé une image gif animé placée sur mon site et je voudrai rendre cette image cliquable vers une autre page du site.
Le hic c`est que quoi que j`essai, seule une partie de l`image est cliquable: la partie supérieure, quand on passe la sourie sur la pancarte avec le texte, ce n`est plus cliquable.
upload/43372-retouracti.gif
J`ai essayé ce code:

<img src="images/retouractivitesgif.gif" alt="Retour Page Activités" width="245" height="175" border="0" usemap="#e3Map" id="e3" title="">
<map name="e3Map">
  <area shape="rect" coords="5,6,245,174" href="activites.htm" alt="">
</map>


css:

img#e3              { /* images/retouractivitesgi... */
position: absolute;
	border			: 0;
	left            :  131.25pt;
	top             : 622.5pt;
	width           : 183.75pt;
	height          : 131.25pt;
	}


Seule la partie supérieure est cliquable !!!
Si vous avez une solution pour une débutante au bord de la crise de nerf, merci beaucoup !!!
Modifié par loloduquebec (20 Feb 2012 - 18:27)
Bonjour,

Pourquoi ne pas faire simplement
<a href="tapage"><img src="tonimage" alt="texte alternatif" /></a>
Ou alors tu voulais que seule la partie en bas soit cliquable ?
Modifié par Gothor (20 Feb 2012 - 00:19)
Bonjour Gothor

c`est ce que j`avais fait en premier et le résultat était le même, la partie du bas n`était pas cliquable.
Alors j`ai essayé avec map et area en entourant toute l`image et même résultat.
Je comprend pas, normalement c`est simple !!!
Il doit y avoir un autre élément qui empêche l'accès complet à cet image...
Tu peux montrer ton code ou (mieux) ta page en ligne ?
Si on ne peut pas cliquer sur toute l'image, c'est à cause de l'image du footer qui vient se poser sur une couche au dessus et rend inaccessible une partie du panneau.

Tu as mis beaucoup d'élément en position : absolute alors que généralement, ce n'était pas nécessaire...

Si tu laisses les éléments dans le flux, ce sera sûrement plus simple pour toi de t'organiser =)

Aussi, tu as une div#page qui contient... toute la page ^^' C'est le rôle de l'élément body, tu devrais te passer de cette div et utiliser directement body =)
ok pour le div page, je comprend.

Par contre, "Si tu laisses les éléments dans le flux, ce sera sûrement plus simple pour toi de t'organiser =)", la je comprend pas ce que tu veux dire ?

Le problème viendrait d`élément mis en absolute ? C`est mieux de mettre quoi alors ?
En fait, par défaut, les éléments sont placés dans le flux et vont suivre certaines règles. Ainsi, les balises de type block vont aller à la ligne et avoir certaines propriétés que les inline n'auront pas.
Un élément placé dans le flux est dépendant des éléments qui l'entourent.

Quand tu utilises la propriété position : absolute ou position : fixed, l'élément sort du flux, sa position ne dépend plus de ce qui l'entoure (d'ailleurs on doit lui indiquer où se placer...)

Tu peux lire ça pour en apprendre plus sur le positionnement : (en trois parties)
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html

Le mieux (et le plus simple je pense) est de laisser tes éléments dans le flux sans utiliser position : absolute (ou pour certains usages particuliers...)

Tu peux par exemple t'inspirer d'un plan comme celui-ci...
<body>
    <header>
    </header>
    <nav>
        <ul>
            <li>un lien...</li>
            <li>un autre lien...</li>
        </ul>
    </nav>
    <div id="content">
        <!-- Ici, ton contenu -->
    </div>
    <footer>
    </footer>
</body>
body {
    width : 800px;
    margin : 0 auto;
}
nav {
    float : left;
    width : 200px;
}
#content {
    margin-left : 210px;
}
Je le reconnais, c'est très banal comme plan, mais au moins c'est plus ou moins structuré =°
Modifié par Gothor (20 Feb 2012 - 01:10)
Merci, je vais bosser le tuto !!! et revoir mon plan !!!
Par contre, en attendant y a t-il une solution pour que mon image du footer passe dessous l`image de la pancarte ?

Merci
Sujet clos
Aller à