Combineren onmouseover/out en onclick

[Zand01]

Hallo,

Ik gebruik een simpele code voor onmouseover/out acties:

<a onmouseover="IMG01.src='menu_1A.gif'" onmouseout="IMG01.src='menu_1.gif'" > <img border="0" src="menu_1.gif" name=IMG01 width="200" height="50"> </a>

Werkt prima. Maar nu wil ik een eenvoudige plaatjes-gallery maken. De thumbnails hebben een onmouseover/out effect maar ik wil de onmouseover thumbnail laten staan bij een onclik actie! Een onclick menu kan ik maken maar een combinatie krijg ik niet voor elkaar. De onmouseout heeft altijd de overhand.

Even voor het idee:
Een rij thumbnails. Ze lichten op door een onmouseover/out actie. Als er één geklikt wordt blijft de onmouseover thumbnail staan (er wordt elders een vergrote afbeelding weergegeven). De cyclus begint opnieuw als een andere thumbnail wordt geklikt. Deze wordt blijft dan staan, de voorgaande gaat weer over in onmouseout.

Dit werkt dus niet (en ik snap waarom, maar het geeft wel aan wat ik wil):
<a onmouseover="IMG02.src='menu_2A.gif'" onmouseout="IMG02.src='menu_2.gif'" onclick="IMG02.src='menu_2A.gif'"> <img border="0" src="menu_2.gif" name=IMG02 width="200" height="50"> </a>

Is er een eenvoudige manier om dit op te lossen. Met een if-statement of zo in de plaats van de onmouseout “If onclick plaatje_2 else onmouseout=plaatje_1”. Ik wil de code het liefste gewoon in de tags opnemen, geen geavanceerde functie declaraties die niet te doorgronden zijn...

Groet, Zand

 

[Egel]

Je zult toch functies nodig hebben maar dat maakt het juist overzichtelijker:

<script type="text/javascript">
 var mem = 1;
 function show(nr,s) {
  if (nr != mem) document.images['img' + nr].src = 'menu_' + nr + (s ? 'A' : '') + '.gif'; 
  };
 function hold(nr) {
  document.images['img' + mem].src = 'menu_' + mem + '.gif';
  mem = nr;
  };
</script>

<a onmouseover="show(1,true)" onmouseout="show(1,false)" onclick="hold(1); return true;"> <img border="0" src="menu_1A.gif" name="img1" width="200" height="50"> </a>
<a onmouseover="show(2,true)" onmouseout="show(2,false)" onclick="hold(2); return true;"> <img border="0" src="menu_2.gif" name="img2" width="200" height="50"> </a>
<a onmouseover="show(3,true)" onmouseout="show(3,false)" onclick="hold(3); return true;"> <img border="0" src="menu_3.gif" name="img3" width="200" height="50"> </a>

Het eerste knopje staat standaard aan: de eerste vergroting die al meteen wordt weergegeven.

Maar hoe werkt de link? Je had geen href aangegeven.


Vr.Gr. Egel.

 

[Zand01]

Vorbild

Hallo,

Dank je voor het antwoord! Er zijn echter geen links. Kijk maar eens op: xxxx

De thumbnails moeten oplichten bij een onmouseover (bv wordt 2A). Bi onclick moet thumbnail (bv 2A) blijven staan en het grote plaatje (bv 2B) verschijnen. Deze cylcus moet zich kunnen herhalen voor de andere thumbnails 1-8. Als er een andere wordt geklikt dan moet die blijven staan en de vorige (in dit vb 2A) weer terug schakelen naar de onmouseout (in dit vb 2) enz.

Groet, Zand

 

[Egel]

Ongeveer zo?

<script type="text/javascript">
 var mem = 1;
 function show(nr,s) {
  if (nr != mem) document.images['img' + nr].src = 'menu_' + nr + (s ? 'A' : '') + '.gif'; 
  };
 function big(nr) {
  document.images['img' + mem].src = 'menu_' + mem + '.gif';
  document.images['big'].src = nr + 'b.jpg'; // .gif kan ook
  mem = nr;
  };
</script>


<a href="JavaScript:big(1)" onmouseover="show(1,true)" onmouseout="show(1,false)"><img border="0" src="menu_1A.gif" name="img1" width="200" height="50"></a>
<a href="JavaScript:big(2)" onmouseover="show(2,true)" onmouseout="show(2,false)"><img border="0" src="menu_2.gif" name="img2" width="200" height="50"></a>
<a href="JavaScript:big(3)" onmouseover="show(3,true)" onmouseout="show(3,false)"><img border="0" src="menu_3.gif" name="img3" width="200" height="50"></a>
<a href="JavaScript:big(4)" onmouseover="show(4,true)" onmouseout="show(4,false)"><img border="0" src="menu_4.gif" name="img4" width="200" height="50"></a>
<br>
<img name="big" src="1b.jpg">
<br>
<a href="JavaScript:big(5)" onmouseover="show(5,true)" onmouseout="show(5,false)"><img border="0" src="menu_5.gif" name="img5" width="200" height="50"></a>
<a href="JavaScript:big(6)" onmouseover="show(6,true)" onmouseout="show(6,false)"><img border="0" src="menu_6.gif" name="img6" width="200" height="50"></a>
<a href="JavaScript:big(7)" onmouseover="show(7,true)" onmouseout="show(7,false)"><img border="0" src="menu_7.gif" name="img7" width="200" height="50"></a>
<a href="JavaScript:big(8)" onmouseover="show(8,true)" onmouseout="show(8,false)"><img border="0" src="menu_8.gif" name="img8" width="200" height="50"></a>

