Multiple mouseovers werken niet helemaal zoals ik het wil

  • Onderwerp starter Onderwerp starter elsh
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
E

elsh

Gebruiker
Lid geworden
8 aug 2012
Berichten
6
Ik heb met behaviors enkele mouseovers gemaakt, zie hier:
http://www.dadada.nl/koen/index3.htm

Het werkt bijna goed, maar de tekst gifjes gaan niet terug naar de originele (zwarte tekst) gifjes. Swap images heb ik gebruikt, via behaviors, de balkjes zijn in orde, maar nu graag de tekst gifjes nog! Iemand die weet waar de fout zit?
 
Je bent iets vergeten toe te voegen dat het de tekst terug zet. Ik stuur U wel een privébericht met de juiste code.
m.v.g.,
See
EDIT: Ik kan U geen privebericht doorsturen, maar geef dan even uw email adres, dan email ik het u?
 
Laatst bewerkt:
Ik kan kennelijk geen emailadres plaatsen. Kunt u de code als reactie plaatsen misschien?
 
Hier is de code:
Code: 
<html><head>
<title>Koen Verbeek</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<3&&(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>
</head>

<body onLoad="MM_preloadImages('http://www.dadada.nl/koen/images/navigation/1tabloids_m.gif','http://www.dadada.nl/koen/images/navigation/1meer_m.gif','http://www.dadada.nl/koen/images/navigation/1magazines_m.gif','http://www.dadada.nl/koen/images/navigation/streep1_m.gif','http://www.dadada.nl/koen/images/navigation/streep2_m.gif','http://www.dadada.nl/koen/images/navigation/streep3_m.gif')">
<center>
<table width="1024" height="746" border="0" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td width="320" rowspan="2" valign="top">&nbsp;</td>
    <td height="80" colspan="2">&nbsp;</td>
    </tr>
  <tr>
    <td width="58" rowspan="2"><img src="http://www.dadada.nl/koen/images/template/vertikaal_tussennav.gif" width="58" height="171"></td>
    <td width="646" rowspan="2" align="left"><table width="158" border="0" cellspacing="0" cellpadding="0">
      <tbody><tr>
        <th colspan="5" scope="col"><img src="http://www.dadada.nl/koen/images/navigation/watdoetkoen.gif" width="158" height="19"></th>
        </tr>
      <tr>
        <td width="72" height="30" background="http://www.dadada.nl/koen/images/navigation/streep_background.gif">&nbsp;</td>
        <td width="8" rowspan="4"><img src="http://www.dadada.nl/koen/images/navigation/streep1_x.gif" width="8" height="152" name="streep1"></td>
        <td width="8" rowspan="4"><img src="http://www.dadada.nl/koen/images/navigation/streep2_x.gif" name="streep2" width="8" height="152" id="streep2"></td>
        <td width="8" rowspan="4"><img src="http://www.dadada.nl/koen/images/navigation/streep3_x.gif" name="streep3" width="8" height="152" id="streep3"></td>
        <td width="62" background="http://www.dadada.nl/koen/images/navigation/streep_background.gif">&nbsp;</td>
      </tr>
      <tr>
        <td><a href="magazines.htm" onMouseOut="MM_swapImgRestore(); MM_swapImage('magazines','','http://www.dadada.nl/koen/images/navigation/1magazines_x.gif',1)" onMouseOver="MM_swapImage('magazines','','http://www.dadada.nl/koen/images/navigation/1magazines_m.gif',1);MM_swapImage('streep1','','http://www.dadada.nl/koen/images/navigation/streep1_m.gif',1)"><img src="http://www.dadada.nl/koen/images/navigation/1magazines_x.gif" alt="magazines" name="magazines" width="72" height="29" border="0"></a></td>
        <td rowspan="3">&nbsp;</td>
      </tr>
      <tr>
        <td><a href="tabloids.htm" onMouseOut="MM_swapImgRestore(); MM_swapImage('tabloids','','http://www.dadada.nl/koen/images/navigation/1tabloids_x.gif',1)" onMouseOver="MM_swapImage('tabloids','','http://www.dadada.nl/koen/images/navigation/1tabloids_m.gif',1);MM_swapImage('streep2','','http://www.dadada.nl/koen/images/navigation/streep2_m.gif',1)"><img src="http://www.dadada.nl/koen/images/navigation/1tabloids_x.gif" alt="tabloids" name="tabloids" width="72" height="29" border="0"></a></td>
        </tr>
      <tr>
        <td><a href="meer.htm" onMouseOut="MM_swapImgRestore();MM_swapImage('meer','','http://www.dadada.nl/koen/images/navigation/1meer_x.gif',1)" onMouseOver="MM_swapImage('meer','','http://www.dadada.nl/koen/images/navigation/1meer_m.gif',1);MM_swapImage('streep3','','http://www.dadada.nl/koen/images/navigation/streep3_m.gif',1)"><img src="http://www.dadada.nl/koen/images/navigation/1meer_x.gif" alt="meer" name="meer" width="72" height="52" border="0"></a></td>
        </tr>
    </tbody></table></td>
  </tr>
  <tr>
    <td rowspan="3" valign="top">&nbsp;</td>
    </tr>
  <tr>
    <td height="385">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="120" colspan="2">&nbsp;</td>
    </tr>
</tbody></table>
</center>


</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>
 
Merci Seesee, het werkt! Fantastisch!
You made my day...
 
Hoi elsh,
Leuk origineel menu-ontwerp heb je gemaakt. :thumb:
Ik was intussen een heel andere oplossing aan het fabrieken:


  • Weg met alle javascript! :D
  • Weg met de tabel voor de opmaak! :D
  • Weg met alle (te preloaden) 15 verschillende images! :D
  • Weg met de ontoegankelijkheid en de Google-nadelen! :D
  • Weg met het Transitional Doctype! :D
  • Weg met de invalid html! :D

Wat dacht je van deze korte html ipv het hele tabel-gebeuren met alle image-swappers:
HTML: 
<ul id="menu">
	<li><a id="magazines" href="magazines.htm"><span>Magazines</span></a></li>
	<li><a id="tabloids" href="tabloids.htm"><span>Tabloids</span></a></li>
	<li><a id="meer" href="meer.htm"><span>Meer</span></a></li>
</ul>

Wat dacht je van het verwijderen van ook het hele javascript-blok uit de <head>?
Wat dacht je van het gebruiken van één gecombineerd image voor alles (deze afbeelding van maar 3.5kB)?
En wat dacht je van het op de juiste plekken zetten met css?

De #menu <ul> krijgt de hele achtergrond voor de normale toestanden van de links (dwz de linkerhelft van de afbeelding):
Code: 
#menu {
	width: 160px;
	height: 96px; /* incl. padding-top: 142px */
	margin: 0;
	padding: 46px 0 0 0;
	list-style: none;
	background: url(images/wat-doet-koen-bg.png);
	}

