Need URL to open in new window

**superbeetle** · 04-01-2014, 01:44 AM

Hello,

I finally found a slideshow script for my VW website that works with Apple and windows. The problem is I need the URLs to open in a new window. Can this be added to this script? Thanks in advance.

Code:

<script language="JavaScript1.2">

//Presentational Slideshow Script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for legal use

var slideshow_width='468px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='60px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=4000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
var slidebgcolor="white"

var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="images/ahp.jpg"
dropimages[1]="images/aac.jpg"
dropimages[2]="images/cip.jpg"
dropimages[3]="images/mam.jpg"
dropimages[4]="images/tlp.jpg"

var droplinks=new Array()
//SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
droplinks[0]="http://www.airheadparts.com/"
droplinks[1]="http://www.allaircooled.com/"
droplinks[2]="https://www2.cip1.com/?Click=140639"
droplinks[3]="http://www.mamotorworks.com/vw/?KC=892"
droplinks[4]="http://toplineparts.com/"


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

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[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+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1


function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{

clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.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("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}

function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}

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

</script>

**Beverleyh** · 04-01-2014, 05:49 AM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

The script looks quite old so you should look at more robust, modern alternatives, but have you tried adding the usual target attribute (with value of "_blank") to the anchor tags? http://www.w3schools.com/tags/att_a_target.asp

**superbeetle** · 04-01-2014, 10:32 AM

This was my first post and I didn't know the format for posting issues with DD scripts. I have posted my question in the DD scripts section properly. I did try adding the _blank to the URL but wasn't quite sure how to add it to the code. Thanks for your help.

**vwphillips** · 04-01-2014, 11:12 AM

with the target="_Blank"

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<script type="text/javascript">
//Presentational Slideshow Script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for legal use

var slideshow_width='200px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='200px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=4000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
var slidebgcolor="white"

var dropimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
dropimages[0]="http://www.vicsjavascripts.org/StdImages/1.gif"
dropimages[1]="http://www.vicsjavascripts.org/StdImages/2.gif"
dropimages[2]="http://www.vicsjavascripts.org/StdImages/3.gif"
dropimages[3]="http://www.vicsjavascripts.org/StdImages/4.gif"
dropimages[4]="http://www.vicsjavascripts.org/StdImages/5.gif"

var droplinks=new Array()
//SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
droplinks[0]="http://www.airheadparts.com/"
droplinks[1]="http://www.allaircooled.com/"
droplinks[2]="https://www2.cip1.com/?Click=140639"
droplinks[3]="http://www.mamotorworks.com/vw/?KC=892"
droplinks[4]="http://toplineparts.com/"


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

var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[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+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
else
document.write('<a href="javascript:rotatelink();" target="_Blank" ><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

var curpos=parseInt(slideshow_width)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=linkindex=0
var nextimageindex=1


function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{

clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'" target="_Blank" >'+slideimage+'</a>' : slideimage
nextimageindex=(nextimageindex<dropimages.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("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
linkindex=curimageindex
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function rotatelink(){
if (droplinks[linkindex]!="")
window.location=droplinks[linkindex]
}

function resetit(what){
curpos=parseInt(slideshow_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'" target="_Blank" ><img src="'+dropimages[curimageindex]+'" border=0></a>'
rotateimage()
}

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

</script>
</body>

</html>

**vwphillips** · 04-01-2014, 11:13 AM

a modern version

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#parent {
  position:absolute;left:100px;top:100px;width:350px;height:263px;border:solid red 1px;
}

#parent .slide {
  width:350px;height:263px;border-Width:0px;
}

/* Pagination */

#pagination {
  position:absolute;z-Index:10;left:0px;top:240px;width:350px;
}

#pagination .page {
  position:relative;left:140px;top:4px;width:16px;height:16px;float:left;margin-Right:5px;background-Color:red;text-Align:center;font-Size:12px;cursor:pointer;
}


#pagination .current {
 background-Color:green;
}

/*]]>*/
</style></head>

<body>
<input type="button" name="" value="Next" onclick="zxcSlideSlideShow.Next('parent',1);"/>
<input type="button" name="" value="Back" onclick="zxcSlideSlideShow.Next('parent',11);"/>
<input type="button" name="" value="Auto" onclick="zxcSlideSlideShow.Auto('parent');"/>
<input type="button" name="" value="Pause" onclick="zxcSlideSlideShow.Pause('parent');"/>
<input type="button" name="" value="GoTo 0" onclick="zxcSlideSlideShow.GoTo('parent',0);"/>
<input type="button" name="" value="GoTo 1" onclick="zxcSlideSlideShow.GoTo('parent',1);"/>
<input type="button" name="" value="GoTo 2" onclick="zxcSlideSlideShow.GoTo('parent',2);"/>

 <div id="parent" >
  <div id="pagination" >
   <div class="page" ></div>
  </div>

 </div>

<script type="text/javascript">
/*<![CDATA[*/
// Slide Slide Show. (01-April-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/


var zxcSlideSlideShow={

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.n+ud,false);
  }
 },

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o&&o.a[n]&&n!=o.n){
   o.ud=n>o.n?1:-1;
   this.rotate(o,n,false);
  }
 },

 Auto:function(id,ms){
  var o=this['zxc'+id],oop=this;
  if (o){
   o.to=setTimeout(function(){  oop.rotate(o,o.n,true);  },ms||200);
  }
 },

 Pause:function(id){
  var o=this['zxc'+id],z2=0;
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 init:function(o){
  var id=o.ParentID,ia=o.ImageArray,m=o.Mode,add=o.AddEvents,f=o.FadeIn,days=o.Persistence,ms=o.Animation,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),ss=p?this.bycls('slide',p):[],pag=document.getElementById(o.PaginateID),ps=pag?this.bycls('page',pag):null,a,i,z0=0;
  if (p&&ia instanceof Array){
   for (;z0<ia.length;z0++){
    if (ia[z0]&&ia[z0][0]){
     a=document.createElement('A');
     i=document.createElement('IMG');
     i.src=ia[z0][0];
     i.className='slide';
     ia[z0][1]?a.href=ia[z0][1]:null;
     ia[z0][2]?a.target=ia[z0][2]:null;
     a.appendChild(i);
     p.appendChild(a);
    }
   }
   o.ImageArray=null;
   this.init(o);
  }
  else if (ss[0]){
   var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'H',days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,n=days!=-1?this.cookie(id)*1:0,w=p.offsetWidth,h=p.offsetHeight,pge=ps[0]?ps[0]:document.createElement('DIV'),add=typeof(add)=='object'&&add.constructor==Array?add:[],t,z0=0,z1=0,z2=0;
   var m=m=='V'?['top','left',h]:['left','top',w]
   p.style.overflow='hidden';
   o.a=[];
   pge.className='page';
   for (;z0<ss.length;z0++){
    ss[z0].style.position='absolute';
    ss[z0].style.zIndex='0';
    ss[z0].style[m[0]]='0px';
    ss[z0].style[m[1]]=(z0!=n?-3000:0)+'px';
    ss[z0].style.width=w+'px';
    ss[z0].style.height=h+'px';
    pge=ps[z0]?ps[z0]:pge.cloneNode(false);
    if (pag&&!ps[z0]){
     pag.appendChild(pge);
    }
    o.a[z0]=[ss[z0],m[0],pge,pge.className];
   }
   for (;z1<ss.length;z1++){
    this.addevt(o.a[z1][2],'mouseup','GoTo',id,z1);
   }
   for (;z2<add.length;z2++){
    if (add[z2]&&this[add[z2][2]]&&document.getElementById(add[z2][0])){
     t=add[z2][1];
     this.addevt(document.getElementById(add[z2][0]),t=='mouseover'||t=='mouseout'||t=='click'?t:'mouseup',add[z2][2],id,add[z2][3]);
    }
   }
   o.a[n][2].className=o.a[n][3]+' current';
   o.id=id;
   o.m=m;
   o.so=o.SlideOut!==false;
   o.n=n;
   o.lgth=z0-1;
   o.sz=m[2];
   o.ud=1;
   o.days=days;
   o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
   o.h=typeof(h)=='number'&&h>20?ms:ms*4;
   o.f=typeof(f)=='number'&&f>0?f:null;
   this['zxc'+id]=o;
   typeof(s)=='number'&&s>0?this.Auto(id,s):null;
  }
 },

 rotate:function (o,n,a){
  this.Pause(o.id);
  o.auto=a===true;
  o.auto?n=n+o.ud:null;
  n=n>o.lgth?0:n<0?o.lgth:n;
  o.a[o.n][0].style.zIndex='0';
  o.a[n][0].style.zIndex='1';
  o.a[o.n][2].className=o.a[o.n][3];
  o.a[n][2].className=o.a[n][3]+' current';
  o.f?this.opc(o.a[n][0],o.f):null;
  o.so?this.animate(o,o.a[o.n],0,o.sz*o.ud,new Date(),o.ms,o.n):null;
  this.animate(o,o.a[n],o.sz*-o.ud,0,new Date(),o.ms,o.n);
  o.a[n][0].style[o.m[1]]='0px';
  document.cookie=o.id+'='+n+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';');
  o.n=n;
 },

 animate:function(o,a,f,t,srt,mS,m){
  clearTimeout(a[5]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,m); },10);
  }
  else {
   a[0].style[a[1]]=t+'px';
   t==0?o.a[m][0].style[o.m[1]]='-3000px':null;
   o.f?this.opc(a[0],100):null;
   o.auto?oop.Auto(o.id,o.h):null;
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 },

 cookie:function(nme){
  var re=new RegExp(nme+'=[^;]+','i');
  return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:0;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 },

 bycls:function (n,o,t){
  for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){
   if((' '+c[z0].className+' ').match(' '+n+' ')){
    a.push(c[z0]);
   }
  }
  return a;
 }

}