De onmouseover/out en het blijven staan deden het al maar dit geeft ook een grote foto weer bij het klikken.


Vr.Gr. Egel.

 

[Zand01]

Werkt!

Hallo Egel,

Onzettend bedankt voor je script! Het werkt prima. Het ging even fout met de grote afbeelding maar dat kwam door mijn aangepaste bestandnamen. Ik heb de function "big" kunnen aanpassen.

Ik had dit helaas nooit zelf kunnen bedenken. Ik snap de logica van programmeren (nog uit de tijd van Basic, Pascal en AutoLisp) maar kan de syntax logica van JavaScript gewoon niet volgen. Als je nog een goede basiscurcus weet, ik houd me aanbevolen!

Nogmaals bedankt.

Groet, Zand


PS. Nog één vraagje. Als ik nu de thumbnails "leeg" wil laten beginnen. Dus 1 niet als default. Ik heb <img name="big" src="gallery1_start.gif"> aangepast en dat werkt maar de function "show" gaat mis, "mem"=0 werkt niet. Ik maak natuurlijk een denkfout, maar heb je nog een tippie?

 

[Egel]

Hallo Zand,

Graag gedaan!

Ik had een kleine b gebruikt ipv B, dat was het misschien. Offline (windows) maakt dat niet uit maar online weer wel. (unix / linux).

Javascript lijkt nog het meest op pascal, maar er zijn idd lastige syntaxverschillen.

Een goede cursus is Cursusweb : Cursus Javascript. Die heeft ook interactieve voorbeelden, zoals deze, waarbij je links in een venster het script kunt aanpassen en rechts het resultaat ziet.

Deze naslag is erg goed, maar wel compact. Meer voor na de bovenstaande cursus.

mem = 0; kan prima maar dan moet de functie big() in eerste instantie niet proberen om van img0 (die niet bestaat) de .src te veranderen. Dat lukt met if (mem != 0) (ongelijk aan):

<script type="text/javascript">
 var mem = 0;
 function show(nr,s) {
  if (nr != mem) document.images['img' + nr].src = 'menu_' + nr + (s ? 'A' : '') + '.gif';
  };
 function big(nr) {
  if (mem == nr) return;
  if (mem != 0) document.images['img' + mem].src = 'menu_' + mem + '.gif';
  document.images['big'].src = nr + 'B.jpg';
  mem = nr;
  };
</script>


<a href="JavaScript:big(1)" onmouseover="show(1,true)" onmouseout="show(1,false)"><img border="0" src="menu_1.gif" name="img1" width="200" height="50"></a>
<a href="JavaScript:big(2)" onmouseover="show(2,true)" onmouseout="show(2,false)"><img border="0" src="menu_2.gif" name="img2" width="200" height="50"></a>
<a href="JavaScript:big(3)" onmouseover="show(3,true)" onmouseout="show(3,false)"><img border="0" src="menu_3.gif" name="img3" width="200" height="50"></a>
<a href="JavaScript:big(4)" onmouseover="show(4,true)" onmouseout="show(4,false)"><img border="0" src="menu_4.gif" name="img4" width="200" height="50"></a>
<br>
<img name="big" src="">
<br>
<a href="JavaScript:big(5)" onmouseover="show(5,true)" onmouseout="show(5,false)"><img border="0" src="menu_5.gif" name="img5" width="200" height="50"></a>
<a href="JavaScript:big(6)" onmouseover="show(6,true)" onmouseout="show(6,false)"><img border="0" src="menu_6.gif" name="img6" width="200" height="50"></a>
<a href="JavaScript:big(7)" onmouseover="show(7,true)" onmouseout="show(7,false)"><img border="0" src="menu_7.gif" name="img7" width="200" height="50"></a>
<a href="JavaScript:big(8)" onmouseover="show(8,true)" onmouseout="show(8,false)"><img border="0" src="menu_8.gif" name="img8" width="200" height="50"></a>

Vr.Gr. Egel

 

[Zand01]

Fantastisch!

Hallo Egel,

Nogmaals bedankt! Werkt weer helemaal zoals ik bedoel.

Jouw antwoorden heb ik wat aan. Heb op diverse plekken de vraag achter gelaten maar altijd vage antwoorden. Jouw antwoord werkt en is bovendien leerzaam!

Ontzettend bedankt voor de moeite!

Prettig weekeinde.

Groet, Zand

 

[Egel]

Hallo Zand,

Dit is idd het goede forum voor javascript vragen.

Ik heb nog een klein foutje in het laatste script verbeterd:
if (mem == nr) return;
als eerste regel in de functie big() zorgt ervoor dat de functie wordt afgebroken als er een tweede maal op hetzelfde knopje wordt geklikt. Anders zou het knopje namelijk weer uitgaan.


Jij ook een prettig weekend! Egel.

P.s. zet je nog even de vraag op 'opgelost'? Dat kan rechtsonder bij 'status van de vraag'.

 

[Zand01]

Verhip

Hallo Egel,

Was me nog geen eens opgevallen, maar inderdaad. Superservice...

Groet, Zand



PS. Opgelost aangeklit