[DHTML] Image map en pop-up menu's

[Verwijderd]

Op een pagina heb ik een menu als image map van een enkele .jpg. Ipv dat de "hotspots" direct naar andere pagina's linken, wil ik dat ze met een klik erop een pop-up menu'tje laten verschijnen. Ik heb hier even naar gezocht, en ik krijg de indruk dat ik JavaScript, DHTML, CSS Layers en Image Maps moet manipuleren om dit klaar te krijgen. Omdat ik van deze vier dingen vrijwel niets afweet heb ik ook geen idee waar ik moet beginnen. Kan iemand me helpen, doorverwijzen naar een aardige, complete tutorial? BVD.

[Willem]

Waarom denk je dat je hier heel erg veel voor moet manipuleren? De hotspot in de ImageMap heeft toch een a href ? Die kun je best vervangen door een JS functie met popup..

[Verwijderd]

Wat je in feite wil is aan de mouseclick of mouseover event van je area's een DIV showen of hiden.

Zoek eens naar:
• area
• onclick
• onmouseover
• div show/hide

Op dit forum. Dan moet je al een flink aantal dingen tegenkomen.

Alvast een tip: een area moet voor sommige browsers ook een href gedefinieerd hebben voordat de onmouseover en de onclick werken...

[Verwijderd]

Code om div's te showen/sluiten:
In je head:
Het script

code:

<script type="text/javascript">
function layerOpen() {
document.getElementById ( 'toelichting' ).style.visibility='visible'
}
function layerClose() {
document.getElementById ( 'toelichting' ).style.visibility='hidden'
}
</script>

De eigenschappen van de toelichting

code:

<style>
#toelichting {
   position:absolute;
   top:10px;
   left:10px;
   width:147px;
   height:90px;
   background-color : #808080;
   visibility = "hidden"
}
</style>

In je body
Area gedeelte

code:

<area blabal href="javascript:layerOpen()">

Popup-gedeelte

code:

<div id="toelichting">Tekst<br><a href="layerClose()">Sluit toelichting</a></div>

[Verwijderd]

Verwijderd schreef op 09 November 2002 @ 20:08:

code:

<area blabal href="javascript:layerOpen()">

Topicstarter: er is hier iemand heel aardig voor je

Maar een ding:
Gebruik liever:

PHP:

<area href="javascript://" onclick="layerOpen(); return false;">

Of nog liever:

PHP:

<area href="alternatieve_pagina.html" onclick="layerOpen(); return false;">

Het javascript: pseudo-protocol is namelijk gewoon vies. En het liefst wil je mensen die op je link klikken maar niets te zien krijgen (omdat hun browser geen javascript ondersteunt) gewoon naar een alternatieve pagina sturen.

[Verwijderd]

PHP, eh? <Gulp>

Nieuwe vraag: ik heb nu rudimentaire pop-up menu's gemaakt--alleen vallen ze onder/achter naastliggende frames als de pop-up voorbij de grenzen van z'n "moeder-frame" gaat... hoe kan ik ervoor zorgen dat de pop-up boven alles uitkomt?

[Verwijderd]

Verwijderd schreef op 10 November 2002 @ 15:42:
PHP, eh? <Gulp>

Nee, die had ik alleen ff voor de syntax-highlighting. Er zit geen php-code in.

Nieuwe vraag: ik heb nu rudimentaire pop-up menu's gemaakt--alleen vallen ze onder/achter naastliggende frames als de pop-up voorbij de grenzen van z'n "moeder-frame" gaat... hoe kan ik ervoor zorgen dat de pop-up boven alles uitkomt?

Niet. Dat is een eeuwenoud probleem. Zijn verschillende pseudo-oplossingen voor, zoek hier maar eens naar 'frame', 'layer', 'z-index'.

[Verwijderd]

^^ Zie Blues

Wat hij bedoelt is dus dat je van het frames idee al zult moeten stappen (dus gewoon eenvoudige pagina's gebruiken), dan zal je menuutje nergens onder vallen als je z-index de hoogste is _{behalve onder select-boxes en misschien flash movies}

Wat misschien nog het makkelijkst is, is je menuutje opnieuw vormgeven zodat je je frames kunt blijven gebruiken, dat scheelt een hoop moeite

[Verwijderd]

Vooruitgang is ovgs te zien op http://www.vu.nl/vuniverse .
Ben nu blij zat dat de menu's tenminste werken--en redelijk zijn gepositioneerd, enig puntje is dat ze alleen verdwijnen als je op dezelfde lanceer-hotspot klikt... verder moeten die verdomde horizontale scrollbars nog weg.

In ieder geval bedankt iedereen.

PS - van frames afstappen? wat een revolutie...