rollover button

[RobMan]

Hoi!

Ik wil graag een rollover knop maken met 2 states, mouse over en mouse off. Ik heb al twee goede afbeeldingen alleen ik heb geen javascript kennis. Ik heb al wel de functie in Dreamweaver 8 ontdekt maar ik schrijf de html zelf en wanneer Dreamweaver de rollover doet wordt het gelijk een chaos in de code en weet ik niet wat waar voor dient.
Is er een htmlmanier?
Is er een kant en klare code voor copy en paste?
Is er een goede, simpele, duidelijke tutorial (NL of ENG)?

Bedankt!

 

[peter vazed]

Hier
http://people.zeelandnet.nl/vazed/vinden/fun/fun16_mouse-over-im.html
een voorbeeld.

Ieder plaatje heeft een eigen naam.
Er zijn gecompliceerdere en kortere scripts.
Kijk anders op:
http://a1javascripts.com/

 

[Egel]

<img src="a.gif" onmouseover="this.src='b.gif'" onmouseout="this.src='a.gif'">

 

[RobMan]

Is het zo simpel Egel?
ik snap wat er staat aan code en ga het ook gebruiken alleen er is dan geen pre-load? Merk je dan verschil bij het gebruik op de site? Ik weet wel dat je bij de javacode wel een preload kan aangeven maar dit is wel omslachtig omdat je voor elk plaatje apart de naam moet geven.
Maar ja, ik kijk eerst wel even rond en anders post ik nog wel een vraag!

 

[Egel]

Zo simpel is het inderdaad.

Er kan een kleine vertraging optreden, maar als je op deze manier preload:

<img src="a.gif" onmouseover="this.src='b.gif'" onmouseout="this.src='a.gif'">
<img src="c.gif" onmouseover="this.src='d.gif'" onmouseout="this.src='c.gif'">

<div style="display: none;">
 <img src="a.gif"><img src="b.gif">
 <img src="c.gif"><img src="d.gif">
</div>

gaat het in een flits. Door alle buttons in een onzichtbare div te plaatsen (op het einde van de pagina) staan de plaatjes in het geheugen en worden ze bij de mouse-events daaruit geladen en niet van de site.


Vr.Gr. Egel.

 

[RobMan]

Aha dankje! Ik snap wat je bedoelt..
Overal waar ik op internet keek voor rollovers kreeg ik allemaal ingewikkelde javascript te zien maar dit is simpele code

 

[klaverik]

Dit werkt idd prima :thumb:. Heb het toegepast om een foto te vergroten wanneer men hier met de muis over beweegt. Heb alleen een probleem met de positie waar de vergoting komt. Mijn webpagina bestaat namelijk uit 4 kolommen met in de 4e kolom een rijtje foto's. Ik gebruik geen lagen. In die kolom, op de plaats van de kleine foto komt nu het grote exemplaar. Dit is niet mooi en onduidelijk. Ik zou graag willen dat de vergroting ,bijvoorbeeld, midden op de pagina wordt geopend.

Is dit mogelijk met een eenvoudige uitbreiding van hiervoor gegeven code?

Alvast bedankt voor de reacties.

 

[RobMan]

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

misschien ander beter idee?

 

[Egel]

Is dit mogelijk met een eenvoudige uitbreiding van hiervoor gegeven code?

Eenvoudig code vind je hier: http://www.helpmij.nl/forum/showthread.php?p=2105539#post2105539
(Met onclick vervangen door onmouseover.)

Maar daarvoor moet je al wel vanaf het begin 1 grote foto op je pagina plaatsen.


De lightbox uit de link van RobMan is natuurlijk wel chiquer.


Vr.Gr. Egel.

 

[RobMan]

Dat is idd de afweging voor klaverik

Lightbox is voor de eerste keer omslachtig om te installeren al staat alles goed uitgelegd!

 

[klaverik]

Bedankt voor de reacties:thumb:. Ga ermee aan de slag.