Fliegende Bilder mit Namen und Verlinkung

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Fliegende Bilder mit Namen und Verlinkung

Beitrag von Hape »

Hier ein Script das Bilder über den Bildschirm fliegen läßt. Die Bilder können mit einem Namen und einem Link versehen werden. Scripteinbau in den Body.

Code: Alles auswählen

<script>
// CREDITS:
// Joy of JavaScript: Floating Images Animation
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

// The images (URLS). Add as many pictures as you like
var slideurl=new Array("pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg")

// The comments for each image
var slidecomment=new Array("Tina", "Beth", "Maureen", "Wilma")

// The links, corresponding to the images above. Set "#" if your images should be NOT linked.
var slidelink=new Array("http://www.fabulant.com","http://www.fabulant.com","http://www.fabulant.com","#")

// The targets, corresponding to the links above
var slidetarget=new Array("_blank","_blank","_blank","_blank")

// Font of comment
var slidefont="Arial"

// Color of font
var slidefontcolor="black"

// Size of font (accepted values: 1 - 6)
var slidefontsize="1"

// Do not edit below this line
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0
var floatingspeed=10
var tempo=20
var numberofimages=slideurl.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofimages;i++) {
	stepx[i]=randommaker(floatingspeed)
	stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofimages;i++) {
	imgwidth[i]=10
	imgheight[i]=10
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
var i_fadestrength=new Array()
var i_fadestep=new Array()
var i_fadenow=new Array()
var i_fadenowmax=new Array()
for (i=0;i<=slideurl.length;i++) {
	i_fadenowmax[i]=randommaker(10)+2	
	i_fadestrength[i]=randommaker(99)	
	i_fadestep[i]=1
	i_fadenow[i]=0
}

var spancontent=new Array()
var imgpreload=new Array()
for (i=0;i<=slideurl.length;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=slideurl[i]
}

for (i=0;i<=numberofimages;i++) {
	spancontent[i]="<a href='"+slidelink[i]+"' target='"+slidetarget[i]+"'><img src='"+slideurl[i]+"' border='0'></a><br><font face='"+slidefont+"' color='"+slidefontcolor+"' size='"+slidefontsize+"'>"+slidecomment[i]+"</font>"
}

function setValues() {
	if (ie) {
    	marginbottom=document.body.clientHeight-5
    	marginright=document.body.clientWidth-5
		for (i=0;i<=numberofimages;i++) {             
			var thisspan = eval("document.all.span"+i)
    		thisspan.innerHTML=spancontent[i]
			imgwidth[i]=thisspan.offsetWidth
			imgheight[i]=thisspan.offsetHeight
			var maxleftstart=marginright-imgwidth[i]
			var maxtopstart=marginbottom-imgheight[i]
			var thisspan = eval("document.all.span"+(i)+".style")
			thisspan.visibility="visible"
           	thisspan.posLeft=randommaker(maxleftstart)
			thisspan.posTop=randommaker(maxtopstart)  
		}
		checkmovement()
	}
	if (ns6) {
    	marginbottom=window.innerHeight-11
    	marginright=window.innerWidth-11
		for (i=0;i<=numberofimages;i++) {             
			var thisspan=document.getElementById('span'+i)
			thisspan.innerHTML=spancontent[i]
			var thisspan=document.getElementById('span'+i)
			imgwidth[i]=parseInt(thisspan.offsetWidth)
			imgheight[i]=parseInt(thisspan.offsetHeight)
			var maxleftstart=marginright-imgwidth[i]
			var maxtopstart=marginbottom-imgheight[i]
			var thisspan=document.getElementById('span'+i).style
           	thisspan.left=parseInt(thisspan.left)+randommaker(maxleftstart)
			thisspan.top=parseInt(thisspan.top)+randommaker(maxtopstart) 
			thisspan.visibility="visible" 
		}
    	checkmovement()
	}
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	checkposition()
	movepictures()
    timer=setTimeout("checkmovement()",tempo)
}

function movepictures() {
	if (ie) {
		for (i=0;i<=numberofimages;i++) {  
    		var thisspan=eval("document.all.span"+(i)+".style")
    		thisspan.posLeft+=stepx[i]
			thisspan.posTop+=stepy[i]
			var thisfilter=eval("span"+i)
			i_fadenow[i]++
				if (i_fadenow[i]>=i_fadenowmax[i]) {
					i_fadenow[i]=0
					if (i_fadestrength[i]>=100) {i_fadestep[i]=i_fadestep[i]*-1}
					else if (i_fadestrength[i]<=-20) {i_fadestep[i]=i_fadestep[i]*-1}
				}
			i_fadestrength[i]+=i_fadestep[i]
			thisfilter.filters.alpha.opacity=Math.round(i_fadestrength[i])
    	}
	}
	
	if (ns6) {
		for (i=0;i<=numberofimages;i++) {  
    		var thisspan=document.getElementById('span'+i).style
    		thisspan.left=parseInt(thisspan.left)+stepx[i]
			thisspan.top=parseInt(thisspan.top)+stepy[i]	
			i_fadenow[i]++
			if (i_fadenow[i]>=i_fadenowmax[i]) {
				i_fadenow[i]=0
				if (i_fadestrength[i]>=100) {i_fadestep[i]=i_fadestep[i]*-1}
				else if (i_fadestrength[i]<=-20) {i_fadestep[i]=i_fadestep[i]*-1}
			}	
			i_fadestrength[i]+=i_fadestep[i]
			document.getElementById('span'+i).style.opacity=Math.round(i_fadestrength[i])/100
    	}
	}
}

function checkposition() {
	if (ie) {
		for (i=0;i<=numberofimages;i++) {             
			var thisspan=eval("document.all.span"+i+".style")
			if (thisspan.posLeft>marginright-imgwidth[i]-floatingspeed) {
				thisspan.posLeft-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.posLeft<marginleft) {
				thisspan.posLeft+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.posTop>marginbottom-imgheight[i]-floatingspeed) {
				thisspan.posTop-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

			}
			if (thisspan.posTop<margintop) {
				thisspan.posTop+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	
	if (ns6) {
		for (i=0;i<=numberofimages;i++) {  
			imgwidth[i]=parseInt(document.getElementById('span'+i).offsetWidth)
			imgheight[i]=parseInt(document.getElementById('span'+i).offsetHeight)         
			var thisspan=document.getElementById('span'+i).style
			var leftx=parseInt(thisspan.left)
			var topy=parseInt(thisspan.top)
			if (leftx>marginright-imgwidth[i]-floatingspeed) {
				thisspan.left=leftx-Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (leftx<marginleft) {
				thisspan.left=leftx+Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (topy>marginbottom-imgheight[i]-floatingspeed) {
				thisspan.top=topy-Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

			}
			if (topy<margintop) {
				thisspan.top=topy+Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
}


if (ie || ns6) {
	for (i=0;i<=numberofimages;i++) {
    	document.write("<span id='span"+i+"' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);opacity:0';visibility:hidden></span>")
    	document.close()
	}
window.onload=setValues
}
</script>
<div id="emptydiv" style="position:absolute;top:0px;left:0px;visibility:hidden">Do not delete</div>
Hier dazu eine Demoseite

Antworten