Fair une zone réactive sur une image appellée par feuille de style CSS

Bonjour,
Ma feuille de style appelle une image sur toutes les pages html. Il s'agit en fait du bandeau présent sur toutes les pages du site. Je souhaite faire un lien sur un endroit précis du bandeau, sans succès.. J'ai pensé au map, mais je ne dois pas respecter les règles en matière de code..
Voici mon code dans la feuille CSS qui appel l'image:

#top {
BACKGROUND: url(../medias/bandeau.jpg) no-repeat
}

Voici ce que je voulais "mixer" avec pour la zone de lien, sans succès :

<img src="../medias/bandeau.jpg" width="685" height="160" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="454,109,633,154" href="../plop.pdf" target="_blank">
</map>

J'espère que j'ai été plus clair!
Merci de votre aide!

Salut,
ce que tu peux faire,
c'est faire un div qui aura ton image comme image de fond et il aura aussi

position:relative

dans ce div tu rajoute un <a> avec

position:asbolute;

et tu le positionne ou tu veux ^^

<!-- div contenant le background-->
<div id="conteneur">
<!-- ton lien a--->
<a href="#" class="lienPdf">Ton lien</a>
</div>

div#conteneur
{
 background:#fff url(ton image) no-repeat top left; //le #fff est a changer par la couleur qui remplacera le mieux ton image
position:relative;
}
a.lienPdf
{
position:absolute;
top:xx px;
left: xx px; // remplacer les xx par des chiffre
}

voila en gros ce qu'il faut faire ensuite a toi de pauffiner tout ca ^^

J'ai beau lire les tutoriaux... Je n'ai toujours pas réussi..
Je remplace dans ma feuille de style :

#top {
BACKGROUND: url(../medias/bandeau.jpg) no-repeat
}

(ou l'image est simplement appelée)

Par:

div#conteneur
{
background:#333333 url(../medias/bandeau.jpg) no-repeat top left;
position:relative;
}
a.lienPdf
{
position:absolute;
top:500 px;
left: 300 px;
}

(ou l'image est appelée et possède alors une zone réactive vers le pdf)

résultat: l'image n'est plus "appelée", elle ne s'affiche plus sur mes pages html, ... Et à quel moment donne t-on le lien du pdf? Oh pardonnez mon ignorance...

Bonjour!

Serait-il possible de m'aider?

salut,

c'est vrai que je trouve le forum peu réactif en ce moment. bizarre..

Bon avec ce que tu as indiqué ds ton post précédent, on peut supposer que ton a est mis là où il faut, mais :

un a href est un élément inline il n'est pas + grand que le texte que tu doit mettre dans sa balise dans le html.

Afin de rendre une zone autour du texte de ce a href plus grande, on peut par exemple lui ajouter un padding: 30px; (enfin ce que tu veux ), mais je pense que le passer en display: block ne serait pas une mauvaise idée non plus (mais prendra toute la largeur de son parent).

au fait: c'est quoi div#conteneur ??

le tien ne s'appelle-t-il pas #top ??

Bonjour!
Merci de m'avoir répondu! Mais c'est un peu trop technique pour moi cette réponse!

"un a href est un élément inline il n'est pas + grand que le texte que tu doit mettre dans sa balise dans le html"
Je ne comprend pas puisque je ne touche pas aux pages html, seulement à la feuille de style... Ce que je ne comprend pas non plus, c'est pourquoi le lien vers mon pdf n'apparait pas dans ce code.. Et puis de toutes façons, rien ne fonctionne puisque mon image ne s'affiche même plus!

Le mien s'appelle effectivement #top à la base...

Pourquoi personne ne veut m'aider!

Bonjour Bibiche,

Tu n'es pas très claire dans tes explications, ton code mal présenté et pas très complet ( tu pourras relire les règles du forum )
Je suppose que tu as déjà tenté de coder tout cela ? Peut-être même peux-tu présenter l'ensemble de ton oeuvre ou même une page en ligne ?
Tout cela faciliterait grandement les choses et surtout les réponses que tu pourrais obtenir

Il y a évidemment plusieures manières de faire, en voici deux :

-Placer ton image dans le lien directement dans ton code html :

<a href="montruc.pdf">
<img alt="" src="truc.pdf"/>
Télécharger mon truc au format <abbr lang="en" title=" Portable Document Format ">PDF</abbr>
</a>

-Procéder comme tu tentes de le faire (image en background du lien):

<a id="trucpdf" title="mon truc PDF à télécharger" href="truc.pdf">
<span>Télécharger mon truc au format <abbr lang="en" title=" Portable Document Format ">PDF</abbr>

A toi de définir le positionnement, les fioritures, etcaetera de ton id .trucpdf

En espèrant avoir contribué à apaiser ta "desespérance", n'hésites pas à poster de nouveau si tu as encore des soucis, à être plus claire, nous présenter le code qui te pose éventuellement toujours soucis, nous donner un feedback, ou ce que tu veux d'ailleurs, mais toujours avec le sourire

Cdt,
Sylvain
Modifié par 6l20 (26 Jan 2008 - 18:27)

En passant:

6l20 a écrit :
-Placer ton image dans le lien directement dans ton code html :

<a href="montruc.pdf">
<img alt="Télécharger mon truc au format pdf" src="truc.pdf"/>
Télécharger mon truc au format <acronym title=" Portable Document Format, un format de fichier informatique universel créé par la société Adobe Systems... ">PDF</acronym>
</a>

Une alternative vide (alt="") ferait tout aussi bien l'affaire.

Merci d'être passé
Toute la difficulté de définir si une image à un sens... je vais y arriver un jour...

Thanks.

6l20 a écrit :
Toute la difficulté de définir si une image à un sens

L'image illustre ici simplement le contenu textuel qui suit, l'information que tu fournissais à l'alternative est redondante.

Benjamin D.C. a écrit :

L'image illustre ici simplement le contenu textuel qui suit, l'information que tu fournissais à l'alternative est redondante.

Chef oui chef

Bon bah, tant qu'on y est:

6l20 a écrit :

<a href="montruc.pdf">
<img alt="" src="truc.pdf"/>
Télécharger mon truc au format <acronym title=" Portable Document Format, un format de fichier informatique universel créé par la société Adobe Systems... ">PDF</acronym>
</a>

- abbr, pas acronym
- abbr lang="en" si le contenu est "Portable Document Format"
- ", un format de fichier informatique universel créé par la société Adobe Systems..." n'a rien à faire ici (d'autant qu'il est impossible de fournir une indication de langue pour un contenu d'attribut bilingue).

m'ferez 3 jours
Modifié par Laurent Denis (26 Jan 2008 - 18:18)

Engagez-vous qu'ils disaient...