De links worden transparante oppervlakjes met elk hun eigen breedte (en het background-img er al vast in voor het hoveren):
Code: 
#menu a {
	position: relative;
	height: 32px;
	display: block;
	background: url(images/wat-doet-koen-bg.png) no-repeat -9999px 0; /* uit zicht */
	}

#magazines { width: 86px; }
#tabloids  { width: 94px; }
#meer      { width: 102px; }
Bij het hoveren wordt telkens het juiste partje van het rechterdeel van het image gebruikt:
Code: 
#magazines:hover, #magazines:focus { background-position: -160px -46px; }
#tabloids:hover,  #tabloids:focus  { background-position: -160px -78px; }
#meer:hover,      #meer:focus      { background-position: -160px -110px; }

Dan blijft nog over het staafje omhoog bij elk menu-item. Dat kan er in gezet worden met een <span> van de goede breedte, die de juiste blauwe kleur krijgt, en met een absolute positie op z'n plaats gebracht wordt:
Code: 
#menu a span {
	position: absolute;
	top: 0;
	right: 0;
	width: 6px;
	background: #0092C8;
	margin-top: -9999px;  /* text uit zicht in ruststand */
	text-indent: -9999px; /* text ook uit zicht bij hover */
	}
		
#magazines:hover span, #magazines:focus span { margin-top: -32px; height: 32px; }
#tabloids:hover span,  #tabloids:focus span  { margin-top: -64px; height: 64px; }
#meer:hover span,      #meer:focus span      { margin-top: -96px; height: 96px; }
Tegelijk zijn de <span>'s zó ingericht, dat er ook een hidden tekst in kan voor Google, text-browsers, voorleesbrowsers enz.

