[JS] simpele vraag

[SuperPotato]

-

[ Voor 99% gewijzigd door SuperPotato op 18-03-2017 11:27 ]

[crisp]

geef je image elke keer een andere naam en stuur die ook mee als parameter naar de functie...

[SuperPotato]

-

[ Voor 100% gewijzigd door SuperPotato op 18-03-2017 13:41 ]

[Verwijderd]

code:

function rollOver(imgName, n) {
    document.images[imgName].src = buttonImg[n].src
    return true;
}

<a [...] onmouseover="rollOver('button1',1)" onmouseout="rollOver('button1',0)">
<a [...] onmouseover="rollOver('button2',1)" onmouseout="rollOver('button2',0)">
<a [...] onmouseover="rollOver('button3',1)" onmouseout="rollOver('button3',0)">

Lijkt me vrij voor de hand liggen...

edit:
waarbij je de eentjes en de nulletjes natuurlijk ook nog kunt veranderen.

[SuperPotato]

Never mind.. ff checken dan

[SuperPotato]

-

[ Voor 99% gewijzigd door SuperPotato op 18-03-2017 11:27 ]

[crisp]

combineren; allereest beginnen we met de preloads:

code:

<script language="JavaScript"><!--
//init array and preloading the images
buttonImg = new Array()
buttonImg[0] = new Image()
buttonImg[1] = new Image()
buttonImg[2] = new Image()
buttonImg[3] = new Image()
buttonImg[0].src = "images/gaming1.jpg"
buttonImg[1].src = "images/gaming2.gif"
buttonImg[2].src = "images/study1.jpg"
buttonImg[3].src = "images/study2.gif"

dan pakken we de code van Blues:

code:

//function changing the button-image
function rollOver(imgName, n) {
    document.images[imgName].src = buttonImg[n].src
    return true;
}
// -->
</script>

vervolgens maak je de linkjes zo aan:

code:

<a href="http://www25.brinkster.com/willemser/gaming.htm" onmouseover="rollOver('gaming', 1)" onmouseout="rollOver('gaming', 0)">[img]"images/gaming1.jpg"[/img] </a>
<a href="http://www25.brinkster.com/willemser/study.htm" onmouseover="rollOver('study', 3)" onmouseout="rollOver('study', 2)">[img]"images/study1.jpg"[/img] </a>

en zo makkelijk is dat nou