Fading Dynamic images [Archive]

Click to See Complete Forum and Search --> : Fading Dynamic images

kosar

12-29-2003, 09:47 AM

I need a script similar to the fading dynamic content on javascriptsource.com, i need it to display images instead of text and to run contionously with no timeout. Can anyone help?

Phil Karras

12-29-2003, 10:23 AM

I believe IE has fadeout and fadein methods? The problem is that no other browser has those so, the only way I know to do that is to create your own functions to display the images with an Opacity %. I think I tried this at one time.

Nope, opacity is the IE only method.

Sorry, I can't remember how I did it (or even if I did it) for Netscape.

kosar

12-29-2003, 02:48 PM

i have this script but i need to make the images include a url link:

<script language="JavaScript1.2">
var slideshow_width='187px' //SET IMAGE WIDTH
var slideshow_height='180px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
fadeimages[0]="ui/Store/images/promo/Featured-Item9.jpg"
fadeimages[1]="ui/Store/images/promo/Featured-Item10.jpg"
fadeimages[2]="ui/Store/images/promo/Featured-Item11.jpg"

////NO/////////////

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

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(op acity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[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/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
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/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

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

</script>

Phil Karras

12-30-2003, 08:49 AM

The URL should be added as is done even for none-fading - rotating - images, in the HTML line.

kosar

12-30-2003, 09:15 AM

I havea script in place, but i need to link it to a scripts file that contains all of my scripts in it. Do i just place the whole script into that file or do i need to leave pieces out? Thanks.

Phil Karras

12-30-2003, 12:52 PM

The only parts you leave out in a script file are:
<script .....>

and

</script>

But all the other stuff in the file and name it something like:
MyJsLib.js

Then in the <head> section you include it like this:

<script language="JavaScript" type="text/javascript" src='MyJsLib.js'>
</script>

IF the 'MyJsLib.js' file is in the same DIR as the html file incliding it. If not you'll need to include the path.

In this way, for common JS functions used in all your html file, you can call only one js library file.

Hope that helps.

kosar

12-30-2003, 01:40 PM

I am inserting this into an asp page. i need the the javascript link to go into one of the table cells.(Javascript here!)

<%@ LANGUAGE="VBSCRIPT" %>
<% Option Explicit %>
<%
Dim PageTitle
PageTitle = "Welcome to Rhode Island Novelty"
%>

<br>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" valign="top"></td>
</tr>
<tr align="center">
<td height="247" colspan="2"><a href=""><img src="ui/Store/images/promo/SpringSplash.jpg" border="0" alt=""></a></td>
</tr>
<tr align="center">
<td colspan="2"> </td>
</tr>
<tr>
<td width="49%"> </div></td>
<td width="49%">Javascript here!<div align="center">
<a href=""><img src="ui/Store/images/promo/featureditem.jpg" width="187" height="180" border="0" alt=""></a></div></td>
</tr>
<tr>
<td colspan="2" valign="top"> 
</tr>
</table>