[js] OnMouseOver en Onclick wat moet kijken naar pic name

[Verwijderd]

Ik ben op dit moment bezig een javascript-menu aan het maken. Het doel is als volgt: Ik heb een php document waar voor elke button een array staat waar je van alles in kan zetten, breedte, hoogte, naam, border, bordercolor etc. Door middel van de waarden uit die araays genereerd hij de hele tabel voor het menu inclusief script. Nu wil ik eigenlijk dat de OnMouseOver- en OnMouseOut- en OnClick- functie kijkt naar de naam van het plaatje ipv gebruik te maken van document.images. Want document.images geeft problemen als je boven het menu een ander plaatje zet... (geloof me maar )

Nu heb ik de volgende code bedacht (inclusief een link) En ja de Onclick zit er nog niet in:

code:

<script language="JavaScript">
<!--

pictures = new Array(6);
pictures[1] = "overons";
pictures[2] = "detachering";
pictures[3] = "diensten";
pictures[4] = "vacatures";
pictures[5] = "soliciteren";
pictures[6] = "interesse";

var Afbeelding_Nr = 0
function Animation(Indexje, picNaam){
if (document.images) {
         if (Afbeelding_Nr != picNaam)
        document.pictures[Indexje].src = "grafix/" + picNaam + ".gif";
}}

//-->
</script>

<a href="#"
onMouseOver = "Animation(0, 'overons2')" 
onMouseOut = "Animation(0, 'overons1')">
[img]"grafix/overons1.gif"[/img]
</a>

Het grappige is nu dat dit dus niet werkt...

Wat doe ik fout en hoe kan ik dat verbeteren (ben in js niet echt bekend...)

DJ

[drm]

Sooterd:
ipv gebruik te maken van document.images. Want document.images geeft problemen als je boven het menu een ander plaatje zet... (geloof me maar )

Nee ik geloof je niet. Je moet namelijk, wanneer je gebruik maakt van de document.images array ook gewoon gebruik maken van namen:

code:

( sjaakdebever = new Image () ).src = '../gfx/sjaakdebever.gif';
document.images [ 'overons' ].src = sjaakdebever.src;

geloof mij maar

Daarnaast heb je een array gedefinieerd van 6 elementen, en stopt er vervolgens tot aan het 7^e element iets in ... 't is gebruikelijk om bij 0 te beginnen (1^e element, dan 1 (2^e element) .... 5 (6^e element)

verder is het ook wel handig om zo te doen:

JavaScript:

arr = [
   'eerste element',
   'tweede element'
];

hth

[Verwijderd]

Ik heb een werkend script draaien met de volgende JS-code:

code:

<SCRIPT LANGUAGE="JavaScript">
<!--
var Aantal  = 7
var Afbeelding_Nr = 0
function Anim(Plaatje, Bestandsnaam) {
if (document.images) {
         if (Afbeelding_Nr != Plaatje)
             document.images[Plaatje].src = "imgnav/" + Bestandsnaam + ".gif" ;
         }
     }


function Actief(Plaatje, Actieve_Afbeelding) {
if (document.images) {
         if (Afbeelding_Nr != Plaatje) {
             document.images[Plaatje].src ="imgnav/" + Actieve_Afbeelding + ".gif";

             for (var i = 0; i < Aantal; i++) {
                  if (i == Plaatje ) {
                      null; continue 
                      }
                      document.images[i++].src = "imgnav/" + "nav_" + i-- + ".gif";
                      }
                  }
                  Afbeelding_Nr = Plaatje
             }
        }

//-->
</SCRIPT>

Dit script werkt opzich goed als je het maar in een apart frame stopt (of iframe) en geen andere plaatjes boven het menu zet. Maar ik wil dat dit menu gewoon overal ingeplakt kan worden. En volgens mij kijkt dit script niet naar de naam, maar pakt gewoon (als je zes buttons hebt) in zijn array van 0 - 5.
Dus ik heb denk ik gelijk.... tenzij je me echt kan overtuigen

[drm]

Sooterd:
Maar ik wil dat dit menu gewoon overal ingeplakt kan worden.

En volgens mij kijkt dit script niet naar de naam, maar pakt gewoon (als je zes buttons hebt) in zijn array van 0 - 5.

Lees nou eens goed wat je hier zegt. En wat ik hier zeg:

drm:
Je moet namelijk, wanneer je gebruik maakt van de document.images array ook gewoon gebruik maken van namen:

Dat zeg ik natuurlijk niet omdat ik dat leuk vindt klinken, he.

Dus ik heb denk ik gelijk....

