xhtml 1.1 en onmouseover

scoutsboekhoute · **Geplaatst:** 29 Jan 2004 15:02

Hallo, ik ben bezig met het maken voor een site voor onze jeugdraad, en wil die laten voldoen aan de nieuwste standaard xhtml 1.1

Momenteel leverde dat nog geen zware problemen op maar heb ik nog 2 errors van hetzelfde kaliber:

Code:

Line 53, column 29: there is no attribute "onMouseOver" (explain...). 
  <td class="menu" onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="

hoe los ik dit op ?? (een voorbeeld van waar ik het gebruik en waarom is hier te vinden (zie het linkermenu))

alvast bedankt !

hopla · **Geregistreerd:** 22 Jan 2004 0:00 **Berichten:** 773

CSS! CSS!!

Gebruik de :hover pseude selector. Zet bijvoorbeeld dit in je stylesheet:

Code:

.speciaaltd :hover{
      background-color: blue;
}

en zet dan het class attribuut voor alles die zo moet oplichten. Bv. <td class="speciaaltd" ...

scoutsboekhoute · **Geplaatst:** 30 Jan 2004 0:38

dat werkt dus blijkbaar enkel in opera, en niet in internet explorer

scoutsboekhoute · **Geplaatst:** 30 Jan 2004 0:57

ergens gevonden op een site:

xhtml aanvaardt niet onMouseOver maar wel onmouseover
hoofdlettergevoelig dus...

http://www.technorealm.co.uk/design/html-to-xhtml-conversions.html

sn1029 · **Geplaatst:** 05 Feb 2004 17:14

