Eigen knoppen hyperlinks onmouseover

[HansVol]

Ik gebruik voor verwijzen naar andere pagina's (hyperlink) eigen knoppen, in feite gewoon images, in mijn website.
<a href="pagx.html"><img src="knop1.jpg"></a>

Die zou ik graag willen aanpassen als er met de muis overheen wordt gegaan. Ik heb van alles gelezen over onmouseover in css, maar dan gaat het over eigenschappen zoals een andere achtergrond of rand. Ik wil in plaats van knop1, knop2 laten verschijnen en terug naar knop1. Misschien ook dingen als knop3 gebruiken voor al aangeklikte pagina's.

Mijn provider ondersteunt bij mijn abonnement geen php, maar als ik met php meer/makkelijker/leuker kan doen aan de website kan ik overstappen op een beetje duurder abonnement. Ik heb 0 ervaring met php en maar weinig met Javascript..

Ik werk met DW, http://www.h-a-web.nl

 

[That Guy]

Nou, dit is het idee:

<element onmouseover='iets();'
         onmouseout='anders();' />

waarbij 'iets();' en 'anders();' javascript is. Nu, het makkelijkste is zoiets:

<img src='knop1.png'
     onmouseover='this.src="knop2.png";'
     onmouseout='this.src="knop1.png";' />

Er is helaas geen manier om een 'al geklikte' link te maken (tenminste, het kan wel (denk ik) maar dat's niet het makkelijkste ooit).

Je kan dus om de <img> tag gewoon je link houden, je moet alleen de onmouseover en onmouseout erbij zetten




:thumb:

 

[Goeroeboeroe]

Met css kun je wel 'n al bezochte status aangeven.

<a id="jubeltenen" href="jubeltenen.html" title="Pagina over jubeltenen">Jubeltenen</a>

a#jubeltenen {display: block; width: 129px; height: 31px; background-image: url(plaatje.jpg);}
a#jubeltenen:visited {background-image: url(plaatje-visited.jpg);}
a#jubeltenen:focus, a#jubeltenen:active {url(background-image: url(plaatje-focus.jpg);}
a#jubeltenen:hover a:hover {background-image: url(plaatje-hover.jpg);}

Normaal genomen zie je plaatje.jpg
Als de link is bezocht plaatje-visited.jpg
Als de link focus heeft (als je er via de tab-toets of zo bent aangekomen, als je 'n Enter geeft wordt de link gevolgd) zie je plaatje-focus.jpg. Hier staat ook :active omdat Internet Explorer 6 en 7 foutief :active behandelen alsof het :focus is.
Bij hoveren over de link zie je plaatje-hover.jpg

De volgorde van :visited, :focus en :hover is van belang, anders werkt het niet.

Eventueel kun je ook nog 'lege' knoppen gebruiken en er de tekst op zetten via css, dan heb je maar 2 tot 4 plaatjes nodig.

 

[HansVol]

Nou, dit is het idee:

<element onmouseover='iets();'
         onmouseout='anders();' />

waarbij 'iets();' en 'anders();' javascript is. Nu, het makkelijkste is zoiets:

<img src='knop1.png'
     onmouseover='this.src="knop2.png";'
     onmouseout='this.src="knop1.png";' />

Er is helaas geen manier om een 'al geklikte' link te maken (tenminste, het kan wel (denk ik) maar dat's niet het makkelijkste ooit).

Je kan dus om de <img> tag gewoon je link houden, je moet alleen de onmouseover en onmouseout erbij zetten

:thumb:

Het ligt aan mijn kennis, maar ik ken die algemene kreten niet, helaas.
Wat is element? Wat is "iets" en "anders"? Hoe ziet die javascript er dan uit? En is dat bij zowat 15 knoppen per knop nodig?
En bij 'this.src=..'; wat is 'this' ?

Hans

 

[csshunter]

Hé, dit blijkt gedeeltelijk een kruispost.
Ik had deze vraag niet gezien, maar los ervan ook een suggestie gedaan (m'n radar zag deze vraag al in de lucht hangen, geloof ik).

• In het "oude draadje" www.helpmij.nl/forum/showthread.php?p=3183301#post3183301. Zie aldaar!
• Ik stel voor, om als je daarop wilt reageren, dat hier in de huidige vraag te doen (ipv daar), dan staat alles van dit onderwerp hier mooi bij elkaar.

Dat is geen javascript-oplossing maar puur css, en een toepassing/uitwerking van wat Goeroeboeroe hierboven al heeft neergepend als css-oplossing. Er is ook geen php voor nodig. Een testpagina met voorbeeld zit erbij.

• Hoe leuk & handig javascript ook kan zijn, ik ga van het principe uit: als javascript niet hoeft of ook anders kan, dan gebruik ik het niet.
• Zie ook "Het optionele karakter van client-side scripts" van het Kwaliteitsmodel Webrichtlijnen (staat redelijk bol van jargon, maar komt op hetzelfde neer).

Met vriendelijke groet,
CSShunter