verdwijnend mouseover menu - Softwareontwikkeling

dinsdag 4 januari 2005 22:59

Acties:

Topicstarter

heeyz

kheb n website gemaakt en zo goed als afgerond ik heb echter nog één probleempje. Namelijk: er komt een menu tevoorschijn bij een mouseover over een knop die hier een aantal centimeter van verwijderd is. Het probleem is echter dat wanneer je van de knop naar het menu muist dat het menu alweer verdwenen is omdat de knop niet meer wordt angeraakt.

Dus is het misschien mogelijk om het menu een aantal seconden te laten staan zodat je de tijd hebt om er naar toe te muizen of weet iemand misschien iets anders/beters?? Hoe verwerk je dit in de tag?

dit heb ik nu:

HTML:

</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" background="linksframestatic3.jpg" onLoad="MM_preloadImages('menu2ndbutton2.jpg')">
<p> 
  <script language="JavaScript">
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>
</p>
<p>  </p>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position:absolute; left:125px; top:103px; width: 50; height: 50" bordercolor="#111111" width="80" id="AutoNumber1" height="37">
  <tr> 
    <td onMouseOver="toonmenu('site1')" onMouseOut="verstopmenu('site1')" height="37" width="80" background="menubutton2.jpg" bordercolor="#FFFFFF" class="menu"> 
      <br />
      </td>
</table>
</body>
</html><table class="menu" id="site1" width="100%" style="background-image: url(lnksframemenu.jpg); width: 180px; height: 501px; left: -124px; top: 140px">
        <tr> 
          <td class="menu" height="16"> </td>
        </tr>
        <tr> 
          <td class="menu" height="16"> 
            <p><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
                 Wat</font></a> </p>
          </td>
        </tr>
        <tr> 
          <td class="menu" height="16"><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
            </font></a><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2">  </font></a><a href="pag3.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
            Waar</font></a></td>
        </tr>
        <tr>

Ik hoop dat iemand iets weet!!
alvast bedankt!!!

[ Voor 178% gewijzigd door crisp op 05-01-2005 00:06 . Reden: code-tag fixed ]

dinsdag 4 januari 2005 23:01

Acties:

BtM909

Watch out Guys...

yek, tabellen voor layout. Let daar in een redesign eens op. Tegenwoordig (sinds 2004

) zijn er meerdere methoden om je website te layouten.

Daarnaast kan je kijken naar de setTimeOut JS-functie. Hiermee kan je een functie na een zelf te bepalen timeout uitvoeren

oh ja: code kan je tussen [plain]

HTML:

[/] tags plaatsen, dan is het iig iets leesbaarder in je post

[ Voor 18% gewijzigd door BtM909 op 04-01-2005 23:02 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 4 januari 2005 23:25

Acties:

crisp

Devver

Pixelated

1) document.all is oud en IE-only
2) zie de bovenkant van deze pagina

Intentionally left blank

dinsdag 4 januari 2005 23:29

Acties:

NeORay

Topicstarter

ik ben nog maar een beginner op het gebied van webdesign

dus zou iemand mij wat meer precies kunnen uitleggen hoe die set time functie werkt en hoe ik die verwerken moet in de rest van mn script.

dinsdag 4 januari 2005 23:30

Acties:

Woudloper

« - _ - »

Alistapart | Taming the list

dit eventueel in combinatie met Whatever: hover van clay. Zie hier en hier voor werkende voorbeelden...

mp-tje schreef op dinsdag 04 januari 2005 @ 23:29:
ik ben nog maar een beginner op het gebied van webdesign dus zou iemand mij wat meer precies kunnen uitleggen hoe die set time functie werkt en hoe ik die verwerken moet in de rest van mn script.

Je zou hiervoor eens kunnen zoeken naar 'DHTML Menu' (op GoT of bij Google). Een mooi werkend exemplaar van een DHTML Menu is die van DHTML Central, zie hier (Coolmenu).

[ Voor 43% gewijzigd door Woudloper op 04-01-2005 23:36 ]

dinsdag 4 januari 2005 23:42

Acties:

Fuzzillogic

Cool

Dit menu werkt een stuk gracieuzer imo. Netjes met CSS2, en een stukje JavaScript zodat het ook werkt belabberde en verouderde poepbrowsers die CSS crappy implementeren, zoals Internet Explorer 6.

Overigens valt dat stukje Javascript voor de IE-meuk netter te verbergen middels een conditional comment, , maar dat is optioneel.

