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

Pagina: 1
Acties:

  • mmniet
  • Registratie: Oktober 2002
  • Laatst online: 13-05 08:20

mmniet

De beetje weter

Topicstarter
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:
Afbeeldingslocatie: http://www.xs4all.nl/~mmniet/hovera.gif
en vervolgens als er met de muis over heen gehoverd wordt moeten we dit krijgen
Afbeeldingslocatie: http://www.xs4all.nl/~mmniet/hoverb.gif

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 ]

It's me Mario


  • RM-rf
  • Registratie: September 2000
  • Laatst online: 13-05 20:04

RM-rf

1 2 3 4 5 7 6 8 9

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

als je puur CSS wilt gebruiken, kun je de pseudoclass
code:
1
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 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen


  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

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

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • mmniet
  • Registratie: Oktober 2002
  • Laatst online: 13-05 08:20

mmniet

De beetje weter

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

It's me Mario


  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

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?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • gorgi_19
  • Registratie: Mei 2002
  • Laatst online: 13-05 21:26

gorgi_19

Kruimeltjes zijn weer op :9

Digitaal onderwijsmateriaal, leermateriaal voor hbo


  • mmniet
  • Registratie: Oktober 2002
  • Laatst online: 13-05 08:20

mmniet

De beetje weter

Topicstarter
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:
1
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

It's me Mario


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 01:23

crisp

Devver

Pixelated

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 ]

Intentionally left blank


  • RM-rf
  • Registratie: September 2000
  • Laatst online: 13-05 20:04

RM-rf

1 2 3 4 5 7 6 8 9

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:
1
2
3
<a href="linkje.html" class="menu">
   <span class="menutekst">tekst</span>
</a>

en dan in de CSS:
code:
1
2
3
4
5
6
7
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)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

Pagina: 1