[HTML/CSS] Image op imagemap
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.
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:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<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>
<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
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#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; }
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
Echter als ik naar hun css file wil browsen krijg ik een error.
de code in html:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<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">
<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.
Gewijzigd op 01/01/1970 01:00:00 door nick
Wat heeft travian in de CSS staan, waar ik niet uit kom?