[HTML] Shape area sur une image qui se trouve dans un div

**Ryan Sheckler** · 19/06/2007, 10h49

Hello world,

Sujet à la croisée du html et du css.

J'ai crée une image. Insérée dans une page html, elle devra jouer le rôle de "cadre de navigation" au centre duquel devra s'afficher une autre image, comme sur la capture suivante :

Les flèches rouges appartiennent à l'image "cadre de navigation" alors que la photo de Sartre est la seconde image : une image dans une image.

Alors voilà comment je débute mon implémentation ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#cadre_navigation
{
	width: 134px;
	height: 80px;
	background-image: url('./nav.png');
}
 
 #image_dans_cadre{
	background-image: url('./" . $Num_image .".png') ;
	margin-left: 19px ;
	width: 96px ;
	height: 80px ;
}
-->
</style>
</head>
 
<body>
 
<div id="cadre_navigation">
	<div id="image_dans cadre"">
	</div>
</div>

Bref, vous voyez qu'il y a un div dans un div : une "image dans cadre" dans un "cadre navigation", une image dans une image...

MAIS je voudrais faire en sorte de pouvoir cliquer sur une flèche rouge de mon "image de navigation". Il me faut donc faire un shape area sur img.

Seulement voilà, si j'enlève le "background-image" du div afin de réaliser mon shape are sur IMG, et que j'implémente comme ça dans le body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id='cadre_navigation'><img src='./nav.png' width='134px' height='80px' border='0px' usemap='#test' /><div id='image_dans_cadre'></div></div>";

Je n'ai plus de div dans un div, d'image dans une image, et voilà le rendu du navigateur :

Auriez-vous quelque chose à me proposer pour résoudre le problème ?

**blueice** · 19/06/2007, 12h57

Pourquoi ne pas faire trois images en ligne ?

**Ryan Sheckler** · 19/06/2007, 14h47

Grâce à psafy, j'ai résolu le truc avec z-index.

Je ne voulais qu'une image de navigation (qui comprend les deux flèches) et pas de javascript.

**blueice** · 19/06/2007, 14h50

Tu m'intrigues là !
Comment spafy a résolu ça, sans Javascript ?
Il faut gérer les comportements sur une image...

Moi je proposais :
flèche_gauche | image | flèche_droite
et sur les flèches tu faisais un lien...

**Ryan Sheckler** · 19/06/2007, 17h48

Envoyé par blueice

Tu m'intrigues là !
Comment spafy a résolu ça, sans Javascript ?
Il faut gérer les comportements sur une image...

Moi je proposais :
flèche_gauche | image | flèche_droite
et sur les flèches tu faisais un lien...

J'ai fait un shape area sur une image, avec z-index pour la superposer à la seconde image. Au début, je voulais faire un shape area sur une image qui se trouve dans un div (c'est le titre du sujet, d'ailleurs).

[HTML] Shape area sur une image qui se trouve dans un div

HTML

Discussions similaires

Partager

Partager