Write test on an image in a slideshow

samuvk · 12-02-2012, 04:52 PM

I have a very basic slideshow and I would lilke to know how can I add some text to each of the images on the slideshow.

THANKS SO MUCH

Here is the code of my slideshow.

</head>
<script language="javascript" type="text/javascript">
var imagenesCA = ['http://lh6.ggpht.com/_sIFcB4A_jT4/SnnTvYyrECI/AAAAAAAABjE/jYXMTrokCJo/s512/30.jpg',
'http://lh5.ggpht.com/_Eg1ks9CXra8/SHOdVTsctZI/AAAAAAAAEtU/I7GKbE71934/s512/espa%C3%B1a%20174.jpg'];
var enlacesCA = ['http://goplanettravel.blogspot.com/2009/10/central-america.html',
'http://goplanettravel.blogspot.com/2009/10/central-america.html'];
var anchoCA = [680, 680];
var altoCA = [400, 400];
var cantidadCA = imagenesCA.length;
var actualCA = 0;
function fn_empezarCA(){
if (actualCA==cantidadCA)
actualCA = 0;
var imagenCA = document.getElementById('imagenCA');
var enlaceCA = document.getElementById('enlaceCA');
imagenCA.src = imagenesCA[actualCA];
imagenCA.width = anchoCA[actualCA];
imagenCA.height = altoCA[actualCA];
enlaceCA.href = enlacesCA[actualCA];
actualCA = actualCA + 1;
setTimeout('fn_empezarCA();', 6000);
}
</script>

</head>
<body>

<a href='' id='enlaceCA'><img id='imagenCA' src=''/></a><script language='javascript' type='text/javascript'>fn_empezarCA();</script>

vwphillips · 12-02-2012, 06:27 PM

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>
<script type="text/javascript">

var imagenesCA = [
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 2']
];

var imagenesCA2 = [
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 2'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 3']
];

function fn_empezarCA(id,ary,ms,nu){
 var img=document.getElementById(id),lk=document.getElementById(id+'A'),d=document.getElementById(id+'D');
 if (img){
  nu=nu||0;
  img.src=ary[nu][0];
  if (lk){
   lk.removeAttribute('href');
   if (ary[nu][1]){
    lk.href = ary[nu][1];
   }
  }
  if (d){
   d.innerHTML=ary[nu][2]||'';
  }
  nu=++nu%ary.length;
  setTimeout(function(){ fn_empezarCA(id,ary,ms,nu); }, ms||1000);
 }
}
</script>

</head>

<body>
<a href='' id='imagenCAA'><img id='imagenCA' src='' width="680" height="400"/></a><div id='imagenCAD' ></div>
<a href='' id='imagenCA2A'><img id='imagenCA2' src='' width="200" height="150"/></a><div id='imagenCA2D' ></div>
<script> vic=0; </script>
<script type='text/javascript'>
 fn_empezarCA('imagenCA',imagenesCA,6000);
 fn_empezarCA('imagenCA2',imagenesCA2,2000);
</script>
</body>

</html>

samuvk · 12-02-2012, 06:51 PM

Thanks for your reply.

I was looking to introduce the text within the picture.

Something like the attachment.

Thanks

vwphillips · 12-02-2012, 07:14 PM

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[*/
.text {
  position:absolute;top:-50px;height:20px;width:100px;text-Align:left;padding:5px;color:red;margin:6px;background-Color:#FFFFCC;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.text2 {
  position:absolute;;top:-50px;height:20px;width:200px;text-Align:center;color:white;margin-Top:130px;
}

/*]]>*/
</style><script type="text/javascript">

var imagenesCA = [
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 2']
];

var imagenesCA2 = [
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 2'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://goplanettravel.blogspot.com/2009/10/central-america.html','Text 3']
];

function fn_empezarCA(id,run,ms,ary,cls){
 var o=fn_empezarCA[id],img=document.getElementById(id),d,lk,p;
 if (!o&&img){
  if (typeof(cls)=='string'){
   d=document.createElement('DIV');
   d.className=cls;
   document.body.appendChild(d);
  }
  o=fn_empezarCA[id]={
   ary:typeof(ary)=='object'&&ary.constructor==Array?ary:false,
   d:d,
   ms:typeof(ms)=='number'&&ms>0?ms:2000,
   nu:0
  }
 }
 if (o){
  clearTimeout(o.to);
  if (run){
   if (o.ary[o.nu][0]){
    img.src=o.ary[o.nu][0];
    img.style.borderWidth='0px';
    lk=img.parentNode;
    lk.removeAttribute('href');
    if (o.ary[o.nu][1]){
     lk.href = o.ary[o.nu][1];
    }
    if (o.d){
     p=pos(img);
     o.d.style.left=p[0]+'px';
     o.d.style.top=p[1]+'px';
     o.d.innerHTML=o.ary[o.nu][2]||'';
    }
   }
   o.to=setTimeout(function(){ o.nu=++o.nu%o.ary.length; fn_empezarCA(id,true); },ms||o.ms);
  }
 }
}

function pos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}

function Resize(){
 // parameter 0 = the unique ID name of the image.                                   (string)
 // parameter 1 = true = auto rotate, false = pause.                                 (number)
 // parameter 2 = the auto rotate 'hold duration in milli seconds.                   (number)
 // parameter 3 = an array of arrays defining the SRCs, Link HREFs and caption text. (array, only required for initialization)
 // parameter 4 = the class name of the DIV to display the captions.                 (string, only required for initialization)
 fn_empezarCA('imagenCA',true,6000,imagenesCA,'text');
 fn_empezarCA('imagenCA2',true,2000,imagenesCA2,'text2');
}

window.onload=function(){
 Resize();
}

window.onresize=function(){
 Resize();
}

</script>

</head>

<body>
<center>
<a href='' ><img id='imagenCA' src='' width="680" height="400"/></a>
<br />
<a href=''><img id='imagenCA2' src='' width="200" height="150" onmouseover="fn_empezarCA('imagenCA2');" onmouseout="fn_empezarCA('imagenCA2',true,500);" /></a>
</center>
<div class="text2" >Riii</div>

</body>

</html>