dinsdag 4 januari 2005 23:56

Acties:

crisp

Devver

Pixelated

Alle CSS-based menu's hebben het nadeel dat het menu meteen verdwijnt zodra je er met je muis even naast gaat. Persoonlijk gaat mijn voorkeur er naar uit om het menu in elk geval nog heel eventjes (al is het maar een halve seconde) open te laten, en dan ontkom je niet aan javascript...

Intentionally left blank

woensdag 5 januari 2005 01:03

Acties:

NeORay

Topicstarter

bedankt voor jullie reacties!! Er is echter een probleempje. Ik heb geen tijd om nu nog een comlete css, dhtml of javascript cursus volgen want doordat het voor een opdracht voor school is ligt m'n deadline al voor maandag. De website wordt hoogstwaarschijnlijk alleen met ie bekeken dus dat is niet zo'n probleem. Dus kan iemand heel simpel zeggen wat er aan wat ik nu heb moet veranderen om te zorgen dat het menu goed werkt? (misschien kan iemand de tag met mijn tags eromheen geven???????

$_/-\o_$ )

woensdag 5 januari 2005 07:09

Acties:

Woudloper

« - _ - »

@ mp-tje: Er wordt van je verwacht dat je zelf ook nog wat denkwerk verricht aangaande de oplossing die gekozen moet worden. Er zijn hierboven reeds verschillende oplossingen aangedragen voor jou probleem. Als ik jou was zou ik eerst even de links bezoeken welke hierboven zijn vermeld. Verder kan je ook nog naar de source van verschillende sites kijken (zoals hier op GoT) om te zien hoe die het hebben opgelost...

Overigens heb je nog genoeg tijd om het menu werkend te krijgen (als de GoLive op maandag is)...

woensdag 5 januari 2005 11:10

Acties:

NeORay

Topicstarter

setTimeout ( "function or expression", delaytime );
Dit is zo'n js settime ik kan die ergens nergens in combinatie met een menuachtig iets vinden. Dus welk gedeelte van het script dat ik al heb moet ik dan bij function of expression plaatsen?

Woudloper schreef op woensdag 05 januari 2005 @ 07:09:
@ mp-tje: Overigens heb je nog genoeg tijd om het menu werkend te krijgen (als de GoLive op maandag is)...

Die tijd valt wel tegen want maandag starten ook mn tentamens en ik vind het wel handig me daar enigszins op voor te bereiden.

vrijdag 7 januari 2005 01:26

Acties:

NeORay

Topicstarter

de tijd begint nu echt te dringen en ik ben er nog steeds niet uit...

is er niemand die me kan zeggen welk gedeelte van mijn tags op die functieplek moet?

vrijdag 7 januari 2005 11:47

Acties:

NeORay

Topicstarter

????

vrijdag 7 januari 2005 11:50

Acties:

Woudloper

« - _ - »

Heb je nog gekeken naar de links welke hierboven waren gegeven? Zo heel erg veel werk is het namelijk niet om het één en ander op basis van bovenstaande documenten te implementeren...

vrijdag 7 januari 2005 11:56

Acties:

dadj

Boeiend, boeiend!

BtM909 schreef op dinsdag 04 januari 2005 @ 23:01:
yek, tabellen voor layout. Let daar in een redesign eens op. Tegenwoordig (sinds 2004 ) zijn er meerdere methoden om je website te layouten.

Daarnaast kan je kijken naar de setTimeOut JS-functie. Hiermee kan je een functie na een zelf te bepalen timeout uitvoeren

oh ja: code kan je tussen [plain]
HTML:
1
[/] tags plaatsen, dan is het iig iets leesbaarder in je post

En wat is het probleem met tabellen??? overtuig me eens..

XBOX 360 Gamertag | Mac mini | Macbook | iMac - God Does Not Have a Plan; He is Just a Kid With an Antfarm

vrijdag 7 januari 2005 12:00

Acties:

NeORay

Topicstarter

Woudloper schreef op vrijdag 07 januari 2005 @ 11:50:
Heb je nog gekeken naar de links welke hierboven waren gegeven? Zo heel erg veel werk is het namelijk niet om het één en ander op basis van bovenstaande documenten te implementeren...

Ja ik heb nog naar de links gekeken maar de menus die daar te vinden waren, waren niet erg bruikbaar. Die van mij heeft speciale posititie en is een tabel omdat er afbeeldingen op de achtergrond staan.Het menu en de knop moeten los van elkaar te verschuiven zijn en dan niet het probleem hebben als dat ik nu heb.

