# Javascript slideshow - add titles to pics?

**URL:** <https://forum.kirupa.com/t/javascript-slideshow-add-titles-to-pics/266136>\
**Category:** Uncategorized\
**Created:** [July 16, 2008, 4:49pm UTC](https://forum.kirupa.com/t/javascript-slideshow-add-titles-to-pics/266136 "2008-07-16T16:49:48Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![melanie\_bund](https://avatars.discourse-cdn.com/v4/letter/m/e19adc/32.png) [@melanie\_bund](https://forum.kirupa.com/u/melanie_bund)\
**Post date:** [July 16, 2008, 4:49pm UTC](https://forum.kirupa.com/t/javascript-slideshow-add-titles-to-pics/266136/1 "2008-07-16T16:49:48Z")

</div>

Hi i have a javascript slide show and would like to add titles to the pictures, any way it can be done? see below script

\<script language=javascript\>  
var width = 343;  
var height = 230;  
var imgAr1 = new Array();  
var rImg1 = new Array();  
imgAr1[0] = “images/hotel-sheraton-image-room-01.jpg”;  
imgAr1[1] = “images/hotel-sheraton-image-room-02.jpg”;  
imgAr1[2] = “images/hotel-sheraton-image-room-03.jpg”;  
imgAr1[3] = “images/hotel-sheraton-image-room-04.jpg”;  
imgAr1[4] = “images/hotel-sheraton-image-room-05.jpg”;  
imgAr1[5] = “images/hotel-sheraton-image-room-06.jpg”;  
imgAr1[6] = “images/hotel-sheraton-image-room-07.jpg”;  
imgAr1[7] = “images/hotel-sheraton-image-room-08.jpg”;  
\</script\>  
\<table cellpadding=0 cellspacing=0\>\<tr\>\<td style=“border: 2px solid #153244;”\>  
\<img id=pic border=0\>  
\</td\>\</tr\>  
\<tr\>\<td\>  
\<table width=100% style=“border: 2px solid #153244; font-size: 11px; font-weight: bold; font-family: verdana;”\>  
\<td align=center\>\<a style=“color: #153244; cursor:pointer;” onclick=“prev()”\>Prev\</a\>\</td\>  
\<td align=center\>\<a style=“color: #153244; cursor:pointer;” onclick=“start()”\>Start\</a\>\</td\>  
\<td align=center\>\<a style=“color: #153244; cursor:pointer;” onclick=“slideshow()”\>Next\</a\>\</td\>  
\<td align=center\>\<a style=“color: #153244; cursor:pointer;” onclick=“end()”\>End\</a\>\</td\>  
\</tr\>\</table\>  
\</td\>\</tr\>\</table\>  
\<script language=javascript\>  
for(var j = 0; j \< imgAr1.length; j++)  
{  
rImg1[j] = new Image();  
rImg1[j].src = imgAr1[j];  
}  
document.onload = setting();  
var slide;  
function setting()  
{  
slide = document.getElementById(‘pic’);  
slide.src = imgAr1[0];  
slide.setAttribute(“width”,width);  
slide.setAttribute(“height”,height);  
}  
//Image or picture slide show using java script  
//slideshow function  
var picture = 0;  
function slideshow(){  
if(picture \< imgAr1.length-1){  
picture=picture+1;  
slide.src = imgAr1[picture];  
}  
}  
function prev(){  
if(picture \> 0 ){  
picture=picture-1;  
slide.src = imgAr1[picture];  
}  
}  
function start(){  
slide.src = imgAr1[0];  
picture = 0;  
}  
function end(){  
slide.src = imgAr1[imgAr1.length-1];  
picture = imgAr1.length-1  
}  
\</script\>  
Thanks melanie