Mouse over met klik

[Verwijderd]

Hallo!

Ik maak in een menu gebruik van een mouse over scripts. Maar nu zou ik graag willen dat op de laatst geklikte knop het plaatje blijft staan als een ander plaatje. Bestaat deze functie? En zo ja hoe kan ik dit script aanpassen?
Het mouse-over plaatje heet But_Links_Roll.jpg, en die wil ik ook graag hebben als je er op klikt!

a href= http://www.baanstrahartkamp.nl/Links.htm onMouseOver= "if (document.images) document.But_Links.src= 'http://www.baanstrahartkamp.nl/But_Links_Roll.jpg';" onMouseOut= "if (document.images) document.But_Links.src= 'http://www.baanstrahartkamp.nl/But_Links.jpg';">[img]"http://www.baanstrahartkamp.nl/But_Links.jpg"[/img]</a>

[Verwijderd]

Zou je je vraag iets kunnen verduidelijken? Ik begrijp totaal niet wat je wilt.

[disjfa]

HTML:

<a href="url" class="link">text</a>

en in de css:

Cascading Stylesheet:

a.link{
  background-image:url(url);
}
a.link:hover{
  background-image:url(url);
}

vrij basic neeem ik aan.

[Verwijderd]

Okee, sorry daarvoor..

Ik heb een plaatje: But_Links.jpg
Wanneer ik daaroverheen ga met de muis verandert deze in But_Links_Roll.jpg
Dat wordt gerealiseerd met eerdergepost script.

Nu wil ik dit graag dat wanneer ik op dat plaatje klik, dat die dan als But_Links_Roll.jpg blijft staan.

Op deze manier heb ik meerdere plaatjes onderelkaar staan, die samen het menu vormen. Nu wil ik graag, dat het laatste plaatje waar op geklikt is.. als But_..._Roll.jpg blijft staan en de rest gewoon als But_....jpg.

Zo beter?

[Verwijderd]

Ik zou gewoon die hele onmouseover er uit flikkeren, en met CSS gaan werken. Ik neem aan dat de links in je menu in een apart div of span, staan. Ik doe voor de simpelheid even of dat een class 'menu' heeft.

Cascading Stylesheet:

menu a{
    background-image: url('But_Links.jpg');
}

menu a.selected{
    background-image: url('But_Links_Roll.jpg');
}

Het enige wat je dan nog hoeft te doen is bij het klikken de class van het betreffende element te veranderen in 'selected', en je bent klaar.

Dat laatste zou ik als ik jou was via een loopje doen, waarbij je bij alle links in het menu een event listener toevoegt die de classname verandert, dan hoef je ook geen vieze onclick in je code te zetten.

[ Voor 34% gewijzigd door Verwijderd op 30-06-2005 10:58 ]

[Verwijderd]

Hmm dit klinkt allemaal heel mooi, maar sorry, ik snap erniet zo veel van... Zo kundig ben ik nou ook weer niet...

Ik heb nu het volgende: (het herhaalt zich steeds weer, aangezien er steeds eerst een knopje komt, daarna weer een plaatje ertussen, dan weer een knopje, enz.) Zou je voor 1 knop willen laten zien hoe het moet? Dan pas ik de andere aan, op dezelfde manier.
Trouwens alvast bedankt, dat je steeds zo snel reageert!

Groet, Arsest
--------------------------------------------------------------------------------------------