dat denk ik dus niet. Ik weet wel dat wanneer je de index van de document.images array aanspreekt met nummertjes, dat 't dan mis gaat als je er iets boven zet, maar daarom moet je (again) dus ook gebruik maken van named indices en niet van numbered.

[Verwijderd]

Ik begreep je wel, maar bedoelde dat het script wat ik had alleen gebruik maakte van de index... (OK jij gelijk )

Ik vraag dus (denk ik) op deze manier de naam op ipv de index.

code:

<script language="JavaScript">
<!--

images = new Array(2);
images[0] = "overons";
images[1] = "detachering";


var Afbeelding_Nr = 0
function Animation(Indexje, picNaam, pic){
if (document.images ['picNaam']) {
         if (Afbeelding_Nr != Indexje)
        document.images[ 'picNaam' ].src = "grafix/" + pic + ".gif";
}}
//-->
</script>

<a href="#"
onMouseOver = "Animation(0, 'overons', 'overons2')" 
onMouseOut = "Animation(0, 'overons', 'overons1')">
[img]"grafix/overons1.gif"[/img]
</a><br>
<a href="#"
onMouseOver = "Animation(1, 'detachering', 'detachering2')" 
onMouseOut = "Animation(1, 'detachering', 'detachering1')">
[img]"grafix/detachering1.gif"[/img]
</a><br>

dit werkt dus nog niet... ik bergijp ook nog niet helemaal wat je met die code bedoelt in je eerste post op dit onderwerp. Ik heb het dus op deze manier geimplementeerd, maar waarschijnlijk niet op de juiste manier...

[drm]

Sooterd: (OK jij gelijk )

Kijk, zo komen we ergens

Ik vraag dus (denk ik) op deze manier de naam op ipv de index.

code:

<script language="JavaScript">
[snip]

dit werkt dus nog niet... ik bergijp ook nog niet helemaal wat je met die code bedoelt in je eerste post op dit onderwerp. Ik heb het dus op deze manier geimplementeerd, maar waarschijnlijk niet op de juiste manier...

Je vergeet ten eerste om je images te preloaden. Op deze manier moeten mensen met een wat langzamere verbinding op mouseovers wachten. Je moet dus niet direct naar de source verwijzen, maar naar de src van een gepreload image object:

code:

function preload () {
   t = new Image;
   t.src='gfx/sjaak.gif';
}

function mouseover ( img ) {
   document.images [ img ].src = t.src;
}

// ...
<body onload="preload"> ...

Verder moet je de index natuurlijk niet quoten als het een variabele is:

code:

var s = 'blaat';

t = document.images [ 's' ]; // <-- zoek naar een image met naam 's'
t = document.images [ s ];  // <-- zoek naar een image met naam 'blaat'

speel daar een beetje mee. suc6

hth

[Verwijderd]

Ik ben er al ff mee aan het spelen. Lukt nog niet helemaal ('preload' is niet gedefinieerd zegtie ???) Maar goed, daar kom ik hopelijk wel uit...

Als het lukt of niet lukt ga ik weer brullen..

Alvast bedankt

[drm]

hmja, ik zie alvast dat ik een typo heb gemaakt, 't moet wel een functioncall zijn:
..onload="preload ()">