Klaar! :)



Met vriendelijke groet,
CSShunter
_________
PS: De pagina-snelheid is prettig toegenomen: er is maar een kwart nodig van de laadtijd van het origineel.
 
Laatst bewerkt:
Impressive, mooi compacte code. Ik weet helaas te weinig van css om alles te kunnen toepassen wat je voorstelt.
Ik word wel wat zenuwachtig van 'Weg met de ontoegankelijkheid en de Google-nadelen!'

Groet Els
 
Hoi Els,
... wat zenuwachtig van 'Weg met de ontoegankelijkheid en de Google-nadelen!'
Klik om te vergroten...
Heel erg super-ongerust hoef je je nu ook weer niet te maken, want de pagina's in het menu zijn nog steeds te bereiken. :)
Wat hier speelt, is het volgende.
Een voorlees-browser gaat in jouw versie index3.htm de volgende "screen reader output" voorlezen:

koen-ori-fangs.png

Om te beginnen wordt geprobeerd om de Nederlandse inhoud op z'n Engels uit te spreken. Dat is makkelijk te verhelpen door op te nemen:
HTML: 
<html lang="nl">
Dan zie je dat ook de tabel (en de tabel in de tabel) wordt voorgelezen. Dat is overbodig, want er zijn helemaal geen tabellen op de pagina (er staan alleen maar 3 links in). NB: de tabellen worden wel eerst voorgelezen, voordat de inhoud komt.
  • Men moet dus onthouden "Er komt een tabel met 2 kolommen en 10 rijen met inhoud onder elkaar", in afwachting van hoe die kolommen en rijen gevuld gaan worden.
  • Vervolgens komt er weer een tabel, nu met maar "1 kolom en 5 rijen tekst onder elkaar". Dat vraagt nogal wat van je voorstellingsvermogen!
  • Dan komen er 3 links.
  • En dan, plop, houden beide tabellen opeens op: zat er dan niks in al die kolommen en rijen???

Bij de 3 links is er geen echte link-tekst; er wordt voorgelezen dat het een plaatje is, en wat de beschrijving van het plaatje is (de alt-tekst). In dit geval komt het op hetzelfde neer, maar dat hoeft niet altijd zo te zijn. Het kan bv. zijn dat een plaatje de beschrijving "magazines" heeft, maar dat de link naar een pagina "drukwerk" gaat. Dus of een plaatje ook de pagina van een link weergeeft, moet de bezoeker met voorleesbrowser maar afwachten.

- Kortom, dit maakt het dus minder toegankelijk voor mensen die een voorleesbrowser gebruiken.

=====
Door gebruik te maken van css, background-images en hidden text ben je van deze toestanden af. In mijn versie wat-doet-koen.htm:

koen-nw-fangs.png

Nu is er alleen maar een lijstje met 3 link-items, en is de voorleesbrowser-bezoeker van alle ballast verschoond.

==============

Als we in een pure tekst-browser gaan kijken, die hetzelfde opmerkt als wat de Google-bot van de pagina waarneemt, dan zien we in jouw versie:

koen-ori-lynx.png

Het opsommen van layout-images is overbodig voor die iemand die ze met een pure tekstbrowser toch niet kan zien.
Voor de Google-bot zijn ze ook niet relevant, want deze layout-afbeeldingen hoeven niet zo nodig opgenomen te worden in de Google-afbeeldingen.
De links zijn bereikbaar, weer dankzij hun alt-omschrijving.
Omdat het geen (of: niet óók) echte tekst-links zijn, zullen ze minder bijdragen tot een hoge Google-ranking voor deze trefwoorden op de pagina.

In mijn versie wordt het:

koen-nw-lynx.png

Geen overbodigheden, echte tekst-links.

============

Zo ongeveer.
En ... css is erg de moeite waard om meer van te weten te komen. Dat loont altijd! *) :)



Met vriendelijk groet,
CSShunter
__________
*) Bv. omdat je die vreselijke tabel-in-tabel niet op elke pagina hoeft te herhalen, en kunt volstaan met het korte html-menu plus een link naar het stylesheet.
 
Laatst bewerkt:
Hartstikke bedankt, erg aardig dat je zo meedenkt. Ik ga proberen css toe te passen. Thanks
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan