Adding image hyperlink to javascript

**Stacie** · 03-02-2005, 08:35 PM

Script: Fade In Slide Show
http://www.dynamicdrive.com/dynamici...nslideshow.htm

Can someone please tell me how I can had links to my images in the slide show above? I did the normal <A href="... stuff, but I can't get it to work. I'm not very good with javascript, is there someplace also within the script that I need to change? I even tried copying pieces of the other slideshow scripts, with no luck. Please help.

THANKS!

**HecticDMC** · 04-07-2005, 11:26 PM

I've been struggling with this too! Please, if anyone can shed some light on this, please do

**jscheuer1** · 04-08-2005, 04:12 AM

Your link to the script was broken. I assume you mean this script:

Fade-in slideshow

Folks love this slideshow and want it to be able to do everything from hold their hand to taking out the garbage. It is not written to configure links to the images or much else other than what it does do very well - create a high quality cross browser fade-in slideshow. In this case, what you see is what you get. I could make a career out of modifying it to allow for all sorts of things, keep your eyes on this thread:

http://www.dynamicdrive.com/forums/s...=7610#post7610

Which started out as a general question. If I code this script to jump through hoops, that is where it will be.

Please note: I am not affiliated with Dynamic Drive, its hosts or subsidiaries, anyone who says otherwise is itchin' for a fight.

Note two: The above mentioned thread may get moved to this forum once the admin catches on to how its subject has changed to a DD script.

Note three: Someone else may take up the challenge, I welcome it!

**jscheuer1** · 04-08-2005, 05:29 AM

Ah, I felt sorry for you folks. Here is a modified script that does what you want and a little more. Be sure to read the configuration area comments:

Code:

<html>

<body>
<div align=center>
<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
* Modified in DD Help Forums to optionally add Links and control over slide behavior
* Modifications marked with * © John Davenport Scheuer - jscheuer1REMOVETHISFIRST@comcast.net
***********************************************/

var slideshow_width='140px' //SET IMAGE WIDTH
var slideshow_height='225px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var repeat='yes' //SET to yes for repeating slideshow SET to no *
                //for slideshow that cycles once and ends at the beginning
var links='yes' //SET to yes to use optional links, no for no links *

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="photo1.jpg"
fadeimages[1]="photo2.jpg"
fadeimages[2]="photo3.jpg"

if (links=='yes'){
var linkimages=new Array()
//SET IMAGE LINKS. Extend or contract array as needed *
linkimages[0]='<a href="http://www.dynamicdrive.com" target=_blank>'  //OPENS new window
linkimages[1]='<a href="http://www.yahoo.com">'  //OPENS same window
linkimages[2]='<a href="http://www.google.com">'
}

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

var a //*
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(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('<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+=3
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)
if (links=='yes') //*
tempobj.innerHTML=linkimages[nextimageindex]+'<img border=0 src="'+fadeimages[nextimageindex]+'"></a>' //*
else //*
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
if (repeat=='no'){  //*
if ((nextimageindex==1)&&(a==1)) //*
return; //*
if (nextimageindex==0) //*
a=1; //*
} //*
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 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[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/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
if (links=='yes')  //*
crossobj.innerHTML=linkimages[curimageindex]+'<img border=0 src="'+fadeimages[curimageindex]+'"></a>' //*
else //*
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

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

</script></div>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

</body></html>

**HecticDMC** · 04-08-2005, 06:55 AM

Works perfectly, as I'm sure you knew it would. Thanks!!!

Now if you could just code it to take out the garbage for me, it would be much appreciated

Cheers,
~Daniel M. Clark
Hectic Studios

**jscheuer1** · 04-09-2005, 07:58 AM

Can't figure out the garbage thing but, just in case you or anyone is wondering if a link can be skipped for a particular image, it can, just use:

Code:

linkimages[2]=''

for no link to the corresponding image. It is a bit of a hack but should work. If you want to be strict about it, use:

Code:

linkimages[2]='<a href="#">'

or:

Code:

linkimages[2]='<a name="null">'

Which brings up the next interesting thing. You can use:

Code:

javascript:somefunc()

in place of # to introduce a scriptlet or reference a function or you can add onClick events in the usual manner.

**ddadmin** · 04-15-2005, 08:31 PM

Thanks jscheuer1 for holding down the fort on this script.

I'll look at officially updating this script for an optional linking feature soon.

Thread: Adding image hyperlink to javascript

Thread Tools

Search Thread

Adding image hyperlink to javascript

Bookmarks

Bookmarks

Posting Permissions