...

View Full Version : Write test on an image in a slideshow



samuvk
12-02-2012, 05: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, 07:27 PM
<!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, 07: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, 08:14 PM
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum