PDA

View Full Version : Java Scripting


jasmine
09-26-2006, 09:28 PM
Hey all,

This is my first attempt at using java scripting. Basically, I want to make a slideshow with fading effects between the pictures...I got the script already built from a site. It works great but I can't seem to figure out how to get the LEFT and TOP positioning changed...All this scripting is making me cross-eyed...help!

<body>




<script language="JavaScript1.2" type="text/javascript">

/***********************************************
* Fade-in image slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var slideshow_width='400px'
var slideshow_height='150px'
var pause=3000 //(3000=3 seconds)

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["test1.jpg", "", ""] //plain image syntax
fadeimages[1]=["test2.jpg", "", ""] //image with link syntax
fadeimages[2]=["test3.jpg", "", ""] //image with link and target syntax

////NO need to edit beyond here/////////////

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p][0]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height :'
+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height
+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height
+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write(''+fadeimages[0][0]+'')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=insertimage(nextimageindex)
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+=''+fadeimages[i][0]+''
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curima geindex][0]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML=insertimage(curimageindex)
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>
</p>


<font face="Arial" size="-2">Free DHTML scripts provided by Dynamic Drive (http://www.dynamicdrive.com)</font>
</p>
</body>

davidj
09-27-2006, 09:09 AM
ok jasmine

i have looked at this and found the quickest way to do this is to cut and paste all your javascript into a seperate file called java.js
(this can be called any thing you want. Dont use the script tags in this java.js page)

now in your main page just call in the script into a table <TD> or better to use a layer...

<div id="Layer2">
<script language="javascript" src="java.js" type="text/javascript"></script>
</div>
Then just use a Style to position the layer

<style type="text/css">
<!--
#Layer2 {
position:absolute;
left:51px;
top:400px;
width:123px;
height:73px;
z-index:1;
}
-->
</style>

jasmine
09-27-2006, 02:52 PM
Excellent! I kinda figured how to do in the script its self, but your way is MUCH easier! I will definately give that a try! Thanks!

Now, the file containing the script, would I save that directly into dreamweaver or put it into another format?

davidj
09-27-2006, 03:01 PM
Now, the file containing the script, would I save that directly into dreamweaver or put it into another format?


not sure what you mean here

just use DW to do this

jasmine
09-27-2006, 05:22 PM
I just wanted to know if I would save it on it's own in a dreaweaver page...I guess you've answered that anyway! :) Thanks!

davidj
09-28-2006, 08:43 AM
in DW go...>

File -> New -> Basic Page -> javascript

this will create the desired page and set the extension when saving

jasmine
09-28-2006, 03:19 PM
Great! Thanks, I will try that out! :)