_{en je moet de preload functie wel schrijven, voordat je 'm aanroept natuurlijk}

[Verwijderd]

Dat begrijp ja!

Heb het script nu werkend voor een button, maar wil nu een twee dimensionale array maken in JS Is dat mogelijk?

edit:
Ja dit is mogelijk... heb het al gevonden...

[Verwijderd]

Het is gelukt! Zelfs het onclick gedeelte....

Hier de code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>JavaScript Menu</title>
    
<script language="JavaScript">

var button_subject = new Array(6);
    button_subject [0] = 'overons';
    button_subject [1] = 'detachering';
    button_subject [2] = 'diensten';
    button_subject [3] = 'vacatures';
    button_subject [4] = 'soliciteren';
    button_subject [5] = 'interesse';
    
var button = new Array(6);
    button ['overons'] = new Array
    button ['overons'][0] = 'grafix/overons1.gif';
    button ['overons'][1] = 'grafix/overons2.gif';
    button ['overons'][2] = 'overeens';

    button ['detachering'] = new Array
    button ['detachering'][0] = 'grafix/detachering1.gif';
    button ['detachering'][1] = 'grafix/detachering2.gif';

    button ['diensten'] = new Array
    button ['diensten'][0] = 'grafix/diensten1.gif';
    button ['diensten'][1] = 'grafix/diensten2.gif';
    
    button ['vacatures'] = new Array
    button ['vacatures'][0] = 'grafix/vacatures1.gif';
    button ['vacatures'][1] = 'grafix/vacatures2.gif';
    
    button ['soliciteren'] = new Array
    button ['soliciteren'][0] = 'grafix/soliciteren1.gif';
    button ['soliciteren'][1] = 'grafix/soliciteren2.gif';
    
    button ['interesse'] = new Array
    button ['interesse'][0] = 'grafix/interesse1.gif';
    button ['interesse'][1] = 'grafix/interesse2.gif';  
    
var actief_nr = 0;
var aantalpic = 6;
    
function mouseover ( img, plaatje_nr ) {
   document.images [ img ].src = button[img][1];
}

function mouseout ( img, plaatje_nr ) {
   if (actief_nr != plaatje_nr){
   document.images [ img ].src = button[img][0];
   }
}

function mouseclick ( img, plaatje_nr ) {
        if (actief_nr != plaatje_nr){
             document.images [ img ].src = button[img][1];
             for (var i = 0; i < aantalpic; i++) {
                  if (i != plaatje_nr ) {
                        img = button_subject[i];
                      document.images [ img ].src = button[img][0];
                  }
             }
                  actief_nr = plaatje_nr;
        }
}
</script>

</head>

<body>

<a href="#" onfocus="this.blur();" onMouseOver="mouseover('overons', 0)" onMouseOut="mouseout('overons', 0)" onclick="mouseclick('overons', 0)">
[img]"grafix/overons2.gif"[/img]
</a><br>
<a href="#" onfocus="this.blur();" onMouseOver = "mouseover('detachering', 1)" onMouseOut = "mouseout('detachering', 1)" onclick="mouseclick('detachering', 1)">
[img]"grafix/detachering1.gif"[/img]
</a><br>
<a href="#" onfocus="this.blur();" onMouseOver = "mouseover('diensten', 2)" onMouseOut = "mouseout('diensten', 2)" onclick="mouseclick('diensten', 2)">
[img]"grafix/diensten1.gif"[/img]
</a><br>
<a href="#" onfocus="this.blur();" onMouseOver = "mouseover('vacatures', 3)" onMouseOut = "mouseout('vacatures', 3)" onclick="mouseclick('vacatures', 3)">
[img]"grafix/vacatures1.gif"[/img]
</a><br>
<a href="#" onfocus="this.blur();" onMouseOver = "mouseover('soliciteren', 4)" onMouseOut = "mouseout('soliciteren', 4)" onclick="mouseclick('soliciteren', 4)">
[img]"grafix/soliciteren1.gif"[/img]
</a><br>
<a href="#" onfocus="this.blur();" onMouseOver = "mouseover('interesse', 5)" onMouseOut = "mouseout('interesse', 5)" onclick="mouseclick('interesse', 5)">
[img]"grafix/interesse1.gif"[/img]
</a><br>

</body>
</html>

edit:
Heb het vorige script vervangen door een werkend geheel...

[ Voor 0% gewijzigd door Verwijderd op 17-09-2002 14:45 . Reden: geduld is een schone zaak!!! ]

[Verwijderd]

Het werkt allemaal!!! Voor de oplossing zie bovenstaande script.

Als iemand zegt dat dat korter of beter kan ben ik benieuwd hoe je dat kan aanpakken

[drm]

* drm *pats* Sooterd on his shoulder
well done

JavaScript:

var button_subject = new Array(6);
    button_subject [0] = 'overons';
    button_subject [1] = 'detachering';
    button_subject [2] = 'diensten';
    button_subject [3] = 'vacatures';
    button_subject [4] = 'soliciteren';
    button_subject [5] = 'interesse'

zou je evt. nog zo kunnen doen:

code:

var button_subject = [ 
   'overons', 
   'detachering', 
   'diensten', 
   'vacatures', 
   'solliciteren',
   'interesse' 
];

zo ook met de 2^e dimensie van de buttons array

[Verwijderd]

Ben zelf ook best tevreden!!!

Ik laat die array's zo staan denk ik, het geeft wel wat overzicht vind ik!

Bedankt voor alle tips!!!

[Piet Marisael]

Ik ben ook even aan het bekijken geweest met deze script, maar mij is opgevallen dat bij een van de links na de mouse over het tweede plaatje blijft staan en niet terug gaat naar het eerste.

Is dat ook nog op te lossen?

Eerlijk gezegd ben ik het een beetje aan het wijzigen geweest.
Wat is er bij mij fout gegaan?

code:

<script language="JavaScript">

var button_subject = new Array(6);
    button_subject [0] = 'home';
    button_subject [1] = 'bedrijfsprofiel';
    button_subject [2] = 'referenties';
    button_subject [3] = 'vacatures';
    button_subject [4] = 'kwaliteit';
    button_subject [5] = 'interesse';
    
var button = new Array(6);
    button ['home'] = new Array
    button ['home'][0] = 'Image1.gif';
    button ['home'][1] = 'Image2.gif';
    
    button ['bedrijfsprofiel'] = new Array
    button ['bedrijfsprofiel'][0] = 'Image1.gif';
    button ['bedrijfsprofiel'][1] = 'Image2.gif';

    button ['referenties'] = new Array
    button ['referenties'][0] = 'Image1.gif';
    button ['referenties'][1] = 'Image2.gif';
    
    button ['vacatures'] = new Array
    button ['vacatures'][0] = 'Image1.gif';
    button ['vacatures'][1] = 'Image2.gif';
    
    button ['kwaliteit'] = new Array
    button ['kwaliteit'][0] = 'Image1.gif';
    button ['kwaliteit'][1] = 'Image2.gif';
    
    button ['interesse'] = new Array
    button ['interesse'][0] = 'Image1.gif';
    button ['interesse'][1] = 'Image2.gif';    
    
var actief_nr = 0;
var aantalpic = 6;
    
function mouseover ( img, plaatje_nr ) {
   document.images [ img ].src = button[img][1];
}

function mouseout ( img, plaatje_nr ) {
   if (actief_nr != plaatje_nr){
   document.images [ img ].src = button[img][0];
   }
}

function mouseclick ( img, plaatje_nr ) {
        if (actief_nr != plaatje_nr){
             document.images [ img ].src = button[img][1];
             for (var i = 0; i < aantalpic; i++) {
                  if (i != plaatje_nr ) {
                          img = button_subject[i];
                      document.images [ img ].src = button[img][0];
                  }
             }
                  actief_nr = plaatje_nr;
        }
}
</script>

</head>

<body background="master03_background.gif">

<a href="home.html" BASE TARGET="main" onfocus="this.blur();" onMouseOver="mouseover('home', 0)" onMouseOut="mouseout('home', 

0)" onclick="mouseclick('home', 0)">
[img]"Image1.gif"[/img]Home
</a><p>
<a href="bedrijfsprofiel.html" BASE TARGET="main" onfocus="this.blur();" onMouseOver = "mouseover('bedrijfsprofiel', 1)" 

