Lien sur une image

21 déc. 2006, 22:53

Bonjour à tous !

J'ai une image de fond qui est mon header que j'ai créé sous photoshop, avec un menu simple :

Accueil, contact ...

J'aimerais créer des liens sur cette image à des points précis ! Comment faire j'ai entendu parlé de maping je crois...

Si il existe un exemple ou un tuto la dessus merci pour votre aide

21 déc. 2006, 22:59

Bonsoir,

En voici un

Une recherche

avec "html map" ou bien "html area shape" te permettera de faire ton choix.

21 déc. 2006, 23:05

Modération :
Afin d'obtenir plus de réponses, le sujet est déplacé dans le forum "HTML, XHTML, CSS".

21 déc. 2006, 23:22

Merci pour la réponse mais mon probleme est que j'utilise une feuille de style CSS, j'indique donc dans ma feuille CSS l'emplacement de mon header. Comme ceci :

div#header{
background-image:url('images/header.jpg');
background-repeat:fixe;
width:770px;
height:236px;
}

Puis je insérer des liens dans ma feuille de style directement ?

21 déc. 2006, 23:55

c'est pas optimum le mapping, pour une carte c'est pas mal. Pour un menu découpe t'est image en tranche avec image ready ou toshop, puis tu pourra te servir de ton code.
faire des rollover entre autre...

22 déc. 2006, 04:34

Bonjour,

Puis je insérer des liens dans ma feuille de style directement ?

Je te dirait non.
C'est pas le rôle de CSS, CSS c'est pour la présentation et il se limite à ça.

Que reproches-tu à <map> ?

A première vue ça correspond à ce que tu veux, non ?

22 déc. 2006, 10:36

En tout cas moi je n'arrive pas à appliquer <map>, peux tu m'explique ou la placer dans ma page sachant que je n'ai pas d'image puisque je fais afficher l'image à partir de ma feuille CSS !

Mercii

22 déc. 2006, 16:24

A priori pour utiliser le mapping, il te faut une image avec l'attribut usemap dans la page, donc tu n'y parviendras pas depuis ton css...
Tu peux peut être l'utiliser sur ton div, bien que je ne pense pas que cela fonctionne, mais comme je n'ai jamais essayé, c'est l'occasion de le découvrir

28 déc. 2006, 02:58

Salut,

Ton image d'entête fait partie de la présentation donc sa place est bien dans le CSS en background d'un h1 ou d'une div si tu y mets plusieurs choses. En revanche, ce n'est pas forcémment le cas de tes liens. Pour ces derniers, tu peux soit placer tes images en background CSS sur chaque lien soit mettre l'image directement dans le (X)HTML si tes exigences graphiques sont particulières... (pour la police de caractères par exemple)

exemple :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

a
{
	position: absolute;
	top: 100px;
	left: 80px;
	display: block;
}
a img
{
	border: 0;
}

		/*]]>*/</style>
	</head>	
	<body>

<a href="http://accueil.htm"><img src="accueil.png" width="240" height="124" alt="accueil" title="" /></a>

	</body>
</html>

- display: block passe le lien en type block afin que tu puisses le placer comme bon te semble...
- border: 0; est nécessaire sur les images comprises dans des liens si tu ne veux pas te retrouver avec une bordure autour de l'image...
- alt sert de texte de remplacement en cas d'indisponibilité de l'image... (lecteurs d'écrans par exemple)
- width et height sont indiqués dans le (X)HTML pour accélèrer la restitution du document dans les navigateurs graphiques...
( + d'infos ici)
- title="" évite d'avoir le alt qui apparaît sur IE quand tu survoles l'image (bug d'IE)

28 déc. 2006, 03:09

PS : Ce qui doit dicter ton choix quant à l'emploi d'une map ou non est le fait que tes liens ont ou non un rapport avec l'image d'entête... Pour une carte avec des villes par exemple, ok mais pour une entête avec un menu dissocié, ce n'est pas un bon choix... d'autant plus qu'il est préférable de mettre le menu à la suite de ton contenu dans un soucis d'accessibilité... (Le visiteur vient dans un premier temps chercher le contenu sur ta page et non le menu)

NB : Un jour, j'arriverais à me connecter avant de poster !

28 déc. 2006, 03:14

NB : Un jour, j'arriverais à me connecter avant de poster !

Il te suffit de cocher la case se "connecter automatiquement"

28 déc. 2006, 03:19

C'est bien ce que je fais mais vu que j'efface tout lorsque je sors de Firefox, ça ne change pas grand chose... Je vais peut-être revoir ce que j'efface à la sortie, tiens...

28 déc. 2006, 03:22

Tu as des espions chez toi

Lien sur une image

Qui est en ligne