Hallo, ik ben nieuw op dit forum, ik kan geen java schrijven maar wel kleine aanpassingen maken om het zo te krijgen dat het werkt voor mij.
Ik heb een vraag over een script dat ik heb geïmplementeerd.
Onderaan deze pagina kan je het vinden:
http://www.mooke.nl/test
Het gaat dus om het onderste gedeelte. Om de 3 seconden wordt er een nieuwe afbeelding geladen. Maar hij start dus ook pas na 3 seconden. Ik wil graag dat het meteen begint zoals bij deze site http://www.webla.nl
Voor zover ik weet heb ik het script helemaal overgenomen, maar toch werkt het daar wel en bij mij niet...
Hoop dat ik een beetje duidelijk ben en iemand mij kan helpen hiermee.
Dit is het script:
<style>
#headerBlock {
width:1200px;
height:272px;
position:relative;
}
#headerBlock a {
display:block;
width:352px;
height:117px;
position:absolute;
top: 272px;
}
#eerste {
left:0px;
background-image: url('/dynamic/media/102/images/tabs/tab_eerste.jpg');
}
#tweede {
left:352px;
background-image: url('/dynamic/media/102/images/tabs/tab_tweede.jpg');
}
#derde {
left:595px;
background-image: url('/dynamic/media/102/images/tabs/tab_derde.jpg');
}
#vierde {
left:848px;
background-image: url('/dynamic/media/102/images/tabs/tab_vierde.jpg');
}
#headerBlockImage {
width:1200px;
height:272px;
position:absolute;
top:0px;
left:0px;
background-image: url('/dynamic/media/102/images/tabs/eerste.jpg');
</style>
<script>
var headerBlockTimer;
function switchHeaderImage(headerBlockButton) {
window.clearTimeout(headerBlockTimer);
var headerBlockButtons = document.getElementsByClassName('headerBlockButton');
for (var i=0; i<headerBlockButtons.length; i++) {
headerBlockButtons.style.backgroundImage = "";
headerBlockButtons.className = "headerBlockButton";
}
headerBlockButton = headerBlockButton.target || headerBlockButton.srcElement;
headerBlockButton.style.backgroundImage = "url('/dynamic/media/102/images/tabs/" + headerBlockButton.id + "Background.jpg')";
headerBlockButton.className += ' active';
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/" + headerBlockButton.id + ".jpg')";
}
function autoSwitchHeaderImage() {
window.clearTimeout(headerBlockTimer);
var activeImage = document.getElementsByClassName('active')[0];
activeImage.className = "headerBlockButton";
activeImage.style.backgroundImage = "";
if(activeImage.id == "vierde") {
document.getElementById('eerste').className += " active";
document.getElementById('eerste').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_eerste_over.jpg')";
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/eerste.jpg')";
} else if(activeImage.id == "eerste") {
document.getElementById('tweede').className += " active";
document.getElementById('tweede').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_tweede_over.jpg')";
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tweede.jpg')";
} else if(activeImage.id == "tweede") {
document.getElementById('derde').className += " active";
document.getElementById('derde').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_derde_over.jpg')";
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/derde.jpg')";
} else if(activeImage.id == "derde") {
document.getElementById('vierde').className += " active";
document.getElementById('vierde').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_vierde_over.jpg')";
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/vierde.jpg')";
}
switchTimer();
}
function switchTimer() {
headerBlockTimer = window.setTimeout(autoSwitchHeaderImage,3000);
}
function startHeaderBlock() {
var headerBlockButtons = document.getElementsByClassName('headerBlockButton');
for (var i=0; i<headerBlockButtons.length; i++) {
headerBlockButtons.onmouseover = switchHeaderImage;
headerBlockButtons.onmouseout = switchTimer;
}
document.getElementById('vierde').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_vierde.jpg')";
document.getElementById('vierde').className += ' active';
switchTimer();
}
window.onload = startHeaderBlock;
</script>
<div id="headerBlock">
<a class="headerBlockButton" id="eerste" href="#"></a>
<a class="headerBlockButton" id="tweede" href="#"></a>
<a class="headerBlockButton" id="derde" href="#"></a>
<a class="headerBlockButton" id="vierde" href="#"></a>
<div id="headerBlockImage"></div>
</div>
Ik heb een vraag over een script dat ik heb geïmplementeerd.
Onderaan deze pagina kan je het vinden:
http://www.mooke.nl/test
Het gaat dus om het onderste gedeelte. Om de 3 seconden wordt er een nieuwe afbeelding geladen. Maar hij start dus ook pas na 3 seconden. Ik wil graag dat het meteen begint zoals bij deze site http://www.webla.nl
Voor zover ik weet heb ik het script helemaal overgenomen, maar toch werkt het daar wel en bij mij niet...
Hoop dat ik een beetje duidelijk ben en iemand mij kan helpen hiermee.
Dit is het script:
<style>
#headerBlock {
width:1200px;
height:272px;
position:relative;
}
#headerBlock a {
display:block;
width:352px;
height:117px;
position:absolute;
top: 272px;
}
#eerste {
left:0px;
background-image: url('/dynamic/media/102/images/tabs/tab_eerste.jpg');
}
#tweede {
left:352px;
background-image: url('/dynamic/media/102/images/tabs/tab_tweede.jpg');
}
#derde {
left:595px;
background-image: url('/dynamic/media/102/images/tabs/tab_derde.jpg');
}
#vierde {
left:848px;
background-image: url('/dynamic/media/102/images/tabs/tab_vierde.jpg');
}
#headerBlockImage {
width:1200px;
height:272px;
position:absolute;
top:0px;
left:0px;
background-image: url('/dynamic/media/102/images/tabs/eerste.jpg');
</style>
<script>
var headerBlockTimer;
function switchHeaderImage(headerBlockButton) {
window.clearTimeout(headerBlockTimer);
var headerBlockButtons = document.getElementsByClassName('headerBlockButton');
for (var i=0; i<headerBlockButtons.length; i++) {
headerBlockButtons.style.backgroundImage = "";
headerBlockButtons.className = "headerBlockButton";
}
headerBlockButton = headerBlockButton.target || headerBlockButton.srcElement;
headerBlockButton.style.backgroundImage = "url('/dynamic/media/102/images/tabs/" + headerBlockButton.id + "Background.jpg')";
headerBlockButton.className += ' active';
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/" + headerBlockButton.id + ".jpg')";
}
function autoSwitchHeaderImage() {
window.clearTimeout(headerBlockTimer);
var activeImage = document.getElementsByClassName('active')[0];
activeImage.className = "headerBlockButton";
activeImage.style.backgroundImage = "";
if(activeImage.id == "vierde") {
document.getElementById('eerste').className += " active";
document.getElementById('eerste').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_eerste_over.jpg')";
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/eerste.jpg')";
} else if(activeImage.id == "eerste") {
document.getElementById('tweede').className += " active";
document.getElementById('tweede').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_tweede_over.jpg')";
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tweede.jpg')";
} else if(activeImage.id == "tweede") {
document.getElementById('derde').className += " active";
document.getElementById('derde').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_derde_over.jpg')";
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/derde.jpg')";
} else if(activeImage.id == "derde") {
document.getElementById('vierde').className += " active";
document.getElementById('vierde').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_vierde_over.jpg')";
document.getElementById('headerBlockImage').style.backgroundImage = "url('/dynamic/media/102/images/tabs/vierde.jpg')";
}
switchTimer();
}
function switchTimer() {
headerBlockTimer = window.setTimeout(autoSwitchHeaderImage,3000);
}
function startHeaderBlock() {
var headerBlockButtons = document.getElementsByClassName('headerBlockButton');
for (var i=0; i<headerBlockButtons.length; i++) {
headerBlockButtons.onmouseover = switchHeaderImage;
headerBlockButtons.onmouseout = switchTimer;
}
document.getElementById('vierde').style.backgroundImage = "url('/dynamic/media/102/images/tabs/tab_vierde.jpg')";
document.getElementById('vierde').className += ' active';
switchTimer();
}
window.onload = startHeaderBlock;
</script>
<div id="headerBlock">
<a class="headerBlockButton" id="eerste" href="#"></a>
<a class="headerBlockButton" id="tweede" href="#"></a>
<a class="headerBlockButton" id="derde" href="#"></a>
<a class="headerBlockButton" id="vierde" href="#"></a>
<div id="headerBlockImage"></div>
</div>