Ik heb een script voor een banner slideshow. Het werkt perfect. Echter wil ik dat op het moment dat je op een plaatje drukt dat je doorgelinkt wordt naar de site van het desbetreffende plaatje. Hoe zet ik een link onder de afbeelding? Onder elk plaatje moet een andere url. De urls heb ik ingevoerd bij "var url = new Array(......) en verderop heb ik geplaatst "newimage.setAttribute('url',alttext);". Waarom werken de links niet? Er verschijnt helemaal niets. Moet ik hier met een window.open werken?
Het script:
Het script:
HTML:
<head>
<style type="text/css">
#slideshow {
position:relative;
height:75px;
width:400px;
}
.imgfade {
position:absolute;
top:0px;
left:0px;
border:0;
height:75px;
width:400px
}
</style>
<script language="javascript1.2" type="text/javascript">
var images = new Array('/img/dirk.jpg','/img/cms.jpg','/img/loyens.jpg','/img/nauta.jpg','/img/adverteren.jpg');
var url = new Array('http:///www.dirkzwager.nl','http://www.cms-dsb.com','http://www.loyensloeff.com/','http://www.nautadutilh.com/');
var currentIndex = 0;
var nextIndex = 1;
var timeOutDelay = 4000;
var currentOpacity = new Array();
var FADE_STEP = 2;
var FADE_INTERVAL = 20;
var pause = false;
var browsertype;
var COUNTER;
function startSlideshow() {
if (!document.getElementsByTagName || !document.getElementById || !document.getElementById('slideshow')) {
return false;
}
currentOpacity[0]=99;
for(i=1; i<images.length; i++) {
currentOpacity[i]=0;
}
var slideshow = document.getElementById('slideshow');
if (window.opera) {
browsertype = 'opera';
}
else if (document.all) {
browsertype = 'ie';
}
else {
browsertype = 'moz';
}
for(i=0; i<images.length; i++) {
var newimage = document.createElement('IMG');
newimage.setAttribute('id','image' + i);
newimage.setAttribute('src',images[i]);
newimage.setAttribute('url',alttext[i]);
newimage.className = "imgfade";
slideshow.appendChild(newimage);
if (browsertype != 'opera') {
setOpacity(newimage, 0);
} else {
newimage.style.visibility = 'hidden';
}
}
if (browsertype != 'opera') {
setOpacity(document.getElementById('image'+currentIndex), 100);
} else {
document.getElementById('image'+currentIndex).style.visibility = 'visible'
}
COUNTER = setTimeout("swapImage()",timeOutDelay);
}
function swapImage() {
COUNTER = 0;
if (browsertype != 'opera') {
doFade = setInterval("crossFade()",FADE_INTERVAL);
} else {
document.getElementById('image'+currentIndex).style.visibility = 'hidden';
document.getElementById('image'+nextIndex).style.visibility = 'visible';
currentIndex = nextIndex;
nextIndex++;
if(nextIndex == images.length) {
nextIndex=0;
}
}
COUNTER = setTimeout("swapImage()",timeOutDelay);
}
function crossFade() {
currentOpacity[currentIndex]-=FADE_STEP;
currentOpacity[nextIndex] += FADE_STEP;
setOpacity(document.getElementById('image'+currentIndex), currentOpacity[currentIndex]);
setOpacity(document.getElementById('image'+nextIndex), currentOpacity[nextIndex]);
if(currentOpacity[nextIndex]/100>=.98) {
currentIndex = nextIndex;
nextIndex++;
window.clearInterval(doFade);
clearInterval(doFade);
if(nextIndex == images.length) {
nextIndex=0;
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
obj.style.filter = "alpha(opacity:"+opacity+")";
obj.style.KHTMLOpacity = opacity/100;
obj.style.MozOpacity = opacity/100;
obj.style.opacity = opacity/100;
}
window.onload=(startSlideshow);
</script>
</head>
<body>
<div id="slideshow" style="height:75px; width:400px"><img src="/img/white.jpg" alt="" name="crossfade" id="crossfade" /></div>
</body>
)
