[XHTML] Hoe doe je roll-over images in XHTML 1.0 strict?

[Verwijderd]

Al gezocht op het wijde net en hier op gatherings maar niet echt wijzer geworden. Misschien weten jullie wel raad.

Volgende om dus een roll-over te bekomen met een kleine preview image en een grote duidelijke image. Bedoeling is dat de grote image wordt vervangen als je over een preview image gaat.

code:

[img]'photo_small.jpg'[/img]
[img]'boot.jpg'[/img]

Helaas is het 'name' attribuut niet meer toegelaten in XHTML 1.0 strict. Met als validator error:

code:

Line 46, column 207: there is no attribute "name"
...'325' align='top' alt='' /><img name='mainPhoto' id='mainPhoto' src='/picture...

Als je het 'name' attribuut weglaat, ja dan werken je roll-overs simpel weg niet meer. Niet echt de bedoeling. Kent iemand de oplossing?

[André]

Maak van je name attribuut een id en gebruik ipv document.mainPhoto.src document.getElementById("mainPhoto").src

[alienfruit]

Uh. de hover effect van een Achor gebruiken om de background aan te passen

[pasta]

Niet alleen de anchor heeft een hover functie, alleen wordt de rest niet ondersteund in IE. Daarbij wordt XHTML ook niet volledig ondersteund in IE.

[djluc]

pastapappie.NET schreef op 31 augustus 2004 @ 19:19:
Niet alleen de anchor heeft een hover functie, alleen wordt de rest niet ondersteund in IE. Daarbij wordt XHTML ook niet volledig ondersteund in IE.

Er is een HTC te vinden op dit forum waardoor IE wel fatsoenlijk werkt met de hovers.

[alienfruit]

Op de site van Zeldman gebruiken ze het ook. Lekker belangerijk dat IE *ducks*

[ Voor 2% gewijzigd door alienfruit op 31-08-2004 19:37 . Reden: dat typen de laatste paar weken ]

[Verwijderd]

André schreef op 31 augustus 2004 @ 18:54:
Maak van je name attribuut een id en gebruik ipv document.mainPhoto.src document.getElementById("mainPhoto").src

Dat is idd de slimste oplossing

[Verwijderd]

Verwijderd schreef op 31 augustus 2004 @ 19:37:

Dat is idd de slimste oplossing

Daar ben ik het mee oneens. Je kunt prima een array te maken met images en hun rollover images op een of andere manier aan elkaar gekoppeld.
Vervolgens hang je aan de img elementen een onmouseover attribuut met daarin een aanroep naar een functie, met this als argument. Zo hoef je helemaal geen namen of id's te gebruiken. Dat is dus veel beter onderhoudbaar.

Overigens is document.images.namedItem() waarschijnlijk vele malen sneller dan document.getElementById()

[Clay]

Of zonder names/ids. nog makkelijker:

[rml]Clay in "[ JS/DOM] image swap werkt niet in IE met..."[/rml]

[coubertin119]

pastapappie.NET schreef op 31 augustus 2004 @ 19:19:
Niet alleen de anchor heeft een hover functie, alleen wordt de rest niet ondersteund in IE. Daarbij wordt XHTML ook niet volledig ondersteund in IE.

element:hover is CSS, niks XHTML. Je zit compleet naast de kwestie zeg maar .

[Skaah]

XHTML:

[img]"toon_preview.png"[/img][img]"preview.jpg"[/img]

Let op: geen spatie ertussen.

[ Voor 43% gewijzigd door Skaah op 31-08-2004 22:20 ]

[creative8500]

Skaah: mijn voorkeur gaat er sterk naar uit om alle, maar dan ook alle JavaScripts in externe bestanden te zetten. Het onmouseover-attribuut is als het FONT-element (of het lettertype Comic Sans), en dient verbannen te worden. Uit XHTML zeker.

[pasta]

coubertin119 schreef op 31 augustus 2004 @ 21:20:
[...]
element:hover is CSS, niks XHTML. Je zit compleet naast de kwestie zeg maar .

Klopt, maar dat was ook niet mijn punt, het punt was dat het makkelijk kan, maar dat IE dan alleen wat zal tegenstribbelen.

[RM-rf]

heren, als ik fraggel7's openingspost goed lees zie ik dat hij bedoeld dat een hover over afbeelding A, het veranderen van afbeelding B moet veroorzaken...

oftewel, enkel met :hover kom je er niet en dat zou ook incorrect zijn (hover is enkel bedoeld om het gedrag van een element zelf te beinvloeden, alhoewel ik me kan voorstellen dat er wel 'hacks' mee te bedenken zijn, zijn dat toch vooral tweederangs trucjes, die daarvoor niet bedoeld zijn).

