[Résolu] Ajouter un lien sur une zone précise

Bonjour,

Je souhaiterai rajouter un lien sur une zone bien précise.

En effet voici mon image :

http://jap-anime.eg2.fr/images/design/navigation.png[/url]

Comme on le constate, j'ai ebsoin de rajouter plusieur liens sur ce fond.

actuellement le code CSS est

#navigation
{	
	background-image: url("../images/design/navigation.png"); 
	position:absolute; 
	width: 218px;
	height: 400px;
	top: 0px;
	left: 147px;
}

Voilà merci d'avance
Modifié par Sidji (20 Jan 2008 - 18:38)

une map semble la solution la plus adaptée a ce genre de situation
Modifié par hakkou (17 Jan 2008 - 21:33)

ok je vais voir ca , merci.
Modifié par Sidji (17 Jan 2008 - 21:12)

Soit une image map, soit un découpage avec image de fond et images pour le titre et les liens. L'avantage de la deuxième solution, c'est qu'on peut modifier le positionnement exact de tel ou tel lien très facilement via CSS. L'avantage de l'image map, c'est que ça va assez vite à faire.

Pour une solution avec menu HTML classique:

<div id="navigation">
<h2><img alt="Navigation" src="images/nav-titre.png" /></h2>
<ul>
	<li id="nav-forum"><a href="..."><img alt="Forum" src="images/nav-forum.png" /></li>
	<li id="nav-livre"><a href="..."><img alt="Livre d'or" src="images/nav-livre.png" /></li>
	<li id="nav-rss"><a href="..."><img alt="RSS" src="images/nav-rss.png" /></li>
	<li id="nav-irc"><a href="..."><img alt="IRC" src="images/nav-irc.png" /></li>
</ul>
</div><!-- #navigation -->

Bonjour!
J'ai le même soucis... Seulement je ne suis pas encore experte, alors je n'arrive pas à me débrouiller avec ces explications!
Voilà, ma feuille de style appelle une image sur toutes les pages html. Je souhaite faire un lien sur un endroit précis de cette image, 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>

Merci de votre aide!

Bibiche a écrit :
Bonjour!
J'ai le même soucis...

Oui mais non. Chaque problème est différent, à moins que l'on cherche à réaliser exactement la même chose.

Je pense qu'il serait préférable de créer un nouveau sujet pour ton problème, et d'y exposer ce problème plus en détail, en montrant ce que tu veux faire (un aperçu en image, par exemple), et montrant ce que tu as tenté (code HTML et CSS ou page en ligne...), etc.

De plus, lorsqu'on cherche à traiter plusieurs problèmes ne serait-ce que légèrement différents dans un même sujet, on perd très vite le fil et ça devient ingérable.

Florent V. a écrit :
Soit une image map, soit un découpage avec image de fond et images pour le titre et les liens. L'avantage de la deuxième solution, c'est qu'on peut modifier le positionnement exact de tel ou tel lien très facilement via CSS. L'avantage de l'image map, c'est que ça va assez vite à faire.

Pour une solution avec menu HTML classique:

<div id="navigation">
<h2><img alt="Navigation" src="images/nav-titre.png" /></h2>
<ul>
	<li id="nav-forum"><a href="..."><img alt="Forum" src="images/nav-forum.png" /></li>
	<li id="nav-livre"><a href="..."><img alt="Livre d'or" src="images/nav-livre.png" /></li>
	<li id="nav-rss"><a href="..."><img alt="RSS" src="images/nav-rss.png" /></li>
	<li id="nav-irc"><a href="..."><img alt="IRC" src="images/nav-irc.png" /></li>
</ul>
</div><!-- #navigation -->

merci bien, je vais plutot pencher pour la méthode map mais il semble que el tuto de alsacreation en soit indisponible pour le moment

À ma connaissance, il n'y a pas de tutoriel sur Alsacréations traitant de la création des image maps. Il faudra chercher ailleurs.
Modifié par Florent V. (18 Jan 2008 - 14:34)

Bonjour,

en cherchant un peu sur le web j'ai réussi a effectué ceci qui m'a permis d'obtenir mes coordonnées,

<img src="navigation.png" width="218" height="400" border="0" usemap="#map" />

<area shape="rect" coords="105,97,142,107" href="http://forum.jap-anime.org" />
<area shape="rect" coords="71,110,128,120" href="livre_d_or.php" />
<area shape="rect" coords="96,123,120,132" href="rss.php" />
<area shape="rect" coords="99,137,119,146" href="irc.php" />
</map>

cependant dans mon cas je n'utilise pas du tout d'image car l'image désiré est en background

#navigation
{	
	background-image: url("../images/design/navigation.png"); 
	position:absolute; 
	width: 218px;
	height: 400px;
	top: 0px;
	left: 147px;
}

Pourrait-on em donner un tuyau?

Edit: Bon on em dit qu'une map est impossible sur un background, donc résolu
Modifié par Sidji (19 Jan 2008 - 20:09)