mouseout werkt niet door mouseover event - Softwareontwikkeling

woensdag 8 november 2006 09:41

Acties:

Topicstarter

hey allemaal,
ik zit hier met een klein probleempje bij het maken van een menu voor een website.
ik heb hier namelijk verschillende buttons die bij een mouseout verdwijnen. er moet bij een van de buttons echter ook nog een submenu verschijnen. Dit werkt gewoon. Het vreemde is echter dat de button mouseout nu niet meer werkt.

code:

1	<a href="alle merken.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11113211','','images/buttondz.gif',1); toonmenu(this, event, 'linkmenu')"

als ik het toonmenu event bij mouseover weg haal werkt het gelijk weer. maar dan zit ik dus weer zonder menu. Ik hoop eigenlijk dat ik niet hoef te kiezen

Weten jullie wat er fout gaat??

BVD!

woensdag 8 november 2006 09:51

Acties:

André

Analytics dude

Zet de toonmenu functie eens vooraan in de onmouseover

woensdag 8 november 2006 10:02

Acties:

NeORay

Topicstarter

André schreef op woensdag 08 november 2006 @ 09:51:
Zet de toonmenu functie eens vooraan in de onmouseover

dat had ik al geprobeerd en heeft helaas geen nut..

woensdag 8 november 2006 14:31

Acties:

NeORay

Topicstarter

niemand die enig idee heeft?

Modbreak:Niet je eigen topic kicken binnen 24 uur

[ Voor 50% gewijzigd door André op 08-11-2006 16:00 ]

woensdag 8 november 2006 14:40

Acties:

moozzuzz

gokje:
Geven die Frontpage-functies geen return true/false terug?

Evt. es zien of een gewone alert werkt bij jouw toonmenu?

woensdag 8 november 2006 15:26

Acties:

NeORay

Topicstarter

moozzuzz schreef op woensdag 08 november 2006 @ 14:40:
gokje:
Geven die Frontpage-functies geen return true/false terug?

Evt. es zien of een gewone alert werkt bij jouw toonmenu?

sorry, ik volg je ff niet helemaal..
Frontpage functies???

voor de duidelijkheid:
met toonmenu verschijnt er een div popup

[ Voor 9% gewijzigd door NeORay op 08-11-2006 16:09 ]

woensdag 8 november 2006 17:09

Acties:

moozzuzz

MM_swapImgRestore() lijkt me een niet zelf geschreven functie, maar eigenlijk doet het er niet toe wie ze geschreven heeft. Geven ze een return en belangrijker, heeft dat effect op je andere functie (misschien ook es omgekeerde checken)? Wat geeft een alert('GoT') in combi met je toonmenu? Het ware handig om een online voorbeeld te posten, dan weten we tenminste over welke functies we spreken?

[ Voor 8% gewijzigd door moozzuzz op 08-11-2006 17:10 ]

woensdag 8 november 2006 17:27

Acties:

NeORay

Topicstarter

dit is de complete pagina. dat verduidelijkt misschien e.e.a.

code:

<html>
<head>
<title> - HOME</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}
.style2 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
}
.style4 {font-family: Geneva, Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; font-size: 14px; }
-->
</style>

<STYLE type="text/css">
.hyperlinkcss{
    position:absolute;
    margin-left:0px;
    margin-top:0px;
    visibility: hidden;
    border:1px solid black;
    border-bottom-width: 0;
    font:bold 12px Verdana;
    color:white;
    line-height: 15px;
    z-index: 24;
    background-color: #333333;
    width: 108px;
    height: 87px;
}

.hyperlinkcss a{                   
width: 108px;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: plain;
}

.hyperlinkcss a:hover{              
background-color: #D8D8D8;
color: red;
}
}

</STYLE>



<link rel="stylesheet" type="text/css" href="linkmenu.css">
<script type="text/javascript">