als ik zou kiezen, zou ik in dit geval gewoon de ID gebruiken, en iets als

code:

<img src='photo_small.jpg' align='middle' class='borderBlack' 
   onmouseover="document.getElementById('mainPhoto').src='photo_large.jpg';" alt='' />
<img id='mainPhoto' src='boot.jpg' alt='' align='middle' />

doen, eventueel is Skaah ook een optie, maar ik dacht dat nextSibling geen officiele DOM is en zoiets is vragen om problemen, als je niet tegelijk zorg ervoor draagt dat de HTML-code vervolgens heel consequent blijft.

[Rickets]

RM-rf schreef op 31 augustus 2004 @ 23:52:
doen, eventueel is Skaah ook een optie, maar ik dacht dat nextSibling geen officiele DOM is en zoiets is vragen om problemen, als je niet tegelijk zorg ervoor draagt dat de HTML-code vervolgens heel consequent blijft.

Misschien wat offtopic, maar nextSibling
Daarbij vind ik de oplossing van Clay een stuk handiger dan de hier genoemde oplossingen

[Verwijderd]

oftewel, enkel met :hover kom je er niet en dat zou ook incorrect zijn (hover is enkel bedoeld om het gedrag van een element zelf te beinvloeden, alhoewel ik me kan voorstellen dat er wel 'hacks' mee te bedenken zijn, zijn dat toch vooral tweederangs trucjes, die daarvoor niet bedoeld zijn).

Euh?!

Sinds kort (enkele maanden) ondersteund Mozilla ':hover +' en ':hover ~', welke IE7 er ook in heeft zitten. Als je dan zo'n structuur hebt:

code:

<a href="/foo">Bar</a>
<span>Quuz</span>
<b>Foo 2</b>

Dan kun je het SPAN element laten oplichten als je over het A element gaat door 'a:hover + span{background:lime}' te gebruiken en het B element laten oplichten door 'a:hover ~ b{background:lime}' te gebruiken. Erg simpel.

[creative8500]

RM-rf schreef op 31 augustus 2004 @ 23:52:
oftewel, enkel met :hover kom je er niet en dat zou ook incorrect zijn (hover is enkel bedoeld om het gedrag van een element zelf te beinvloeden, alhoewel ik me kan voorstellen dat er wel 'hacks' mee te bedenken zijn, zijn dat toch vooral tweederangs trucjes, die daarvoor niet bedoeld zijn).

code:

img.thumbnail#foo:hover ~ div.preview { background-image: foo-large.png }

Zoals je ziet: er zijn nog heel wat creatieve oplossingen denkbaar... Maar let op dat je geen content kwijt raakt door deze vergrotingen naar de stylesheet te verplaatsen!

[RM-rf]

Verwijderd schreef op 01 september 2004 @ 09:39:
[...]
Euh?!

laat ik het uitleggen; het kan me niet schelen of een groot aantal professionals bedenken iets een standaard te maken omdat het 'Handig' is, dat iets een standaard is betekent enkel dat meerder mensen ermee instemmen, maar het betekent niet dat het conceptueel ook juist is
(democratie is geen garantie voor goed en juist beleid)

CSS is bedoeld voor vormgevingselementen, presentatie.

nu kan ik me voorstellen dat onderdeel van een vormgeving is, om bij een event een ander object binnen de pagina aan te passen. Dat dat deel uitmaakt van de look-and-feel van de site ...

Maar feit is wel dat 90% van de html-bouwers zulke dingen eerder gaat toepassen als een shortcut om scripting te omzeilen, CSS wordt dan al snel alsnog een bloated variant van JSSS, echter als selector systeem een veel beperktere mogelijkheid.
CSS zal dan worden toegepast om non-standard popup-layertjes te genereren, zaken te doen die eerder te maken hebben met de 'ervaring' van een webpagina, cq het 'gebruik' ervan.

Ik vind zaken als scripting en CSS gescheiden horen te blijven, dat er ook binnen de layout-technische mogelijkheden best een grens zou moeten blijven bestaan, CSS hoeft niet alles te kunnen:
het is volgens mij zeker ook van belang dat CSS een prima methode is compatibiliteit te garanderen, alternatieve stylesheets te kunnen aanbieden of verschillende agents:
juist bij zo'n popup ding vrees ik dat de compatibiliteit erg beperkt wordt door de eis exact de door de vormgever/scripter voorgeschreven stylesheet te gebruiken.