[JS/HTML/CSS/ASP] Speciale mouse over

[mmniet]

Tweakers,

Heb het volgende wat ik wil, maar kan de oplossing niet vinden.

Het probleem: Ik wil een button een dynamische tekst hebben. Dus als een categorie " tekst " heet dan moet de button ook de woorden " tekst " bevatten. Tot zover niet moeilijk. Als men er met de muis over gaat moet de tekst echter verdwijnen en moet er een anders plaatje getoond worden. Hieronder de transitie ter illustratie:
We hebben eerst:

en vervolgens als er met de muis over heen gehoverd wordt moeten we dit krijgen


Ik hoop dat jullie het snappen. Ik werk in ieder geval met ASP HTML en CSS. Wie kan me helpen aan een oplossing die ook werkt met bovengenoemde?

[ Voor 3% gewijzigd door mmniet op 28-02-2005 14:05 ]

[RM-rf]

onmouseover?
http://www.javascripter.net/faq/onmouseo.htm

als je puur CSS wilt gebruiken, kun je de pseudoclass

code:

A:hover { background-image: url( blah.png ); }

gebruiken Firefox, Opera en KHTML ondersteunen ook :hover voor andere elementen dan de A, internet explorer doet dit enkel met een A-element

[ Voor 81% gewijzigd door RM-rf op 28-02-2005 14:13 ]

[BtM909]

RM-rf schreef op maandag 28 februari 2005 @ 14:10:

offtopic:
Kan jij niet moven naar [WG], waar dit topic hoort?

[mmniet]

ik meen me te herinneren dat het dynamische tekstje niet weg wil

[BtM909]

mmniet schreef op maandag 28 februari 2005 @ 14:14:
ik meen me te herinneren dat het dynamische tekstje niet weg wil

Dan hide je toch ook de tekst?

[gorgi_19]

>> Webdesign & Graphics

[mmniet]

RM-rf schreef op maandag 28 februari 2005 @ 14:10:
onmouseover?
http://www.javascripter.net/faq/onmouseo.htm

als je puur CSS wilt gebruiken, kun je de pseudoclass

code:

A:hover { background-image: url( blah.png ); }

gebruiken Firefox, Opera en KHTML ondersteunen ook :hover voor andere elementen dan de A, internet explorer doet dit enkel met een A-element

dat is dus geen goeie oplossing want vrijwel alle standaard gebruikers hebben IE

[crisp]

mmniet schreef op maandag 28 februari 2005 @ 15:49:
[...]

dat is dus geen goeie oplossing want vrijwel alle standaard gebruikers hebben IE

Juist op een anchor werkt het ook in IE:

textA

[ Voor 3% gewijzigd door crisp op 28-02-2005 16:05 ]

[RM-rf]

mmniet schreef op maandag 28 februari 2005 @ 15:49:
[...]

dat is dus geen goeie oplossing want vrijwel alle standaard gebruikers hebben IE

dan gebruik je toch gewoon wél een A-element?
explorer kan enkel niet :hover doen op bv button, of gewone DIVs, enkel op een A-element...

verder kun je iets doen als

code:

<a href="linkje.html" class="menu">
   <span class="menutekst">tekst</span>
</a>

en dan in de CSS:

code:

A.menu:hover {
   background-image: url( plaatje.png );
}
A.menu:hover SPAN.menutekst {
   position: relative;
   visibility: hidden;
}

(een beetje creatief omgaan met de hier voorgstelde oplossingen, je krijgt niet het antwoord helemaal voorgekauwd, zoek bv eens op de termen die je hier voorgesteld krijgt, je moet het uiteindelijk zelf doen)