Menu beschrijving inhoud knoppen

[HansVol]

Mijn website heeft een menu met knoppen met opschrift. De knoppen zijn gewoon images.
http://www.aquarium-nu.nl
De korte opschriften maken echter niet goed duidelijk wat de inhoud van een pagina is. Als voorbeeld: "Scheikunde" kan een diepgaand verhaal zijn dat bijna niemand wil lezen, of, zoals nu, een simpele inleiding.
Ik zou graag bij het aanraken van een knop een klein vakje openen met daarin een korte omschrijving van de inhoud. a:hover {?????
Jammer genoeg heb ik nog geen duidelijke uitleg kunnen vinden.
Wie helpt me?
Hans

 

[Mickeys Monkey]

Misschien een ide, bedoeld u zoiets ?

<script language="JavaScript">
<!--
function MM_popupMsg(msg) { //v1.0
  alert(msg);
}

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script><!---Place Between Head Tags--->
<!---Place Between Body Tags---><input type="button" name="button" value="Opening"
onClick="MM_popupMsg(' Dit is de openings pagina van deze website ');MM_goToURL('parent','http://www.aquarium-nu.nl/knoppen/opening.jpg');return document.MM_returnValue">

 

[leofact]

Waarschijnlijk ben je dit al tegen gekomen, maar ik vermeld het toch even:
De meest simpele oplossing om in de Alt tekst van de images de beschrijving te zetten.

mvg Leo

 

[HansVol]

menu pop-up

Ik heb mijn wens kennelijk niet goed genoeg uitgelegd.
Het is de bedoeling dat als ik met de muis over een knop "hoover" (dus niet aanklikken) er een klein venstertje opent waarin de korte beschrijving, liefst rechts naast de knop.
Bij de oplossing van Mikey wordt een klein grijs venstertje met de tekst gewoon bij het openen van de index toegevoegd aan de knoppenreeks.
De eerste drie coderegels zijn nu:

<ul id="knoplijst">
	<li><a href="../opening/opening.shtml"><img class="imgp" src="knoppen/opening.jpg" alt="Openingspagina"></a></li>
	<li><a href="../basispunten/basispunten.shtml"><img class="imgp" src="knoppen/basis.jpg" alt="basispunten"></a></li>
	<li><a href="../amano/amano.shtml"><img class="imgp" src="knoppen/amano.jpg" alt="Takashi Amano"></a></li>

Waar plaats ik die script per regel = knop?

Hans

 

[Goeroeboeroe]

Mogelijk bedoel je zoiets: http://css-voorbeelden.nl/pop-up/tekst/pop-up-056.html
De code en uitleg kun je downloaden. Als je de code dan bekijkt, kun je zien hoe het werkt, en anders is er de uitleg. Als je daar bij pop-up rondkijkt, kun je zien wat er zoal nog meer mogelijk is met :hover (zonder JavaScript dus).
Maar mogelijk heb je al genoeg aan title, zie hieronder.

alt en title.
De alt-tekst bij een afbeelding wordt getoond als de afbeelding, om wat voor reden dan ook, niet wordt getoond. De alt-tekst is ook van belang voor spraakbrowsers, zoekmachines, enz., die geen plaatjes kunnen zien, maar wel de alt-tekst kunnen (voor)lezen.
Internet Explorer 6 en 7 gaven de alt-tekst foutief weer alsof het 'n title is. Zelfs als 'n title aanwezig is, geven deze twee browsers de alt-tekst weer. IN IE 8 is dat eindelijk gecorrigeerd.

De title bij 'n afbeelding wordt getoond als je over de afbeelding hovert. Deze kan niet al te lang zijn, zo'n 20 woorden maximaal. Je kunt 't niet echt goed opmaken.

<a href="scheikunde.html" title="Over het gedrag van waterstof-atomen die in een donker steegje zuurstof ontmoeten"><img src="scheikunde.jpg" width="100" height="20" alt="">

In dit geval staat de title bij de link, dat is voldoende voor zoekmachines e.d. 'n Title bij de afbeelding is dubbelop.
De alt ="", leeg. Omdat ik aanneem dat de afbeelding niet echt interessant is. Als de afbeelding wel de moeite waard is, komt daar dus 'n omschrijving: alt="De waterstof-atoom betrapt met 'n zuurstof-molucuul"

Edit: ik zie nu pas dat er 'n link naar je site staat. Volgens mij kun jij gewoon volstaan met het toevoegen van title="..." bij de img, hoewel dat dus niet werkt bij IE 6 en 7, die tegen de standaard de alt-tekst tonen.
Maar als je nu de alt-tekst weghaalt (die is bedoelt als beschrijvende tekst voor de afbeelding, en bij jou zijn het toch geen 'echte' afbeeldingen) en gewoon alleen title gebruikt, dan zou 't moeten werken in alle browsers.

 

[HansVol]

pop-ups

Beste Goeroeboeroe

Inderdaad, dat voorbeeld uit css.voorbeelden is precies wat ik zoek. Ook wil ik graag proberen hoe in css kan gebruiken in plaats van javascript.
Alweer bedankt voor je snelle en juiste hulp.
Maar, ik kom er niet helemaal uit. Ik heb de nodige code van dat kleine popuppetje in mijn indexpagina geladen, dat werkt inderdaad. Twee keer die code met div#schermpje1 en div#schermpje2 werkt ook.
Maar nou de overstap van het vraagteken naar de feitelijke lijst met knoppen. Ik zie niet goed hoe ik binnen de body elk van de knoppen uit de lijst (ul en li) kan gebruiken met een verwijzing naar het bijbehorende scherm.
Dus de aanpassing van

<div id="schermpje1">
   <a id="linkje" href="#" title="Hier zit geen pagina achter.">
      <span id="vraagteken">?</span>
      <span id="tekst">Ik ben een heel klein, lief, bescheiden, simpel popupje.
                              Eigenlijk meer 'n poppetje-up.</span>
    </a>
</div>

naar de image (15 keer) in de lijst:

<div id="kolomlinks">
<ul id="knoplijst">
	<li><a href="../opening/opening.shtml"><img class="imgp" src="knoppen/opening.jpg" alt="Openingspagina"></a></li>
	<li><a href="../basispunten/basispunten.shtml"><img class="imgp" src="knoppen/basis.jpg" alt="basispunten"></a></li>
	<li><a href="../amano/amano.shtml"><img class="imgp" src="knoppen/amano.jpg" alt="Takashi Amano"></a></li>
                <li><a href="../bak/bak.shtml"><img class="imgp" src="knoppen/bak.jpg" alt="dode inhoud"></a></li>

Wie??

 

[Goeroeboeroe]

Ik heb 't even aangepast voor 'n afbeelding. Komt-ie:

ul#menu {margin: 0; padding: 0; list-style-type: none;}
ul#menu a {text-decoration: none; color: black; position: relative;}
ul#menu a img {border: 0;}
ul#menu a span {position: absolute; width: 200px; left: -2000px; top: 5px; border: black solid 2px; padding: 3px; background: white;}
ul#menu a:hover {cursor: pointer;}
ul#menu a:hover span {left: 100px;}

<ul id="menu">
<li><a href="../opening/opening.shtml" title="Alles over onze fantastische opening"><img src="knop.gif" alt="Opening" title="Alles over onze fantastische opening"><span>U heeft er geen idee van hoe ongelooflijk fantastisch onze openingen zijn.</span></a></li>
</ul>

* Het makkelijkste is om de left: -2000px bij ul#menu a span even weg te laten. Je kunt de pop-up dan gewoon op 't scherm maken, precies zoals je 'm hebben wilt. Als 't af is, parkeer je 'm daarna links buiten het venster.
* Je geeft alle css dus gewoon al op. Bij 't hoveren hoef je de pop-up alleen op 't scherm te zetten met left: 20px of zo.
* De title in de <a> is van belang voor spraakbrowsers e.d., maar ook voor de spiders van zoekmachines. Deze 'zien' immers geen plaatjes.
* De alt bij de <img> is van belang als er geen afbeeldingen zichtbaar zijn. Dan wordt deze tekst getoond. Anders heb je helemaal geen link, zie je niets.
* Als je 'n serie knoppen hebt, let dan even op dat de pop-up van de ene knop niet de volgende knop bedekt. Hier spreekt de Afdeling Schade en Schande, grinnik. Daar kun je mensen helemaal gek mee maken als je 't verkeerd doet.
* De text-decoration en color MOETEN in de <a, niet in de span met de pop-up, omdat Safari en Google Chrome hem anders negeren.
* De a:hover {cursor: pointer;} is voor de kwaliteitsbrowsers IE 6 en 7, die anders niet in de gaten hebben dat 't 'n link is, dus dan zie je geen pop-up verschijnen.
* 'n img krijgt standaard 'n foeilelijke blauwe rand als hij in 'n link staat, vandaar de border: 0
* Voor de pop-ups zijn de meeste instellingen hetzelfde. Door gewoon a span te nemen als selector, kun je (vrijwel) alles in één keer opgeven voor alle pop-ups.

Voor elke knop meer doe je dus precies hetzelfde. Eventueel kun je ook 'n id gebruiken voor elke knop. Ik heb 't hier zonder class of id gedaan, maar door er ul#menu voor te zetten beperkt de werking zich steeds tot 't menu.

Edit: bij de <img kun je ook nog width="..." en height="..." toevoegen, de afmetingen van het plaatje.

 

[HansVol]

menuknoppen en pop-up

Allerbeste Goeroeboeroe
Zoals je kunt zien werkt het menu zoals bedoeld.
http://www.aquarium-nu.nl
Ik zal nog wat nadenken over de achtergrond en de tekstkleur, maar dat kan ik zelf.
Dus bedankt door Hans.

 

[Goeroeboeroe]

Mooi. En jij hebt nu een van de weinige menu's die ook nog goed werkt zonder JavaScript, zonder afbeeldingen en zonder css. Oftewel: uitstekend toegankelijk voor spraakbrowsers e.d., maar ook voor de spiders van 'n zoekmachine.