thumbnails5

JavaScripts knippen en plakken

Op deze website vind je javascripts die je door eenvoudig knippen en plakken aan jouw site kunt toevoegen.

Home CSS DHTML Forum E-mail Sitezoeker Links

THUMBNAILS 5

Wegens de afmetingen staat het voorbeeld op een andere pagina.

1. Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :

<style type="text/css">
#container {
top:0px;
left:12px;
width:170px;
height:100%;
overflow:hidden;
position: absolute;
}

#box {
position:absolute;
left:115%;
}

#move1{position: absolute; height:1000px; cursor: pointer;}
#move2{position: absolute; height:1000px; cursor: pointer;}
</style>

<style type="text/css">
* html body { overflow:hidden; background-color:#FFCC33; }

* html img { border:none; }

#venster {
position:absolute;
top:100px;
left:250px;
height:400px;
border: solid thin black;
}
</style>

<style type="text/css"> 
#mijnTekst {font-weight:bold;} 
</style>

<script type="text/javascript">
function wijzigTekst(inhoud) {document.getElementById('mijnTekst').innerHTML = inhoud; } 
</script>

<script type="text/javascript">
var foto=new Array()
	
foto[0] = new Image();foto[0].src = "../pics/foto1.jpg"
foto[1] = new Image();foto[1].src = "../pics/foto2.jpg"
foto[2] = new Image();foto[2].src = "../pics/foto3.jpg"
foto[3] = new Image();foto[3].src = "../pics/foto4.jpg"
foto[4] = new Image();foto[4].src = "../pics/foto5.jpg"

function wissel(teller) {
document.getElementById('venster').src=foto[teller].src;
boven = window.scrollY?window.scrollY:document.body.scrollTop;
document.getElementById('venster').style.top= (boven + 100)}
</script>

<script type="text/javascript">
T = 1
var bericht=new Array()

bericht[1]='<a href="javascript:void(0)"><img src="../pics/foto1.jpg" title="1" onmouseover="wissel(0);wijzigTekst(\'Deze tekst hoort bij foto 1\');" onmouseout="wissel(0);wijzigTekst(\'\');" style="height: 115px"></a>'
bericht[2]='<a href="javascript:void(0)"><img src="../pics/foto2.jpg" title="2" onmouseover="wissel(1);wijzigTekst(\'Deze tekst hoort bij foto 2\');" onmouseout="wissel(0);wijzigTekst(\'\');" style="height: 115px"></a>'
bericht[3]='<a href="javascript:void(0)"><img src="../pics/foto3.jpg" title="3" onmouseover="wissel(2);wijzigTekst(\'Deze tekst hoort bij foto 3\');" onmouseout="wissel(0);wijzigTekst(\'\');" style="height: 115px">'
bericht[4]='<a href="javascript:void(0)"><img src="../pics/foto4.jpg" title="4" onmouseover="wissel(3);wijzigTekst(\'Deze tekst hoort bij foto 4\');" onmouseout="wissel(0);wijzigTekst(\'\');" style="height: 115px">'
bericht[5]='<a href="javascript:void(0)"><img src="../pics/foto5.jpg" title="5" onmouseover="wissel(4);wijzigTekst(\'Deze tekst hoort bij foto 5\');" onmouseout="wissel(0);wijzigTekst(\'\');" style="height: 115px">'

bericht=bericht.join("");
document.write('<span id="box">'+bericht+'<\/span>')

function getProp() {
ys = document.getElementById('box').offsetHeight
ypos = 0
yypos = ys
timerId=setInterval("scroll()",5) }

function scroll() {
document.getElementById('move1').style.top = ypos
ypos > -ys? ypos = ypos-T:ypos = ys
document.getElementById('move2').style.top = yypos
yypos > -ys? yypos = yypos-T:yypos = ys}

function stop() {T = 0}
function start() {T = 1}
</script>

2. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina : 3. Plaats binnenin de BODY-tag: <body onload="getProp()">

OPMERKING:
Gebruik van hoge resolutie foto's vertraagt bij minder rekenkrachtige computers de scrollsnelheid, waardoor het in dit geval aangewezen is telkens twee foto's te gebruiken: een lage resolutie versie van de foto voor de scroller en de hoge resolutie versie voor de grote afbeelding. Dit kan eenvoudig aangepast worden.

Vervang daarvoor dit gedeelte van het script:


<script type="text/javascript">
var foto=new Array()

foto[0] = new Image();foto[0].src = "../pics/foto1.jpg"
foto[1] = new Image();foto[1].src = "../pics/foto2.jpg"
foto[2] = new Image();foto[2].src = "../pics/foto3.jpg"
foto[3] = new Image();foto[3].src = "../pics/foto4.jpg"
foto[4] = new Image();foto[4].src = "../pics/foto5.jpg"

function wissel(teller) {
document.getElementById('venster').src=foto[teller].src;

door:


<script type="text/javascript">
var foto=new Array()

foto[0] = new Image();foto[0].src = "klein0.jpg"
foto[1] = new Image();foto[1].src = "klein1.jpg"
foto[2] = new Image();foto[2].src = "klein2.jpg"
foto[3] = new Image();foto[3].src = "klein3.jpg"
foto[4] = new Image();foto[4].src = "klein4.jpg"


var foto2=new Array()
foto2[0] = new Image();foto2[0].src = "groot0.jpg"
foto2[1] = new Image();foto2[1].src = "groot1.jpg"
foto2[2] = new Image();foto2[2].src = "groot2.jpg"
foto2[3] = new Image();foto2[3].src = "groot3.jpg"
foto2[4] = new Image();foto2[4].src = "groot4.jpg"

function wissel(teller) {
document.getElementById('venster').src=foto2[teller].src;

17.12.2009: Opmerking toegevoegd i.v.m. hoge resolutie foto's.
Deze combinatie van twee scripts van Mongrove en een script van javascript werd gemaakt op vraag van een bezoeker.

Copyright: Het internet is van iedereen, de volledige inhoud van deze site kan door iedereen vrij gebruikt worden.