Menu met eigen font zonder swapimage

[Rebellista]

Hoi

Ik ben bezig met een website, maar ik loop voor het menu tegen een probleem aan.
Dit menu (zie onderstaande plaatje) wil ik ga gaan maken, maar aangezien ik nog niet heel erg gevorderd ben op het gebied van codering wil ik om advies vragen.
Het gebruikte font is een speciale en vind je niet op iedere PC.. een oplossing daarvoor zou kunnen zijn dat ik er images van maak en dan een swap image menu maak..



Mijn vraag is: zijn er ook andere, handigere oplossingen voor? Bijvoorbeeld met javascript of iets dergelijks?
(want swapimages is niet echt ideaal met het oogpunt op zoekmachines etc)

Ik heb al wat gegoogled maar ik kon niets goeds vinden!

Groeten

[Cartman!]

Zoek eens op 'sIFR'

[Rebellista]

ziet er goed uit!
maar ik heb alleen geen idee hoe ik dit zou moeten toepassen in mn menu..

[Nutral]

Als je die plaatjes een goede naam en alt tekst heeft is het toch geen probleem ?

[Bozozo]

Zie dit artikel voor uitgebreide mogelijkheden wat betreft rollover images. Er staat geloof ik ook ergens een referentie in naar een overzicht van mogelijke methodes om de text die de images voorstellen ook zichtbaar te maken voor slechtzienden en zoekmachines.

[Zerora]

Cartman! schreef op zondag 20 januari 2008 @ 16:12:
Zoek eens op 'sIFR'

sIFR is een mooi stukje techniek
Er zitten helaas ook nadelen aan. Het vertraagd namelijk het inladen van de website in je browser. Kijk bijv. maar eens op Geenstijl. Die site gebruikt de sIFR techniek en dat daardoor de site langzaam inlaad.
Het is daarom aangeraden om niet veel siFR toe te passen op je website.

Om even te reageren op je website. Ik zou in je menu bovenaan geen sIFR gebruiken, maar gewoon afbeeldingen (met mouse-over?). Dit is de beste oplossing voor het menu, omdat het menu over het algemeen gewoon altijd hetzelfde is en daardoor dus niet variable hoeft te zijn. Indien wijziging noodzakelijk is, kan dit eenvoudig gedaan worden door een afbeelding toe te voegen, te wijzigen of te verwijderen.
Als je daarna kijkt naar je roze kopteksten wordt sIFR wel interessant doordat deze dus ook dat aangepaste lettertype gebruiken. Kopteksten zijn vaak wel variable en veranderen dus constant. Als je hier dus sIFR toepast zullen de kopteksten gewoon het gewenste uiterlijk behouden. Het enige wat sIFR doet is de tekst vervangen door een flash-'blokje' met daarin de gewenste lettertype. Dat blovkje vervangt dus de normale font met het aangepaste font. Wordt er geen flash ondersteunt, dan laad sIFR enkel de CSS opmaak.

Voor statische teksten die nooit of nauwlijks zullen veranderen is dus sIFR helemaal niet interessant, omdat dit alleen maar extra vertraging geeft aan je website. Enkel op variabele teksten is het gebruik van sIFR dus interessant.

En hoe je dat sIFR installeerd op je website, staat vast op het sIFR forum

[Rebellista]

heb het nu toch maar met een swap image opgelost... (http://www.rawdesign.nl/mydream/)

Voor de roze kopjes in elk vak ga ik me maar eens verdiepen in sIFR.. volgens mij is dat de beste oplossing in dit geval..

thanks voor alle reacties tot zover!

[Kiphaas7]

Ehrm, je maakt een menu alleen met <img> tags?

Doe het liever met ul en li en dan met css je tekst vervangen door een achtergrond.

[Toolskyn]

Waarom los je dit niet op met stylesheets? Je gebruikt nu een of ander javascriptje voor een hover terwijl dat gewoon standaard in browsers is ingebouwd (met uitzondering van IE6 natuurlijk, maar daar is redelijk simpel omheen te werken).

[Bitage]

Geen JavaScript gebruiken, maar die letters doorzichtig maken. Dan met CSS de achtergrond van het divje waar de images in staan veranderen van kleur dmv

Cascading Stylesheet:

div.menuoption:hover
{
background-color:#123456;
}

Scheelt weer een hoop code

Of je maakt voor ieder menu optie een aparte class/id aan in je CSS, maar dan komt er weer een hoop code bij, kun je netzogoed JS blijven gebruiken.

Maar welke oplossing je ook kiest, maak wel aparte bestanden aan voor styles en scripts, zodat je HTML netjes blijft.

[ Voor 37% gewijzigd door Bitage op 20-01-2008 20:40 ]