[ Voor 5% gewijzigd door NeORay op 07-01-2005 12:05 ]

vrijdag 7 januari 2005 13:30

Acties:

Woudloper

« - _ - »

Wellicht kan je even naar dit overzicht kijken welke bij irt.org staat. Hier staan namelijk diverse vragen aangaande de timeout functie van javascript.

Wat je in weze moet doen is dat je bij de onmouseout van het getoonde menu de timer moet starten en dat na een x aantal seconden het getoonde menu pas wordt onzichtbaar gemaakt.

vrijdag 7 januari 2005 23:53

Acties:

NeORay

Topicstarter

Eindelijk ben ik dan zover dat het menu klikbaar is omdat het blijft staan. 'Blijft staan'moet je echter erg letterlijk nemen want hij blijft ook echt staan en gaat niet meer weg.

Wat doe ik fout? want ik heb wel aangegeven dat ie 3 sec moet blijven staan.

HTML:

</script>
</p>
<p>&nbsp; </p>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position:absolute; left:125px; top:103px; width: 50; height: 50" bordercolor="#111111" width="80" id="AutoNumber1" height="37">
  <tr> 
    <td onMouseOver="toonmenu('site1')" setTimeout ( "onMouseOut="verstopmenu('site1')",3000); // delay 3 seconds height="37" width="80" background="menubutton2.jpg" bordercolor="#FFFFFF" class="menu"> 
      <br />
      <table class="menu" id="site1" width="100%" style="background-image: url(lnksframemenu.jpg); width: 180px; height: 499px; left: -128px; top: 69px">
        <tr> 
          <td class="menu" height="16">&nbsp;</td>
        </tr>
        <tr> 
          <td class="menu" height="16"> 
            <p><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
              &nbsp;&nbsp; Wat</font></a> </p>
          </td>
        </tr>

[ Voor 23% gewijzigd door NeORay op 07-01-2005 23:54 ]

vrijdag 7 januari 2005 23:58

Acties:

Alex)

Je moet bij je site1-menu een onmouseout-actie maken...
en je mag geen " gebruiken binnen een attribuut dat met " is geopend...

Dit moet werken lijkt me: (je had e.e.a. aan constructiefouten gemaakt)

HTML:

</script>
</p>
<p>&nbsp; </p>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position:absolute; left:125px; top:103px; width: 50; height: 50" bordercolor="#111111" width="80" id="AutoNumber1" height="37">
  <tr> 
    <td onMouseOver="toonmenu('site1')" onMouseout="var verdwijn = setTimeout ('verstopmenu(\'site1\')',3000); // " height="37" width="80" background="menubutton2.jpg" bordercolor="#FFFFFF" class="menu"> 
      <br />
      <table class="menu" id="site1" width="100%" style="background-image: url(lnksframemenu.jpg); width: 180px; height: 499px; left: -128px; top: 69px" onmouseover="clearTimeout(verdwijn);">
        <tr> 
          <td class="menu" height="16">&nbsp;</td>
        </tr>
        <tr> 
          <td class="menu" height="16"> 
            <p><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
              &nbsp;&nbsp; Wat</font></a> </p>
          </td>
        </tr>

[ Voor 122% gewijzigd door Alex) op 08-01-2005 00:09 ]

We are shaping the future

zaterdag 8 januari 2005 00:18

Acties:

NeORay

Topicstarter

Alex schreef op vrijdag 07 januari 2005 @ 23:58:
Je moet bij je site1-menu een onmouseout-actie maken...
en je mag geen " gebruiken binnen een attribuut dat met " is geopend...

Dit moet werken lijkt me: (je had e.e.a. aan constructiefouten gemaakt)

HTML:

</script>
</p>
<p>&nbsp; </p>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position:absolute; left:125px; top:103px; width: 50; height: 50" bordercolor="#111111" width="80" id="AutoNumber1" height="37">
  <tr> 
    <td onMouseOver="toonmenu('site1')" onMouseout="var verdwijn = setTimeout ('verstopmenu(\'site1\')',3000); // " height="37" width="80" background="menubutton2.jpg" bordercolor="#FFFFFF" class="menu"> 
      <br />
      <table class="menu" id="site1" width="100%" style="background-image: url(lnksframemenu.jpg); width: 180px; height: 499px; left: -128px; top: 69px" onmouseover="clearTimeout(verdwijn);">
        <tr> 
          <td class="menu" height="16">&nbsp;</td>
        </tr>
        <tr> 
          <td class="menu" height="16"> 
            <p><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
              &nbsp;&nbsp; Wat</font></a> </p>
          </td>
        </tr>

