Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

On mouse over

Anoniem
Wilhelmus
21 antwoorden
  • op mijn website wil ik graag on mouse over gebruiken bij het onderdeel wapens. hoe moet ik dat combineren met mijn css menu?
    ik wil graag dat als je er met je muis over gaat er een sub-menu verschijnt met 4 onderdelen: infanterie, artillerie, cavalerie, vliegtuigen
    [code:1:0f505420ef]
    <html>
    <head>
    <META name="verify-v1" content="eK2i0LDE8x4KJ6s3eSVRmQS2yCOwGvVBCU8IZxx/K2s=" />
    <meta name="Language" content="nl" />
    <meta name="description" content="Alles over Nederland in Mei 1940: Wapens, Uitrusting en Gevechten.">
    <meta name="keywords" content="Fokker,G.I.,GI,G1,G.1.,Spandau,Vickers,Machine Gun,Schwarzlose,Mannlicher,M.95,Grebbeberg,Grebbelinie,IJssellinie,Kornwerderzand,Afsluitdijk,Rotterdam,
    Mariniers,Soldaten,Nederland,Duitsland,Hitler,oorlog,Winkelman,Generaal,fort,forten,Fransen,gevechten">
    <title>Nederland in de Tweede Wereldoorlog </title>
    </head>
    <table border="0" width="700" align="center"><tr><td>
    <style type="text/css">
    #navcontainer ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    font: 18px Arial, sans-serif;
    font-weight: bold;
    width: 16%;
    text-decoration: none;
    padding: .2em 1em;
    color: #fff;
    background-color: #036;
    }

    #navcontainer ul li a:hover
    {
    color: #fff;
    background-color: #369;
    }
    </style>
    <body bgcolor="lightgrey" link='navy' vlink='navy'><!– –><script type="text/javascript" src="/i.js"></script></body>
    <div id="navcontainer">
    <ul>
    <li><a href="http://www.freewebs.com/nederlandinwo2/Index.htm">Home</a></li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/Wapens.htm">Wapens</a></li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/Uitrusting.htm">Uitrusting</a></li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/Gevechten.htm">Gevechten</a></li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/Contact.htm">Contact&Bronnen</a></li>
    </ul>
    </div><p>
    <iframe src="index4.htm" height="340" width="535" align="right"></iframe>
    <iframe src="updates.htm" height="495" width="165" align="left"></iframe><p><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br>
    <iframe src="banner.htm" height="155" width="529" align="right" scrolling="no"></iframe>
    </td>
    </tr>
    </table>
    </html>[/code:1:0f505420ef]
  • Een site over Nederland in WO II kan kort, NL was veroverd in 3 dagen :D

    On mouse over moet verwerkt in de broncode.
    Je hebt een gratis webspace bij freewebs, daar kun je volgens mij de broncode niet aanpassen omdat ze reclame verwerken in je code.

    Als je wel de broncode kunt bewerken dan zou ik een website zoeken waar ze een leuk drop down "menu" hebben en deze kopieren.
  • Je kan eens kijken of dit wat voor jou is: http://www.mastercode.nl/artikel/65/ zoek anders een op google met "javascript horizontal dropdown menu" voor horizontal kan je vertical invullen. dat kan je gewoon aanpassen
  • bedankt voor jullie reacties! ik snap niet zoveel van de code op die site, maar het is wel wat ik nodig heb. ik moet me maar eens in css en javascript verdiepen. het css menu heb ik immers half overgekopieerd met wat kleine aanpassingen en met javascript heb ik nog nooit gewerkt…
  • Je kan ook met css XXX:hover werken. Maar helaas kan IE daar nog niet mee overweg.
  • [quote:0bef144dd2="dJeedJee"]Je kan ook met css XXX:hover werken. Maar helaas kan IE daar nog niet mee overweg.[/quote:0bef144dd2]

    Jawel hoor. ik gebruik het ook regelmatig, werkt top in IE

    Peter
  • [quote:bade248032="petervk"]Jawel hoor. ik gebruik het ook regelmatig, werkt top in IE[/quote:bade248032]Ik neem aan dat dJeedJee het heeft over de toepassing van :hover op elementen anders dan a, en dan ook nog eens zonder gebruik van JavaScript maar gewoon met CSS, hoewel hij dat misschien iets duidelijker had kunnen formuleren. In dat geval heeft hij dan ook gelijk, de onsteuning van IE6 reikt bij lange na niet zover, voor IE7 weet ik het niet.

    - Bas
  • In IE7 kan het gelukkig wel (eindelijk).. Ook position: fixed, min-/max-width.. Zie 'Details on our changes in IE7' op het IE-blog. Overigens XHTML (application/xhtml+xml) nog niet…
  • [quote:950d3f36eb="boelieboelie"]In IE7 kan het gelukkig wel… […] Overigens XHTML (application/xhtml+xml) nog niet…[/quote:950d3f36eb]Aaaaargh! Daar moet ik het juíst hebben! :(

    - Bas

    [b:950d3f36eb]Edit:[/b:950d3f36eb] Overigens wel interessant te zien dat er idd een hoop verbeterd is! Goed nieuws voor de CSS-fanaten. Wel zag ik gelijk al een paar bug-fixes die flink wat problemen kunnen veroorzaken voor mensen die veel hacks gebruiken om het ook in pre-IE7 te laten werken. Nu maar hopen dat dat goed gaat.

    @boelieboelie: Is daar al interessante literatuur over?
  • Op datzelfde blog had IE al in september of oktober vorig jaar ofzo gewaarschuwd dat iedereen moet overstappen op conditional comments en geen hacks meer moet gebruiken. Er zit voor sitebouwers dus nix anders op dan de hacks op te ruimen. Die vroege aankondiging geeft iedereen ook een jaar tot bijna anderhalf jaar de tijd om de site aan te passen…
    Dus als je bedoeld artikelen over problemen die ontstaan door het gebruik van hacks: die ken ik niet; denk dat velen die publiceren inmiddels druk de hacks aan het opruimen zijn en IE7 als testbrowser gebruken, enerzijds omdat het nodig is, anderszijds omdat het toch al best practice was om conditional comments te gebruiken.

    Maar misschien is het wel het handig om IE7 zelf te downloaden en te kijken wat de schade wordt? :)
  • Tsja, IE7 installeren… Het probleem is een beetje dat ik IE3 t/m IE6 hier naast elkaar heb draaien om sites te testen (maar ook gewoon omdat het leuk is, want echt nuttig is het maar zelden). Daar was een trucje voor, maar ik heb geen idee waar ik die ooit vandaan getoverd heb en of het ook nog met IE7 werkt.

    - Bas

    [b:f578c372fe]Edit:[/b:f578c372fe] Zoekt en gij zult vinden! :D
  • Die pagina waar ik naar verwijs, bevat ook de standalone-versie (maar dan IE7 Release Candidate 1). Die oudere IE's had ik destijds van zkyzyx.com, maar ze staan ook in het Browser Archive. Het testen in IE5.x en IE6 vind ik overigens nog best nuttig… Ook leuk: testen in Safari, in Opera mini (Java vereist), in Lynx.

    Maar om terug te komen op het menu :D, ik gebruik zelf vaak het voorbeeld van son of suckerfish dropdowns, al schijnt het Ultimate Dropdown Menu beter te zijn (heb ik nog niet geprobeerd). Bij deze laatste vind je ook een hele online handleiding. Maar misschien is dat een beetje té om het leuk te houden.
  • ok. ligt het aan mij of ben ik dom? ik snap echt helemaal niets van de codes en de uitleg erbij. bovendien begrijp ik uit bijv. de handleiding dat je, als je on mouse over wil, je ook een javascritp menu moet hebben, wat ik niet wil, want ik vind het menu goed zo.
    boveindien zeggen ze dingen als: "zet deze code achter de code van het menu". ok, bedoelen ze dan achter het CSS gedeelte of achter het gedeelte met de werkelijke links?
    maar goed, ik snap het niet dus laat maar zitten. het ligt niet aan de sites, die zijn wel goed, maar ben gewoon niet ervaren genoeg denk ik.
  • Wat je wilt, is een uitklapmenu. Dat kan op de manier waarop je reeds bezig was. Het uitklappen kun je doen m.b.v. CSS, m.b.v. javascript, of met behulp van beide. Hoe dat gaat, staat uitgelegd in de links die in dit topic staan. Er zijn diverse manieren genoemd, dan kun je zelf een keuze eruit maken.

    In de praktijk blijkt een uitklapmenu het niet te doen in IE zonder een beetje javascript, omdat IE nog achterloopt op CSS-gebied, zoals dJeedJee opmerkt. Om ervoor te zorgen dat het ook in IE werkt, moet je een stukje javascript toevoegen.
    - petervk gebruikt waarschijnlijk een manier met een behavior in de stylesheet, zoals in De kracht van :hover wordt uitgelegd. Dat is eigenlijk ook javascript.
    - s.Mighty gebruikt een CSS-menu dat er zonder javascript niet uitziet (sorry).
    - Son of suckerfish dropdowns is een menu dat in alle browsers behalve IE werkt zonder javascript, maar om het te laten werken in IE is dat stukje javascript in het artikel nodig. Dat hoef je alleen in je pagina te plakken, verder nix.

    Het vergt alleen wat kennis van HTML en CSS; het stuk javascript hoef je meestal alleen te copy-pasten.
  • Ok, ik kijk er nog eens goed naar :wink: kennis van HTML heb ik wel, van CSS niet. maar ik denk dat ik er wel uitkom.
  • [quote:8ac3084b1a="boelieboelie"]
    - s.Mighty gebruikt een CSS-menu dat er zonder javascript niet uitziet (sorry).[/quote:8ac3084b1a] maakt niet uit hoor ;) , ik meende me nog te herinneren dat ik destijds nog een menu had dat netjes werkte (of er netjes utizag zonder JS)

    [edit] zie hier

    maar ik zou inderdaad voor de suckerfish gaan, gewoon goed en makkelijk te stijlen.
  • heb suckerfish geprobeerd, snapte de handelinge niet. toen maar van het voorbeeld de bron gepakt en wat zitten plakken en knippen. uiteindelijk is het dit gewroden:
    [code:1:31b65aef04]<html><head>
    <title>Nederland in de Tweede Werledoorlog</title><body bgcolor="lightgrey">
    <style type="text/css">

    #navcontainer ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    font: 18px Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: .2em 1em;
    width: 7.5em;
    color: #fff;
    background-color: #036;
    }

    #navcontainer ul li a:hover
    {
    color: #fff;
    background-color: #369;
    }

    #nav a {
    display: block;
    }

    #nav li {
    float: left;
    width: 16%;
    }

    #nav li ul {
    position: absolute;
    background: #036;
    left: -999em;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

    #content {
    clear: left;
    color: #ccc;
    }

    }
    </style>

    <script type="text/javascript">

    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    </script>


    </head>

    <body>

    <ul id="nav">
    <div id="navcontainer">
    <ul>

    <li><a href="http://www.freewebs.com/nederlandinwo2/index.htm">Home</a>

    </li>
    <li><a href="#">Wapens</a>
    <ul>
    <li><a href="http://www.freewebs.com/nederlandinwo2/wapens.htm">Infanterie&nbsp&nbsp&nbsp</a></li>
    <li><a href="http//www.freewebs.com/nederlandinwo2/artillerie.htm">Artillerie&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/cavanlerie.htm">Cavalerie&nbsp&nbsp&nbsp</a></li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/vliegtuigen">Vliegtuigen</a></li>

    </ul>
    </li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/Uitrusting.htm">Uitrusting</a>
    </li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/Gevechten.htm">Gevechten</a>
    </li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/contact.htm">Contact&Bronnen</a>
    </li>

    </ul>
    </div>[/code:1:31b65aef04]
    paar problemen (en geen idee hoe ik ze moet wegwerken):
    1) links naar gevechten en contact en bronnen staan dichter bij elkaar dan de rest. als ik het meer ruimte geef staan ze nog steeds 2× zo dicht bij elkaar. dit blijft zo.
    2)ik heb liever dat het uitklap menu bij wapens wat verder naar links staat, op ongeveer 1/4 van de afstand (nu 1/2)
    3)als ik de code [code:1:31b65aef04]<table border="0" width="700" align="center"><tr><td>[/code:1:31b65aef04] achter de body code zet (zodat mijn site ook op lagere resoluties te bekijken is) staat contact&bronnen plotseling onder de rest van het menu, en hoe klein ik de links ook maak, die blijft onderaan staan. bovendien staan ze dan allemaal tegen elkaar.
    het past toch echt want ik heb het bij mijn huidige site ook (behalve dan het on mouse over gedeelte)…
  • Wat voor doctype gebruik je? Overigens, een online voorbeeld doet wonderen…
  • ehh doctype? wat is dat? maar zet deze code maar eens naar een site om, dan zal je zien wat het probleem is.
  • Ok, ik heb een nieuwe code, waarmee het table probleem mee is opgelost. Contact en Bronnen staat nu gewoon in het rijtje:
    [code:1:561356d6bd]<html><head>
    <title>Nederland in de Tweede Werledoorlog</title><body bgcolor="lightgrey">
    <table border="0" width="700" align="center"><tr><td>
    <style type="text/css">

    #navcontainer ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }

    #navcontainer ul li { display: inline; }

    #navcontainer ul li a
    {
    font: 18px Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: .2em 1em;
    width: 5.5em;
    color: #fff;
    background-color: #036;
    }

    #navcontainer ul li a:hover
    {
    color: #fff;
    background-color: #369;
    }

    #nav a {
    display: block;
    }

    #nav li {
    float: left;
    }

    #nav li ul {
    position: absolute;
    background: #036;
    width: 7em;
    left: -999em;
    }

    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }

    #content {
    clear: left;
    color: #ccc;
    }

    }
    </style>

    <script type="text/javascript">

    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    </script>


    </head>

    <body>

    <ul id="nav">
    <div id="navcontainer">
    <ul>

    <li><a href="http://www.freewebs.com/nederlandinwo2/index.htm">Home</a>

    </li>
    <li><a href="#">Wapens</a>
    <ul>
    <li><a href="http://www.freewebs.com/nederlandinwo2/wapens.htm">Infanterie&nbsp&nbsp&nbsp</a></li>
    <li><a href="http//www.freewebs.com/nederlandinwo2/artillerie.htm">Artillerie&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/cavanlerie.htm">Cavalerie&nbsp&nbsp&nbsp</a></li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/vliegtuigen">Vliegtuigen</a></li>

    </ul>
    </li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/Uitrusting.htm">Uitrusting</a>
    </li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/Gevechten.htm">Gevechten</a>
    </li>
    <li><a href="http://www.freewebs.com/nederlandinwo2/contact.htm">Contact&Bronnen</a>
    </li>

    </ul>
    </div>[/code:1:561356d6bd]
    Maar er zijn nog steeds een paar problemen:
    1)ze staan nu tegen elkaar aan maar er moet een ruimte tussen zitten
    2)ze staan niet helemaal in het midden maar ietsje naar rechts.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.