var vertraging=0     // vertragingstijd menu vooraleer te verdwijnen (in milliseconden)
var hoofdlink=0        // werking hoofdlink in- of uitschakelen (1=in, 0=uit)
var verbergen=1         // menu verbergen na aanklikken subitem (1=ja, 0=nee)




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

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

function tonen_verbergen(obj, e, visible, hidden){
if (ie5||ns6)
menuobject.style.left=menuobject.style.top=-500
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 rand_bereikt(obj, welke_rand){
var edgeoffset=0
if (welke_rand=="rightedge"){
var vensterrand=ie5 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
menuobject.contentmeasure=menuobject.offsetWidth
if (vensterrand-menuobject.x < menuobject.contentmeasure)
edgeoffset=menuobject.contentmeasure-obj.offsetWidth}
else{
var vensterrand=ie5 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
menuobject.contentmeasure=menuobject.offsetHeight
if (vensterrand-menuobject.y < menuobject.contentmeasure)
edgeoffset=menuobject.contentmeasure+obj.offsetHeight}
return edgeoffset}

function toonmenu(obj, e, dropmenuID){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
if (typeof menuobject!="undefined") 
menuobject.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
menuobject=document.getElementById(dropmenuID)
if (verbergen) menuobject.onclick=function(){menuobject.style.visibility='hidden'}
menuobject.onmouseover=clearhidemenu
menuobject.onmouseout=ie5? function(){ dynamisch_verbergen(event)} : function(event){ dynamisch_verbergen(event)}
tonen_verbergen(menuobject.style, e, "visible", "hidden")
menuobject.x=positie_bepalen(obj, "left")
menuobject.y=positie_bepalen(obj, "top")
menuobject.style.left=menuobject.x-rand_bereikt(obj, "rightedge")+"px"
menuobject.style.top=menuobject.y-rand_bereikt(obj, "bottomedge")+obj.offsetHeight+"px"}
return klik()}

function klik(){
if ((ie5||ns6) && !hoofdlink) return false
else return true}

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

function dynamisch_verbergen(e){
if (ie5&&!menuobject.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !ns6compat(e.currentTarget, e.relatedTarget))
delayhidemenu()}

function delayhidemenu(){
delayhide=setTimeout("menuobject.style.visibility='hidden'",vertraging)}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)}
</script>