Dit lijkt idd helemaal te werken(!!)

er is alleen nog één probleempje: ik krijg een runtime error als ik over het tevoorschijn gekomen me heen muis. Hierin staat dat op regel 89 een fout staat; 'verdwijn' is niet gedefinieerd.

[ Voor 63% gewijzigd door NeORay op 08-01-2005 00:24 ]

zaterdag 8 januari 2005 00:31

Acties:

Alex)

Plaats tussen <SCRIPT> en </SCRIPT> eens dit:
var verdwijn;
en vervang in de onMouseout var verdwijn = door verdwijn =

[ Voor 16% gewijzigd door Alex) op 08-01-2005 00:31 ]

We are shaping the future

zaterdag 8 januari 2005 00:44

Acties:

NeORay

Topicstarter

Hij werkt helemaal!!
SUPERTHNX allemaal!! $_/-\o_$

voor geïnteresseerden, dit is het geworden:

HTML:

</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" background="linksframestatic3.jpg" onLoad="MM_preloadImages('menu2ndbutton2.jpg')">
<p> 
  <script language="JavaScript">
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
var verdwijn;
</script>
</p>
<p>&nbsp; </p>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; position:absolute; left:125px; top:103px; width: 50; height: 50" bordercolor="#111111" width="80" id="AutoNumber1" height="37">
  <tr> 
    <td onMouseOver="toonmenu('site1')" onMouseout="verdwijn = setTimeout ('verstopmenu(\'site1\')',3000); // " height="37" width="80" background="menubutton2.jpg" bordercolor="#FFFFFF" class="menu"> 
      <br />
      <table class="menu" id="site1" width="100%" style="background-image: url(lnksframemenu.jpg); width: 180px; height: 499px; left: -128px; top: 69px" onmouseover="clearTimeout(verdwijn);">
        <tr> 
          <td class="menu" height="16">&nbsp;</td>
        </tr>
        <tr> 
          <td class="menu" height="16"> 
            <p><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
              &nbsp;&nbsp; Wat</font></a> </p>
          </td>
        </tr>
        <tr> 
          <td class="menu" height="16"><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
            </font></a><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2">&nbsp;&nbsp;</font></a><a href="pag3.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
            Waar</font></a></td>
        </tr>
        <tr> 
          <td class="menu" height="16"><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
            </font></a><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2">&nbsp;&nbsp;</font></a><a href="pag4.htm"><font face="Arial, Helvetica, sans-serif" size="2"> 
            Waarom</font></a></td>
        </tr>
        <tr> 
          <td class="menu" height="16"><a href="pag2.htm"><font face="Arial, Helvetica, sans-serif" size="2" color="#FF0000"><b><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF">&nbsp; 
            </font></b></font></a><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF"><b><a href="#" onClick="MM_nbGroup('down','group1','wie','',1)" onMouseOver="MM_nbGroup('over','wie','menu2ndbutton2.jpg','',1)" onMouseOut="MM_nbGroup('out')">[img]"menu2ndbutton1.jpg"[/img]</a><a href="pag1.htm"><font size="2"> 
            </font></a></b></font></td>
        </tr>
        <tr> 
          <td class="menu" height="16"><br>
          </td>
        </tr>
        <tr> 
          <td class="menu" height="16">&nbsp;</td>
        </tr>
        <tr> 
          <td class="menu" height="16">&nbsp;</td>
        </tr>
        <tr> 
          <td class="menu" height="16">&nbsp;</td>
        </tr>
        <tr> 
          <td class="menu">&nbsp;</td>
        </tr>
      </table>
    </td>
</table>

zaterdag 8 januari 2005 00:50

Acties:

Verwijderd

ThanXs

zaterdag 8 januari 2005 01:00

Acties:

Alex)

Trouwens, moet er niet een onmouseout bij de site1 bij? Anders blijft je menu eeuwig openstaan...

We are shaping the future

zaterdag 8 januari 2005 10:35

Acties:

NeORay

Topicstarter

Alex schreef op zaterdag 08 januari 2005 @ 01:00:
Trouwens, moet er niet een onmouseout bij de site1 bij? Anders blijft je menu eeuwig openstaan...

