FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY

You are invited to Log in or Register a Frihost Account!

Codevraag

Frihost Forum Index -> Dutch -> Computers en Techniek

Ik ben bezig met een website voor een opdracht voor school. Hierbij wil ik van een dropdownmenu gebruik maken, zie code. Deze moet in de header geplaats worden.

Code:

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: crimson;
}

</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="index.php?pagina=1">Home</a>'
menu1[1]='<a href="index.php?pagina=2">Inleiding</a>'
menu1[2]='<a href="index.php?pagina=3">Visie op het conflict</a>'
menu1[3]='<a href="index.php?pagina=4">Begrippen</a>'
menu1[4]='<a href="index.php?pagina=5">Bronnen</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="index.php?pagina=6">Kaart van het conflictgebied</a>'
menu2[1]='<a href="index.php?pagina=7">Aard van het conflict</a>'
menu2[2]='<a href="index.php?pagina=8">Bron één</a>'
menu1[3]='<a href="index.php?pagina=9">Bron twee</a>'
menu1[4]='<a href="index.php?pagina=10">Bron drie</a>'
menu1[5]='<a href="index.php?pagina=11">Standpunten van de partijen</a>'
menu1[6]='<a href="index.php?pagina=12">Foto\'\s</a>'
menu1[7]='<a href="index.php?pagina=13">Gevolgen</a>'
menu1[8]='<a href="index.php?pagina=14">Internationale bemoeienis</a>'
menu1[9]='<a href="index.php?pagina=15">Cartoon</a>'
var menuwidth='200px' //default menu width
var menubgcolor='white' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

Door van de volgende link gebruik te maken, kun je het menu daadwerkelijk gebruiken, bijvoorbeeld dit:

Code:

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Algemeen</a>

Ik ben eigenwijs geweest en ik wilde dit combineren met het imapping (of hoe heet het ook alweer) van een afbeelding, waarbij de link er als volgt uit komt te zien bij mij:

Code:

<map name="mymap">
<area shape="rect" coords="0,0,116,43" href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '116px')" onMouseout="delayhidemenu()">
<area shape="rect" coords="119,0,337,43" href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '218px')" onMouseout="delayhidemenu()">
<area shape="rect" coords="340,0,510,43" href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '170px')" onMouseout="delayhidemenu()">
<area shape="rect" coords="513,0,630,43" href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '117px')" onMouseout="delayhidemenu()">
</map>

Ik weet dat in de code van het menu geen menu3 of menu4 voorkomt, maar dat doet even niet ter zake.

Bij de code van het menu (hier te bovenste code) zie je dit:

Code:

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="index.php?pagina=1">Home</a>'

Als je dus op dat onderdeel van het menu klikt, is de pagina '1'. En als de pagina '1' is, of een ander getal, doet de volgende code daar weer wat mee:

Code:

<?php include("bovenak.php"); ?>
<?php
switch($_GET['pagina'])
{
case 1: include "homeak.php"; break;
case 2: include "inleidingak.php"; break;
case 3: include "onzevisieak.php"; break;
case 4: include "begrippenak.php"; break;
case 5: include "bronnenak.php"; break;
case 6: include "kaartconflictgebiedak.php"; break;
case 7: include "aardvanhetconflictak.php"; break;
case 8: include "bron1ak.php"; break;
case 9: include "bron2ak.php"; break;
case 10: include "bron3ak.php"; break;
case 11: include "standpuntenak.php"; break;
case 12: include "fotoak.php"; break;
case 13: include "gevolgenak.php"; break;
case 14: include "internationalebemoeienisak.php"; break;
case 15: include "cartoonak.php"; break;
default: include "homeak.php";
}
?>
<?php include("onderak.php"); ?>
</p>

Dus bij pagina '1' krijg jeopgavenakwi.php te zien. Dat klopt allemaal en dat gaat goed. Maar nu is het zo dat als ik met mijn muis over zo'n gemapt deel van de afbeelding ga, ik daaronder het menu krijg te zien, en dat gaat goed bij het eerste 'gemapte' deel van de afbeelding. Maar als ik over het tweede deel van de 'gemapte' afbeelding ga, komt het menu wat daar bij hoort (menu2 dus) op dezelfde plaats als waar menu1 verschijnt, maar dat wil ik onder deel 2 van de gemapte afbeelding weergeven. Weet iemand wat ik in de code moet veranderen om de plaats van het menu goed te krijgen? Zie probeersels.frih.net, daar staat wat ik tot nu toe heb gedaan online, maar bekijk hem wel in Firefox, want in IE komt het menu al helemaal op een rare plaats. Iemand enig idee hoe ik dat dan weer kan oplossen?

Edit: sommige dingen heb ik gisteren nog bewerkt (alleen in links of opmaak), dus hier de meest recente versies.

Last edited by RoomRooz on Mon Apr 30, 2007 9:24 am; edited 1 time in total

Is er echt helemaal niemand die me hier mee kan helpen?

Wil je zo snel hulp? wacht nog maar even tot er meer mensen online zijn gekomen. En anders kan je het wel in een engels forum vragen, als het hier niet lukt.

zet eens een voorbeeld online want de uitleg is nogal moeilijk te begrijpen.

Hier lijkt het te werken, ik krijg respectievelijk 0-3-7-4 submenus

Frihost Forum Index -> Dutch -> Computers en Techniek

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.