okay, det her bliver lidt langt, men min hjemmeside virker ikke lige nu, så jeg bliver nødt til at poste koden her (noget jeg har flikket sammen):
<script type="text/javascript">
var divs = 0;
function ScrollDiv(maxW,maxH,scrollXAmount,scrollYAmount,scrollSpeed) {
this.maxW = maxW,this.maxH = maxH,this.scrollXAmount=scrollXAmount,this.scrollYAmount=scrollYAmount,this.scrollSpeed=scrollSpeed;
this.content = "";
this.ID = "scrolldiv"+(divs++);
this.buttonLeft = this.buttonRight = this.buttonTop = this.buttonBottom = "";
this.eventType = "MOUSEDOWN";
}
ScrollDiv.prototype.addContent = function(cnt) {
this.content += cnt;
}
ScrollDiv.prototype.setAllButtonContent = function(bT,bB,bL,bR) {
this.buttonLeft = bL;this.buttonRight = bR;this.buttonTop=bT;this.buttonBottom = bB;
}
ScrollDiv.prototype.setButtonContent = function(button,cont) {
this["button"+button.charAt(0).toUpperCase()+button.substr(1).toLowerCase()] = cont;
}
ScrollDiv.prototype.setEventType = function(evntType) {
if (evntType.toUpperCase() == "MOUSEDOWN" || evntType.toUpperCase() == "MOUSEOVER") {this.eventType = evntType.toUpperCase();}
}
ScrollDiv.prototype.print = function() {
var output = "<div style=\"position:relative\" id=\""+this.ID+"\">";
output += "<div style=\"position:absolute;clip:rect(0px "+this.maxW+"px "+this.maxH+"px 0px)\">"+this.content+"</div>";
if (this.eventType == "MOUSEDOWN") {
output += "<div class=\"scrollUpClass\" style=\"position:absolute;left:0px;top:0px;display:none;\" onmousedown=\"scrollDiv('"+this.ID+"',0,"+(-this.scrollYAmount)+","+this.scrollSpeed+");\" onmouseup=\"stopScroll()\">"+this.buttonTop+"</div>";
output += "<div class=\"scrollDownClass\" style=\"position:absolute;left:0px;top:0px;display:none;\"onmousedown=\"scrollDiv('"+this.ID+"',0,"+this.scrollYAmount+","+this.scrollSpeed+");\" onmouseup=\"stopScroll()\">"+this.buttonBottom+"</div>";
output += "<div class=\"scrollLeftClass\" style=\"position:absolute;left:0px;top:0px;display:none;\"onmousedown=\"scrollDiv('"+this.ID+"',"+(-this.scrollXAmount)+",0,"+this.scrollSpeed+");\" onmouseup=\"stopScroll()\">"+this.buttonLeft+"</div>";
output += "<div class=\"scrollRightClass\" style=\"position:absolute;left:0px;top:0px;display:none;\"onmousedown=\"scrollDiv('"+this.ID+"',"+this.scrollXAmount+",0,"+this.scrollSpeed+");\" onmouseup=\"stopScroll()\">"+this.buttonRight+"</div>";
}
else {
output += "<div class=\"scrollUpClass\" style=\"position:absolute;left:0px;top:0px;display:none;\" onmouseover=\"scrollDiv('"+this.ID+"',0,"+(-this.scrollYAmount)+","+this.scrollSpeed+");\" onmouseout=\"stopScroll()\">"+this.buttonTop+"</div>";
output += "<div class=\"scrollDownClass\" style=\"position:absolute;left:0px;top:0px;display:none;\"onmouseover=\"scrollDiv('"+this.ID+"',0,"+this.scrollYAmount+","+this.scrollSpeed+");\" onmouseout=\"stopScroll()\">"+this.buttonBottom+"</div>";
output += "<div class=\"scrollLeftClass\" style=\"position:absolute;left:0px;top:0px;display:none;\"onmouseover=\"scrollDiv('"+this.ID+"',"+(-this.scrollXAmount)+",0,"+this.scrollSpeed+");\" onmouseout=\"stopScroll()\">"+this.buttonLeft+"</div>";
output += "<div class=\"scrollRightClass\" style=\"position:absolute;left:0px;top:0px;display:none;\"onmouseover=\"scrollDiv('"+this.ID+"',"+this.scrollXAmount+",0,"+this.scrollSpeed+");\" onmouseout=\"stopScroll()\">"+this.buttonRight+"</div>";
}
output += "</div>";
document.write(output);
}
ScrollDiv.prototype.placeButtons = function() {
elm = document.getElementById(this.ID);
elmWidth = elm.firstChild.offsetWidth;
elmHeight = elm.firstChild.offsetHeight;
elm.firstChild.clipWidth = this.maxW;elm.firstChild.clipHeight = this.maxH;
if (elmWidth-5 > this.maxW) {
leftB = elm.childNodes[3].style,rightB = elm.childNodes[4];
leftB.display = rightB.style.display = "block";
leftB.top = rightB.style.top = (this.maxH+3)+"px";
leftB.left = "0px";
rightB.style.left = (this.maxW-rightB.offsetWidth)+"px";
}
if (elmHeight-5 > this.maxH) {
topB = elm.childNodes[1].style,bottomB = elm.childNodes[2];
topB.display = bottomB.style.display = "block";
topB.left = bottomB.style.left = (this.maxW+3)+"px";
topB.top = "0px";
bottomB.style.top = (this.maxH-bottomB.offsetHeight)+"px";
}
}
var timer;
function scrollDiv(divID,sL,sT,sPeed) {
elm = document.getElementById(divID).firstChild;
maxH = elm.offsetHeight;maxW = elm.offsetWidth;
elmClip = getClipping(elm);
cleft = parseInt(elmClip.left);
cright = parseInt(elmClip.right);
ctop = parseInt(elmClip.top);
cbottom = parseInt(elmClip.bottom);
if (cleft+sL <= 0) {cleft=0;cright=elm.clipWidth}
else if (cright + sL >= maxW) {cright=maxW;cleft=maxW-elm.clipWidth}
else {cleft+=sL;cright+=sL;}
if (ctop + sT <= 0) {ctop=0;cbottom=elm.clipHeight;}
else if (cbottom+sT >= maxH) {cbottom = maxH;ctop=maxH-elm.clipHeight}
else {ctop+=sT;cbottom+=sT;}
elm.style.left = -(cleft)+"px";
elm.style.top = -(ctop)+"px";
setClipping(elm,ctop,cright,cbottom,cleft);
timer = window.setTimeout("scrollDiv('"+divID+"',"+sL+","+sT+","+sPeed+");",sPeed);
}
function stopScroll() {window.clearTimeout(timer);}
function getClipping(celm) {
if (c = celm.style.clip) {
tempC = c.substring(c.indexOf("(")+1,c.lastIndexOf(")"));
tempC = tempC.replace(/,/g,"");
cArr = tempC.split(" ");
return {top:cArr[0],right:cArr[1],bottom:cArr[2],left:cArr[3]}
}
return;
}
function setClipping(celm,ctop,cright,cbottom,cleft) {
clipStr = "rect("+ctop+"px "+cright+"px "+cbottom+"px "+cleft+"px)";
celm.style.clip = clipStr;
}
</script>
Som du måske kan se har knapperne forskellige styles som du kan sætte. De hedder hendholdvis scrollUpClass,scrollDownClass,scrollLeftClass og scrollRightClass
For at lave det så et billede scroller, som du skrev skal du gøre nogenlunde sådan her (skal skrives på det sted hvor du vil have at billedet skal være - altså indeni selve body-elementet):
<script type="text/javascript">
s = new ScrollDiv(300,100,10,10,50);
s.setButtonContent("left","<img src=\"pilvenstre.png\" />");
s.setButtonContent("right","<img src=\"pilhojre.png\" />");
s.setEventType("mouseover");
s.addContent("<img src=\"storbillede.png\" />");
s.print();
s.placeButtons();
</script>
placeButtons skal her kaldes efter print for at det skal virke. I addContent kan du tilføje fx dit billede og ved setButtonContent kan du bestemme hvordan din knap skal se ud. Du kan også bruge setAllButtonContent til at sætte indholdet for alle knapper på én gang, men det får du nok ikke lige brug for.
Jeg skal nok også lige forklare:
s = new ScrollDiv(300,100,10,10,50);
s er et valgfrit navn, så det skal du ikke bekymre dig om.
Her er de to første argumenter (300 og 100) definitionen på hvor bredde og høje det område af billedet du vil se. Læg mærke til at hvis du sætter en for lav højde vil der også komme knapper til at scrolle op og ned med (selvom de ikke umiddelbart vil kunne ses hvis du intet indhold har).
De næste to argumenter er hvor langt man skal scrolle per gang - altså hver gang funktionen til at scrolle bliver kaldt vil den her gå 10 til venstre/højre eller 10 op/ned afhængigt af hvad for en knap du bruger.
Det sidste argument er selve hastigheden og måles her i millisekunder. Det definerer hvor tit funktionen til at scrolle blive kaldt, altså her hvert 50 millisekund.
Læg også mærke til s.setEventType("mouseover");. Normalt skal man holde musen inde for at scrolle med du kan så sætte den til at man skal køre musen over istedet.
Ny bruger
Nybegynder
Opret
Preview