// N.B. all sides must have a class name including the keyword 'slide'.
zxcSlideSlideShow.init({
 ParentID:'parent',       // the unique ID name of the parent DIV.                                   (string)
 Mode:'Horizontal',       //(optional) the mode of execution, 'Horizontal' or 'Vertical'.            (string, default = 'Horizontal')
 SlideOut:false,          //(optional) false = slideout is disabled .                                (boolean, default = true = slideout is enabled)
 ImageArray:[             //(optional) the animation duration in milli seconds.                      (array, default = inline HTML elements)
  // field 0 = the image SRC.
  // field 1 = (optional) the image link HREF.
  // field 2 = (optional) the image link HREF target.
  ['http://www.vicsjavascripts.org/StdImages/1.gif','http://www.vicsjavascripts.org/','_Blank'],
  ['http://www.vicsjavascripts.org/StdImages/2.gif','http://www.vicsjavascripts.org/','_Blank'],
  ['http://www.vicsjavascripts.org/StdImages/3.gif','http://www.vicsjavascripts.org/','_Blank'],
 ],
 Animation:1000,          //(optional) the animation duration in milli seconds.                      (number, default = 1000)
 AutoHold:3000,           //(optional) the auto rotation hold delay  in milli seconds.               (number, default = Animation*4)
 AutoStart:1000,          //(optional) the delay before starting auto rotation in milli seconds.     (number, default = no auto start)
 FadeIn:70,               //(optional) the fade in opacity(0 to 100).                                (number, default = no fade in)
 PaginateID:'pagination', //(optional) the unique ID name of the pagination parent DIV.              (string, default = no pagination)
 AddEvents:[              //(optional) an array of arrays defining the event calls to add.           (array, default = inline event calls)
  // field 0 = the unique ID name of the object to add the call to.
  // field 1 = the event type, 'mouseover', mouseout, mouseup', mousedown' or 'click'.
  // field 2 = the script function to call.
  // field 3 = the parameter to pass to the script function.
  ['parent','mouseover','Pause'],
  ['parent','mouseout','Auto']
 ],
 Persistence:1            //(optional) the number of days to restore the last display.               (number, default = -1)
                          //(optional) 'session' = restore the last display for the browser session. (number, default = -1 days)
});

/*]]>*/
</script>
</body>

</html>