onMouseOut = "mouseout('bedrijfsprofiel', 1)" onclick="mouseclick('bedrijfsprofiel', 1)">
[img]"Image1.gif"[/img]Bedrijfsprofiel
</a><p>
<a href="referentie.html" BASE TARGET="main" onfocus="this.blur();" onMouseOver = "mouseover('referenties', 2)" onMouseOut = 

"mouseout('referenties', 2)" onclick="mouseclick('referenties', 2)">
[img]"Image1.gif"[/img]Referenties
</a><p>
<a href="vacaturen.html" BASE TARGET="main" onfocus="this.blur();" onMouseOver = "mouseover('vacatures', 3)" onMouseOut = 

"mouseout('vacatures', 3)" onclick="mouseclick('vacatures', 3)">
[img]"Image1.gif"[/img]Vacatures
</a><p>
<a href="kwaliteitsbeleid.html" BASE TARGET="main" onfocus="this.blur();" onMouseOver = "mouseover('kwaliteit', 4)" 

onMouseOut = "mouseout('kwaliteit', 4)" onclick="mouseclick('kwaliteit', 4)">
[img]"Image1.gif"[/img]Kwaliteitsbeleid
</a><p>
<a href="mailto:emailadres" BASE TARGET="main" onfocus="this.blur();" onMouseOver = "mouseover('interesse', 5)" 

onMouseOut = "mouseout('interesse', 5)" onclick="mouseclick('interesse', 5)">
[img]"Image1.gif"[/img]E-mail
</a><p>

</body>

[ Voor 42% gewijzigd door Piet Marisael op 03-04-2006 15:15 ]

[crisp]

JavaScript:

function mouseout ( img, plaatje_nr ) {
   if (actief_nr != plaatje_nr){
   document.images [ img ].src = button[img][0];
   }
}

Als je over 'Home' gaat welke waarde heeft actief_nr dan en welke waarde plaatje_nr?

overigens kan dit vele malen efficienter; code uit 2002 is meestal ook geen goed voorbeeld

[ Voor 20% gewijzigd door crisp op 03-04-2006 00:18 ]