<style type="text/css">
<!--
.style5 {color: #FFFFFF}
-->
</style>
</head>

<body bgcolor="#000000" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/buttondz.gif')">
<div id="Layer3" style="position:absolute; left:-2px; top:268px; width:184px; height:295px; z-index:13"></div>
<div id="Laye6" style="position:absolute; top:262px; left:-5px; width:905px; height:480px; z-index: 11; filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40; "><img src="images/moerdijk.gif" width="427" height="438"></div> 
<div id="Layer2" style="position:absolute; top:265px; left:-5px; width:905px; height:480px; z-index: 12; filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40; background-color: #B8B8B8; layer-background-color: #B8B8B8; "> 
  <table width="905" height="480" bordercolor="#FF0000" border="3">
    <tr> 
    <td></td>
    </tr>
  </table>
</div>
<div id="Layer1" style="position:absolute; left:0; top:0; width:100%; height:100%; z-index:1">
  <div align="right"><img src="images/header.gif" width="768" height="247"></div>
</div>
<div id="Layer25" style="position:absolute; left:-3px; top:258px; width:895px; height:339px; z-index:23"> 
  <table width="900" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000">
    <tr>
      <td width="118" height="56"><img src="images/button2.gif" width="20" height="35" style="filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40;"></td>
      <td width="118"><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1111326','','images/buttondz.gif',1)"><img src="images/button2.gif" name="Image1111326" width="110" height="35" border="0" id="Image11" style="filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40;"></a></td>
      <td width="10"><a href="nieuws.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11113212','','images/buttondz.gif',1)"><img src="images/button2.gif" name="Image11113212" width="110" height="35" border="0" id="Image11" style="filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40;"></a></td>
      <td width="110"><a href="merken.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="toonmenu(this, event, 'linkmenu'); MM_swapImage('Image11113211','','images/buttondz.gif',1)"><img src="images/button2.gif" name="Image11113211" width="110" height="35" border="0" id="Image11" style="filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40;"></a></td>
      <td width="110" height="56"><p><a href="historie.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1111321','','images/buttondz.gif',1)"><img src="images/button2.gif" name="Image1111321" width="110" height="35" border="0" id="Image11" style="filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40;"></a></p></td>
      <td width="110"><a href="desprint.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1111322','','images/buttondz.gif',1)"><img src="images/button2.gif" name="Image1111322" width="110" height="35" border="0" id="Image11" style="filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40;"></a></td>
      <td width="110"><a href="ecommerce.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1111323','','images/buttondz.gif',1)"><img src="images/button2.gif" name="Image1111323" width="110" height="35" border="0" id="Image11" style="filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40;"></a></td>
      <td width="110"><a href="vacatures.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1111324','','images/buttondz.gif',1)"><img src="images/button2.gif" name="Image1111324" width="110" height="35" border="0" id="Image11" style="filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40;"></a></td>
      <td width="110"><a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1111325','','images/buttondz.gif',1)"><img src="images/button2.gif" name="Image1111325" width="110" height="35" border="0" id="Image11" style="filter:alpha(opacity=40); -moz-opacity:.40;opacity:.40;"></a></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</div>
<div id="Layer4" style="position:absolute; left:-3px; top:258px; width:902px; height:475px; z-index:14">
  <table width="900" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000">
    <tr>
      <td width="20" height="56"><div align="center" class="style2">
        <div align="center"></div>
      </div></td>
      <td width="110"><div align="center"><span class="style2">Home</span></div></td>
      <td width="110"><div align="center"><span class="style2">Nieuws</span></div></td>
      <td width="110"><div align="center"><span class="style2">Merken</span></div></td>
      <td width="110" height="56"><div align="center"><span class="style2">Historie</span></div></td>
      <td width="110"><div align="center"><span class="style4">Montage bedrijven </span></div></td>
      <td width="110"><div align="center"><span class="style2">E-Commerce</span></div></td>
      <td width="110"><div align="center"><span class="style2">Vacatures</span></div></td>
      <td width="110"><div align="center"><span class="style2">Contact</span></div></td>
    </tr>
  </table>
</div>
<div id="Layer5" style="position:absolute; left:411px; top:305px; width:484px; height:436px; z-index:16; overflow: auto; scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3d-light-color: #000000;
scrollbar-dark-shadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #000000;
scrollbar-base-color:#B10000;">
  <p class="style1"><strong>tekst</strong></p>
  <p class="style1"><strong>blaaaaaat</strong></p>
  <p class="style1"><strong>dsfdsfhjhsfdjhfds</strong></p>
  <p class="style1"><strong>fds</strong></p>
  <p class="style1"><strong>sfd</strong></p>
  <p class="style1"><strong>fds</strong></p>
  <p class="style1"><strong>fds</strong></p>
  <p class="style1"><strong>fds</strong></p>
  <p class="style1"><strong>sdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</strong></p>
  <p class="style1"><strong>fffffffffffff</strong></p>
  <p class="style1">&nbsp;</p>
  <p class="style1"><strong>dfs</strong></p>
  <p class="style1">&nbsp;</p>
  <p class="style1"><strong>d</strong></p>
  <p class="style1"><strong>sf</strong></p>
  <p class="style1"><strong>fds</strong></p>
  <p class="style1"><strong>fds</strong></p>
  <p class="style1">&nbsp;</p>
  <p class="style1"><strong>fds</strong></p>
</div>
<div align="center">
  <table width="100%" border="0" height="100%">
    <tr>
      <td>
        <div align="center"><img src="images/roadhog_seite_205_55_R16A2.jpg" width="494" height="700"></div>
      </td>
    </tr>
  </table>
</div>
<div id="linkmenu" class="hyperlinkcss" style="width:108px; background-color:#333333; z-index:24 ">
<a href="merken-eigenm.htm" class="style5">Eigen Merken</a>
<a href="merken-eigeni.htm" class="style5">Eigen Import</a>
<a href="merken-winterbanden.htm" class="style5">Winterbanden</a>
<a href="" class="style5">&nbsp;&nbsp;&nbsp;&nbsp;</a>
<a href="merken-allemerken.htm" class="style5">Alle Merken!</a>
</div>

</body>
</html>

woensdag 8 november 2006 19:03

Acties:

user109731

Je overschrijft 'm hiermee:

JavaScript:

1	obj.onmouseout = delayhidemenu;

Hierdoor word dus de oude onmouseout vervangen, en dat wil je niet.

Een hover op een image, en een uitklap menu kunnen trouwens beter met CSS. Dan hou je het allemaal wat netter, en ben je niet afhankelijk van JavaScript.

En het is misschien handig om elk code blok in te springen, dat maakt het geheel veel leesbaarder

[ Voor 66% gewijzigd door user109731 op 08-11-2006 19:07 ]

woensdag 8 november 2006 19:06

Acties:

shnazzle

Grote prutser schreef op woensdag 08 november 2006 @ 19:03:
Je overschrijft 'm hiermee:
JavaScript:
1
obj.onmouseout = delayhidemenu;
Hierdoor word dus de oude onmouseout vervangen, en dat wil je niet.

Een hover op een image, en een uitklap menu kunnen trouwens beter met CSS. Dan hou je het allemaal wat netter, en ben je niet afhankelijk van JavaScript.

Kun je met CSS een delay toepassen? Zo ja... vertel vertel!

woensdag 8 november 2006 19:08

Acties:

user109731

shnazzle schreef op woensdag 08 november 2006 @ 19:06:
[...]

Kun je met CSS een delay toepassen? Zo ja... vertel vertel!

Waar zie jij een delay dan, behalve in de functienaam?

Hij zet vertraging op 0, waardoor die setTimeout geen enkel nut heeft

[ Voor 16% gewijzigd door user109731 op 08-11-2006 19:17 ]

woensdag 8 november 2006 19:08

Acties:

killercow

eth0

shnazzle schreef op woensdag 08 november 2006 @ 19:06:
[...]

Kun je met CSS een delay toepassen? Zo ja... vertel vertel!

Dit heeft niks met CSS te maken, en volgens mij valt dit onder het kopje, "wij debuggen niet jouw scripts"

openkat.nl al gezien?

woensdag 8 november 2006 19:36

Acties:

shnazzle

Grote prutser schreef op woensdag 08 november 2006 @ 19:08:
[...]

Waar zie jij een delay dan, behalve in de functienaam? Hij zet vertraging op 0, waardoor die setTimeout geen enkel nut heeft

(Redelijk offtopic)
Ik ga er toch echt gemakshalve vanuit dat hij niet voor niks een variabel heeft gemaakt voor 'vetraging'...zodat het een keer WEL een waarde > 0 krijgt.

woensdag 8 november 2006 19:57

Acties:

user109731

shnazzle schreef op woensdag 08 november 2006 @ 19:36:
[...]

(Redelijk offtopic)
Ik ga er toch echt gemakshalve vanuit dat hij niet voor niks een variabel heeft gemaakt voor 'vetraging'...zodat het een keer WEL een waarde > 0 krijgt.

Ik ging er vanuit dat het een gekopieerd script was, aangezien het probleem vrij basic is, zeker als je het script zelf geschreven hebt

Anyway, ik zou het toch met CSS doen. Dan kun je daar eventueel nog een klein snifje JS aan toe voegen voor een delay effect. JS is een leuke extra, maar iets cruciaals als de website navigatie moet er niet afhankelijk van zijn, imho

(TS zou ook op de pagina waar de A heenlinkt de opties nogmaals neer kunnen zetten)