nee, alles werkt naar behoren. Het menu gaat na 3 sec keurig weg.

zaterdag 8 januari 2005 11:34

Acties:

pagani

* pagani pinkt een traantje weg bij het zien van tabelgebruik voor de lay-out.

Dat deden we in 1996-2000, tegenwoordig kiest een beetje devver toch voor DIV

Maar ja, mooi dat het werkt iig

zaterdag 8 januari 2005 18:12

Acties:

NeORay

Topicstarter

johnnyv.nl schreef op zaterdag 08 januari 2005 @ 11:34:
* NeORay pinkt een traantje weg bij het zien van tabelgebruik voor de lay-out.

Dat deden we in 1996-2000, tegenwoordig kiest een beetje devver toch voor DIV Maar ja, mooi dat het werkt iig

ja, maar zoals ik al eerder heb gezegd; ik ben nog maar een echte beginner op het gebied van webdesign dus ik ben al blij dat het iets is geworden wat enigszins op een website lijkt.

Overigens staat de lay-out in z'n totaliteit binnen frames dus het is niet één en al tabellen.

[ Voor 10% gewijzigd door NeORay op 08-01-2005 18:14 ]

zaterdag 8 januari 2005 18:41

Acties:

crisp

Devver

Pixelated

frames zijn al net zo erg als tabellen

Intentionally left blank

zaterdag 8 januari 2005 18:45

Acties:

Fuzzillogic

Cool

Leuk, het eeuwige gezeur tussen CSS<->tabellen

Maar zolang we nog beperkt worden door IE6 zie ik me helaas nog genoodzaakt om voor sommige designs (waar ik verder nauwelijks invloed op heb) terug te vallen op tabellen, ondanks dat het voor moderne browsers wel prima met CSS te layouten is.

zaterdag 8 januari 2005 21:00

Acties:

JHS

Splitting the thaum.

Nexxennium schreef op zaterdag 08 januari 2005 @ 18:45:
Leuk, het eeuwige gezeur tussen CSS<->tabellen

Maar zolang we nog beperkt worden door IE6 zie ik me helaas nog genoodzaakt om voor sommige designs (waar ik verder nauwelijks invloed op heb) terug te vallen op tabellen, ondanks dat het voor moderne browsers wel prima met CSS te layouten is.

Leuk, dat eeuwige geroep dat er een tegenstelling is tussen tabellen en CSS. Het is een tegenstelling tussen valide gebruik van elementen of niet. Die je vervolgens al dan niet met CSS gaat vormgeven.

DM!

zaterdag 8 januari 2005 21:14

Acties:

Fuzzillogic

Cool

Ik zeg alleen dat ik het voor IE soms ondoenlijk vind om tot nette HTML/CSS te komen zonder terug te vallen om tables. Met Opera/Gecko heb ik daar absoluut geen probleem mee, omdat die veel meer de specs volgen. Maar dezelfde code levert in IE vaak een ander resultaat op. Dan kun je het wel weer gaan aanpassen zodat het in IE goed uitziet, maar dan krijg je in Opera/Gecko weer (terecht!) verkeerde resultaten.

En sja, er zijn grenzen aan de tijd die ik eraan kwijt wil zijn (bedrijf, tijd==geld, je kent het wel. En aan mijn frustratie zit ook een grens) dus dan komen er toch tabelletjes aangezien het daar wel (beter) lukt om een uniform uiterlijk te krijgen.

Dus help mee om de wereld te bevrijden van het juk van de verouderde browsers (m.n. IE t/m versie 6), dan is er voor mij ook geen reden meer om tabellen te misbruiken.

zaterdag 8 januari 2005 21:57

Acties:

JHS

Splitting the thaum.

Nexxennium schreef op zaterdag 08 januari 2005 @ 21:14:
Ik zeg alleen dat ik het voor IE soms ondoenlijk vind om tot nette HTML/CSS te komen zonder terug te vallen om tables. Met Opera/Gecko heb ik daar absoluut geen probleem mee, omdat die veel meer de specs volgen. Maar dezelfde code levert in IE vaak een ander resultaat op. Dan kun je het wel weer gaan aanpassen zodat het in IE goed uitziet, maar dan krijg je in Opera/Gecko weer (terecht!) verkeerde resultaten.

Maak dan gebruik van een conditional statement om een iestylesheet te importeren, lost je dan ook weer op.

Maar deze discussie is zat gevoerd

.

DM!