<div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td>[img]"Lefter5.1.jpg"[/img]</td>
</tr>
<tr>
<td height="26">
<a href= http://www.baanstrahartkamp.nl/Nieuws.htm onMouseOver= "if (document.images) document.But_Nieuws.src= 'http://www.baanstrahartkamp.nl/But_Nieuws_Roll.jpg';" onMouseOut= "if (document.images) document.But_Nieuws.src= 'http://www.baanstrahartkamp.nl/But_Nieuws.jpg';">[img]"http://www.baanstrahartkamp.nl/But_Nieuws.jpg"[/img]</a></td>
</tr>
<tr>
<td height="3">[img]"Lefter5.2.jpg"[/img]</td>
</tr>
<tr>
<td height="26">
<a href= http://www.baanstrahartkamp.nl/Bedrijfsinfo.htm onMouseOver= "if (document.images) document.But_Bedrijfsinfo.src= 'http://www.baanstrahartkamp.nl/But_Bedrijfsinfo_Roll.jpg';" onMouseOut= "if (document.images) document.But_Bedrijfsinfo.src= 'http://www.baanstrahartkamp.nl/But_Bedrijfsinfo.jpg';">[img]"http://www.baanstrahartkamp.nl/But_Bedrijfsinfo.jpg"[/img]</a></td>
</tr>
<tr>
<td height="3">[img]"Lefter5.2.jpg"[/img]</td>
</tr>
<tr>
<td height="26">
<a href= http://www.baanstrahartkamp.nl/Schilderwerk.htm onMouseOver= "if (document.images) document.But_Schilderwerk.src= 'http://www.baanstrahartkamp.nl/But_Schilderwerk_Roll.jpg';" onMouseOut= "if (document.images) document.But_Schilderwerk.src= 'http://www.baanstrahartkamp.nl/But_Schilderwerk.jpg';">[img]"http://www.baanstrahartkamp.nl/But_Schilderwerk.jpg"[/img]</a></td>
</tr>
<tr>
<td height="3">[img]"Lefter5.2.jpg"[/img]</td>
</tr>
<tr>
<td height="26">
<a href= http://www.baanstrahartkamp.nl/Vestiging.htm onMouseOver= "if (document.images) document.But_Vestiging.src= 'http://www.baanstrahartkamp.nl/But_Vestiging_Roll.jpg';" onMouseOut= "if (document.images) document.But_Vestiging.src= 'http://www.baanstrahartkamp.nl/But_Vestiging.jpg';">[img]"http://www.baanstrahartkamp.nl/But_Vestiging.jpg"[/img]</a></td>
</tr>
<tr>
<td height="3">[img]"Lefter5.2.jpg"[/img]</td>
</tr>
<tr>
<td height="26">
<a href= http://www.baanstrahartkamp.nl/Links.htm onMouseOver= "if (document.images) document.But_Links.src= 'http://www.baanstrahartkamp.nl/But_Links_Roll.jpg';" onMouseOut= "if (document.images) document.But_Links.src= 'http://www.baanstrahartkamp.nl/But_Links.jpg';">[img]"http://www.baanstrahartkamp.nl/But_Links.jpg"[/img]</a></td>
</tr>
<tr>
<td>[img]"Lefter5.3.jpg"[/img]</td>
</tr>
</table>
</div>

[Verwijderd]

De code die ik geplaatst heb, valt toch echt onder basiskennis. Als je niet begrijpt waar ik het over heb, dan raad ik je aan een goed boek over CSS te lezen, of een goede tutorial te zoeken op internet.

Je zou natuurlijk ook gewoon die frames er uit kunnen gooien, dan kun je eenvoudig in de pagina opgeven dat er andere plaatjes moeten worden gebruikt, en hoef je dat niet vanuit javascript te doen.

[ Voor 34% gewijzigd door Verwijderd op 30-06-2005 11:31 ]

[Savantas]

Als ik naar je bron kijk gaat dat niet helemaal lukken. Je hebt per plaatje een ander hover-plaatje. Dat kan inderdaad alleen met Javascript, niet met CSS.
Het hierboven al genoemde CSS zorgt ervoor dat links met tekst in plaats van een afbeelding veranderen van achtergrond. Maar dan ga je uit van alleen het rondje links van de link. Die zou dan veranderen van een lege cirkel naar een gevulde. De tekst vet maken kan mooi via CSS, maar dan moet het wel echt tekst zijn, geen plaatje.
Overigens kan je met wat Javascript nog steeds CSS gebruiken voor dit foefje, weet alleen niet meer hoe.

En laat ik hier maar niet met het standaard verhaal aankomen over toegankelijkheid, lists als menu etc. Zoek daar maar in de andere draadjes...
Kan dat niet eens in de/een FAQ komen? (werd toch aan gewerkt?) Komt zo vaak langs...

[ Voor 17% gewijzigd door Savantas op 30-06-2005 11:49 ]

[Verwijderd]

Die tekst-plaatjes zou je er het beste uit halen. Dan zet je alle links binnen een div met een class (of id), en geef je via CSS op alle links binnen die div op te maken zoals jij wilt.

Dus waarschijnlijk een vrij grote padding-left waarde, een wat kleinere padding-top en padding-bottom waarde, dan krijg je de tekst mooi verticaal gecentreerd, en dan kan je met één achtergrond-plaatje werken, en mijn code-voorbeeld gebruiken.