gebruik toch CSS en lijstjes in plaats van tabellen voor een menu!!!
(lees: http://www.alistapart.com/articles/taminglists/ of de twee artikels over "sliding doors" op dezelfde site.)
het principe van het mouse-overeffect:
html

Code:

<li class="menu"><a href="blabla">menuitem1</a></li>

CSS:

Code:

li.menu a{background-color: #0000FF; display: block; height: 2em; width: 10em;}
li.menu a:hover{background-color: #FF0000;}

Internet Explorer ondersteunt pseudoklasse 'hover' enkel voor element 'a' (microsoft maakt het ons weer eens moeilijk... ze zijn daar goed in.)

Sibbe · **Geplaatst:** 05 Feb 2004 19:06

Voor iedereen die op een beetje niveau met webontwerp bezig is, die website http://www.alistapart.com is heel goede lectuur!

sn1029 · **Geplaatst:** 05 Feb 2004 20:00

Da's zeker zo. Ik heb de indruk dat de meesten hier actief op het forum (heel) veel weten over php en server-side dingen, maar vergeet ook de layout niet! Daarmee bedoel ik niet alleen een 'mooie' layout, maar ook hoe die layout opgebouwd is... en vele tips vind je op A List Apart. Zker lezen die artikels.

hopla · **Geregistreerd:** 22 Jan 2004 0:00 **Berichten:** 773

Om webdesign te leren met st(y/ij)l(e) en <div>'s ipv <table>'s kan ik zeker ook deze links aanraden:

http://www.positioniseverything.net/index.php

En in het bijzonder deze twee artikels:

http://www.positioniseverything.net/articles/flow-pos.html
http://www.positioniseverything.net/articles/float-theory.html

Deze geven een héél heldere uitleg over absolute positioning en float.

Als je nooit verstaan hebt wat

Code:

#somediv{
    position: absolute;
    left: 10px;
    top: 10px;
}

of

#someotherdiv{
    float: left;
}

betekent dan MOET je gewoon deze artikels lezen.

scoutsboekhoute · **Geplaatst:** 06 Feb 2004 2:36

beadnkt voor de tips alvast, ik ga deze websites in de loop van de week zeker eens grondig bekijken

scoutsboekhoute · **Geplaatst:** 06 Feb 2004 4:56

nog een lastige:

Citaat:

Line 29, column 73: character "#" is not allowed in the value of attribute "usemap"
...gif" alt="" width="334" height="71" usemap="#top" />

ik heb al zitten zoeken op het internet, maar vind geen oplossing (die zou volgens bepaalde bronnen niet eens bestaan...)

hopla · **Geregistreerd:** 22 Jan 2004 0:00 **Berichten:** 773

Ik veronderstel dat je een image map wil gebruiken ? Waarbij je dus afhankelijk van waar je klikt op de image een andere pagina laadt ?
Dit wordt ten zeerste afgeraden door het W3C omdat mensen met bijvoorbeeld een niet visuele browser daar moeilijkheden mee kunnen hebben. Kijk anders eens of het mogelijk is je figuur op te splitsen en dan elk van die figuren een aparte link te geven.

To · **Geplaatst:** 06 Feb 2004 11:07

scoutsboekhoute schreef:

nog een lastige:

Citaat:

Line 29, column 73: character "#" is not allowed in the value of attribute "usemap"
...gif" alt="" width="334" height="71" usemap="#top" />

ik heb al zitten zoeken op het internet, maar vind geen oplossing (die zou volgens bepaalde bronnen niet eens bestaan...)

Voor XHTML 1.0 Transitional mag het in elk geval wel nog. Ik gebruik op de uniform-pagina op onze site o.a. dit stukje:

Code:

<p class="midden">
  <img src="../../bestanden/kentekens/hemd03-04.gif" usemap="#hemd" border="0" alt="Ga op een kenteken staan voor meer informatie" />
</p>

<map id="hemd" name="hemd">
  <area onmouseover="toonkenteken(1)" onmouseout="verbergkenteken(1)" shape="rect" coords="112,92,130,129" alt="Het jaarkenteken"></area>
  <area onmouseover="toonkenteken(2)" onmouseout="verbergkenteken(2)" shape="circle" coords="51,122,15" alt="Het takkenteken"></area>
  <area onmouseover="toonkenteken(3)" onmouseout="verbergkenteken(3)" shape="circle" coords="127,25,26" alt="Oude jaarkentekens"></area>
  <area onmouseover="toonkenteken(4)" onmouseout="verbergkenteken(4)" shape="rect" coords="221,122,247,130" alt="Het kenteken &quot;België&quot;"></area>
  <area onmouseover="toonkenteken(5)" onmouseout="verbergkenteken(5)" shape="rect" coords="222,152,245,165" alt="Het beloftekenteken"></area>
  <area onmouseover="toonkenteken(6)" onmouseout="verbergkenteken(6)" shape="circle" coords="304,82,21" alt="De patrouilledriehoek / Het patrouillelintje"></area>
  <area onmouseover="toonkenteken(7)" onmouseout="verbergkenteken(7)" shape="circle" coords="303,115,12" alt="Het kenteken &quot;Vlaanderen&quot;"></area>
  <area onmouseover="toonkenteken(8)" onmouseout="verbergkenteken(8)" shape="circle" coords="76,78,13" alt="Het groepslintje"></area>
  <area onmouseover="toonkenteken(9)" onmouseout="verbergkenteken(9)" shape="circle" coords="312,138,11" alt="Het kenteken &quot;Vlaams-Brabant&quot;"></area>
  <area onmouseover="toonkenteken(10)" onmouseout="verbergkenteken(10)" shape="circle" coords="318,160,10" alt="Het internationale scoutskenteken"></area>
</map>

En die pagina is XHTML 1.0 Transitional valid (check).

To

sn1029 · **Geplaatst:** 06 Feb 2004 15:57

image maps: opnieuw lees http://www.alistapart.com/articles/imagemap/ :arrow:

...en nog nen heel handigen truuk: imageswaps (bv: normaal een grijs figuurken en bij mouseover een blauw figuurken) ZONDER JAVASCRIPT doet ge als volgt met CSS: ge maakt één figuurken met en het grijs figuurken en het blauw figuurken onder elkaar. Ge maakt een link zo hoog als de halve hoogte van uw volledig figuurken:

Code:

li.menu a{
display: block; 
background: transparent url(images/figuurken.png) no-repeat scroll left top; 
height: 20px; 
width:150px;}

en de mouseoverstaat:

Code:

li.menu a:hover{
background-position: bottom;}

staat denk ik ook ergens uitgelegd op ALA, kan ook ergens ander geweest zijn.
ben hier gelijk het warm water opnieuw aan het uitvinden :wink:

waarschijnlijk mogen anderen hier straks php terug uitvinden als ik aan een (volledige) php-site begin

Scoutnet vzw

xhtml 1.1 en onmouseover

Wie is er online?