[HTML/CSS] Image op imagemap

Door nick op 09-04-2008 15:41

926 views

Ik ben al enige tijd bezig met het volgende probleem:

Ik heb een imagemap met standaard area's.
Deze coords doen het goed, alleen als ik een plaatje op deze coords zet..plaatst ie m OVER mijn imagemap heen en doen de <area href> tag het niet meer.

Ik wil dit, omdat ik als de gebruiker hier heeft geklikt, een ander plaatje wil tonen.

Mijn vraag is dus:

Hoe plaats ik een plaatje [dynamisch] op mijn imagemap, maar dat ik hier nog wel op kan klikken.

Niek Weevers

09-04-2008 23:19

Ik denk dat ik het ander zou oplossen dan.
Geen imagemap want dan verdwijnt inderdaad de link onder de afbeelding.
Ik zou dan linkjes absolute positioneren en deze standaard op de hoogste laag laten staan.
Zoiets:


<div id="container">
<a href="" class="link1">Link1</a>
<a href="" class="link2">Link2</a>
<a href="" class="link3">Link3</a>
<div class="nieuwelaag"></div>
<img src="afbeelding">
</div>

css


#container { position: relative; width: 500px; height: 500px;}
a { position: absolute; z-index: 3; }
a.link1 { width: 30px height: 30px; left: 10px; top: 10px;}
a.link2 { width: 30px height: 30px; left: 140px; top: 30px;}
a.link3 { width: 30px height: 30px; left: 210px; top: 210px;}
#nieuwelaag {position: absolute; z-index: 2; }

Enige nadeel is dat je linkvakjes hier altijd rechthoekig zijn, bij een imagemap kun je varieren

nick

10-04-2008 08:22

Het is ook mogelijk op de imagemap manier. Travian.com gebruikt dit bijv.
Echter als ik naar hun css file wil browsen krijg ik een error.

de code in html:


<map name="map1">
<area href="build.php?id=39" title="Rally Point building site" coords="270,158,303,135,316,155,318,178,304,211,288,227,263,238,250,215" shape="poly">
</map>

<img class="d1" src="img/un/g/iso.gif" width="75" height="100">

<img class="dmap" usemap="#map1" src="img/un/a/x.gif" width="422" height="339" border="0">

Bij de image waar ik map1 gebruik. staat in de CSS (denk ik) dat de echte image als achtergrond gebruikt moet worden. x.gif = soort van blank.gif als overlay.

Jan Koehoorn

10-04-2008 08:55

Op travian gebruiken ze een dummy button die absoluut gepositioneerd is. Imagemaps zijn erg moeilijk om gevalideerd te krijgen, is mijn ervaring.

nick

10-04-2008 09:00

Bedankt voor je reactie, maar hoe bedoel je dat Jan?
Wat heeft travian in de CSS staan, waar ik niet uit kom?

Reageren

Inloggen om te reageren