Afbeeldingen verwisselen, maar zelfde bij active. Hoe?

[sOid]

Ik zit met een probleem (duh, anders zou ik hier niet posten).

Ik moet voor school een website maken, en deze schiet nu een goed end op. Alle div's zijn goed, opmaak is goed etc.

Alleen wil ik een navigatiebalk, maken met afbeeldingen. Hiervoor heb ik in photoshop twee afbeeldingen gemaakt, opgesneden in slices etc. Nu wil ik dat de ene afbeelding bij mouseover verandert in de andere, MAAR ik wil óók dat hij actief blijft zodat de bezoeker kan zien waar op de site hij zich bevindt. Een voorbeeld van hoe ik het wil hebben is ebay, zoals ze de Kopen, Verkopen, Mijn eBay buttons etc hebben gemaakt.

Hoe kan ik dit doen?

Ik heb het web en forum al afgezocht maar kan het niet vinden, alleen maar hoe ik het ene plaatje in de andere kan veranderen.

Misschien nog een probleem: van school mag ik alleen HTML gebruiken, en eventueel JavaScript (waar ik erg slecht in ben) en CSS, maar daar kan je volgensmij alleen de kleur mee veranderen...

Degene met de winnende oplossing krijgt een koekje

Oh, van de code van eBay wordt ik ook niet veel wijzer...

[ Voor 3% gewijzigd door sOid op 23-05-2007 21:03 ]

[BtM909]

onmouseover de src van het huidige plaatje veranderen naar de nieuwe (wat je nu al doet) en niet met onmouseout weer terugzetten

[sOid]

BtM909 schreef op woensdag 23 mei 2007 @ 21:03:
onmouseover de src van het huidige plaatje veranderen naar de nieuwe (wat je nu al doet) en niet met onmouseout weer terugzetten

Maar gaat deze dan wel weer weg als 'ie op een andere pagina is?

Het gaat om deze pagina: http://www.berkenbosch.net/voedingscentrum/

Hij zou nu theoretisch moeten laten zien dat je op 'home' zit (hier is de javascript nog niet in verwerkt), maar als je dan op 'sport' klikt, veranderd de 'home' dan weer terug naar zoals hij nu is?

Is er niet een makkelijkere/snellere oplossing voor?

[user109731]

sOid schreef op woensdag 23 mei 2007 @ 21:45:
[...]
Hij zou nu theoretisch moeten laten zien dat je op 'home' zit (hier is de javascript nog niet in verwerkt), maar als je dan op 'sport' klikt, veranderd de 'home' dan weer terug naar zoals hij nu is?

Het zijn toch 2 verschillende pagina's? Zodra je er op klikt word een andere pagina geladen, en hebben alle afbeeldingen weer hun standaard src...

De link naar de actieve pagina een afwijkende afbeelding geven kun je hardcoded doen of dynamisch met PHP/JS. PHP mag je niet gebruiken, dus dan met JS kijken wat de url van deze pagina is, dan alle li-elementen in het menu aflopen, en kijken welke overeenkomt en die een aparte class geven...

[ Voor 23% gewijzigd door user109731 op 23-05-2007 22:17 ]

[sOid]

Bedankt voor de tips, ik denk dat ik er bijna ben.

Ik zit nu alleen met de volgende problemen:

1) Hij laadt het goede plaatje niet als je op index.html komt, ik wil dus dat je dan al meteen ziet dat je daar zit door middel van het mouseover plaatje. Moet ik het mouseover plaatje in de index.html dan als standaard zetten ofzo?

2) Als je nu met de cursor over een andere gaat (sport in dit geval), licht hij wel op, maar als je er dan niet op klikt gaat ie niet weer weg. Logisch, want dat staat in de code geschreven. Echter, ik wil dat als er niet op geklikt wordt en je dus nogsteeds op de 'home' pagina zit, het bij sport weer weg gaat. Het kan toch niet zo zijn dat ik voor elke pagina een andere code moet gaan schrijven?

Het voorbeeld om het duidelijker te maken:
http://www.berkenbosch.net/voedingscentrum

Oh, ik zie net dat als je op een van de knoppen klikt, en daarna snel weer met je cursor naar beneden gaat, de mouseover afbeelding ook weg gaat

code:

<script language="Javascript"> 

<!-- 
if (document.images) 
{
imgnav1 = new Image 
imgnav1.src = 'images/nav1mo.gif' 

imgnav2 = new Image
imgnav2.src = 'images/nav2mo.gif'
} 
--> 

</script>

code:

<a href="index.html" onmouseover="document.nav1mo.src=imgnav1.src">
        <img src="images/nav1.gif" alt="startpagina" border="0" name="nav1mo"/></a>
      
        <a href="sport.html" onmouseover="document.nav2mo.src=imgnav2.src">
        <img src="images/nav2.gif" alt="Sport" border="0" name="nav2mo"/></a>

[ Voor 30% gewijzigd door sOid op 24-05-2007 10:33 ]

[Mad Marty]

sOid schreef op donderdag 24 mei 2007 @ 10:24:
Bedankt voor de tips, ik denk dat ik er bijna ben.

Ik zit nu alleen met de volgende problemen:

1) Hij laadt het goede plaatje niet als je op index.html komt, ik wil dus dat je dan al meteen ziet dat je daar zit door middel van het mouseover plaatje. Moet ik het mouseover plaatje in de index.html dan als standaard zetten ofzo?

Wat verwacht je zelf dat er gebeurt als je dat doet? Heb je het al eens geprobeerd? Er kan echt weinig gebeuren als je zelf eens probeert. Bovendien, je zegt dat je zelf al zo ver bent gekomen, dan kun je lijkt mij ook prima zelf een plaatje in de webpagina krijgen. Heck, je hebt er zelfs al een paar plaatjes in gekregen!

2) Als je nu met de cursor over een andere gaat (sport in dit geval), licht hij wel op, maar als je er dan niet op klikt gaat ie niet weer weg. Logisch, want dat staat in de code geschreven. Echter, ik wil dat als er niet op geklikt wordt en je dus nogsteeds op de 'home' pagina zit, het bij sport weer weg gaat. Het kan toch niet zo zijn dat ik voor elke pagina een andere code moet gaan schrijven?

Je kan toch gewoon een onmouseout hierbij doen en dan gaat-ie weer weg?
En waarom kan het niet zo zijn dat je voor elke pagina een andere code moet gaan schrijven? Je moet met html/css werken dus dat gaat toch moeten. Wat is daar het probleem aan dan?

[ Voor 27% gewijzigd door Mad Marty op 24-05-2007 10:43 ]