Slideshow rotating image with alt tag 2

mperez5 · Jul 9, 2006

Hi everyone,
I am trying to have an slideshow for people with disabilities such as vision or hearing limitations. The place that I need help with is the array of alt tags that synchronize with the right image. The alt tag is not working for me, any help really be greatly appreciated?
This is what I have so far working well.

Code:

<script>
var my_Dir = 'images/';
var martin_message = new Array();
martin_message[1]  = "Description of my first image"
martin_message[2]  = "Second image description"; 
martin_message[3]  = "The last image description";
var my_images = new Array();
var SLIDE_load = new Array();
var SLIDE_status, SLIDE_timeout;
var SLIDE_actual = 1;
var SLIDE_speed = 3000;
var SLIDE_fade = 2;
for (i = 1; i <= martin_message.length-1; i++)
{
  my_images[i] = my_Dir+i+'.jpg';
  SLIDE_load[i] = new Image();
  SLIDE_load[i].src = my_images[i];
}
var SLIDE_count = my_images.length-1;
function SLIDE_start()
{
  document.getElementById('SLIDE_pause').disabled = true;
  document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  document.getElementById("SLIDE_textBox").innerHTML= martin_message[SLIDE_actual];
}

function SLIDE_play()
{
  document.getElementById('SLIDE_play').disabled = true;
  document.getElementById('SLIDE_pause').disabled = false;
  SLIDE_actual++;
  SLIDE_slide();
  SLIDE_status = 'SLIDE_play';
  SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_pause()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_status = 'SLIDE_pause';
  document.getElementById('SLIDE_pause').disabled = true;
  document.getElementById('SLIDE_play').disabled = false;	
}
function SLIDE_back()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual--;
  SLIDE_slide();
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_forward()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual++;
  SLIDE_slide()
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_slide()
{
  if (SLIDE_status != 'SLIDE_pause')
  {
    document.getElementById('SLIDE_play').disabled = true;
    document.getElementById('SLIDE_pause').disabled = false;
  }
  if (SLIDE_actual > (SLIDE_count)) SLIDE_actual=1;
  if (SLIDE_actual < 1) SLIDE_actual = SLIDE_count;
  if (document.all)
  {
    document.getElementById("SLIDE_textBox").style.background = "transparent";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=2)";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=SLIDE_fade)";
    document.images.SLIDE_picBox.filters.blendTrans.Apply();
  }
  document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  if (document.getElementById) document.getElementById("SLIDE_textBox").innerHTML= martin_message[SLIDE_actual];
  if (document.all) document.images.SLIDE_picBox.filters.blendTrans.Play();
}
function SLIDE_speeds(SLIDE_valgt)
{
  SLIDE_speed = SLIDE_valgt.options[SLIDE_valgt.selectedIndex].value;
}
</script>
</head>
<body bgcolor="#000000" onload="SLIDE_start()">
<center>
<table width="200" border="1">
<tr><td>logo</td></tr>
  <tr>
    <td><img name="SLIDE_picBox"><font color="#FFFFFF">
<div id="navigation" style="width:100%;position:absolute;bottom:15px;"></td>
  </tr>
  <tr>
    <td height="50"><font color="#FFFFFF"><b><div id="SLIDE_textBox"></div></b></font></td>
  </tr>
  <tr>
    <td><center>
  		<button type="button" id="SLIDE_back" onclick="SLIDE_back()">Prev</button>
  		<button type="button" id="SLIDE_play" onclick="SLIDE_play()">Play</button>
  		<button type="button" id="SLIDE_pause" onclick="SLIDE_pause()">Pause</button>
  		<button type="button" id="SLIDE_forward" onclick="SLIDE_forward()">Next</button>
		</center>  
	</td>
  </tr>
</table>
</div>
</center>
</body>
</html>

BillyRayPreachersSon · Jul 9, 2006

Note 1: There is no "alt" tag. There is an alt attribute of the image element, however.

Whenever you set the image src:

Code:

document.images.SLIDE_picBox.src = ...

you can simply set the alt attribute at the same time:

Code:

document.images.SLIDE_picBox.alt = ...

Note 2: You should work on the removal of tables and font elements, and start to use CSS for styling and layout instead. These are also things that can increase accessibility of your site.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

mperez5 · Jul 10, 2006

Hi Dan,
Thanks very much for taking the time to look at my code. I did the changes and the alt tag is showing this for each of the images:
c:/slideshow/images/1.jpg
c:/slideshow/images/2.jpg ...
Do you mind telling me where is my error, please?

Code:

<script>
var my_Dir = 'images/';
var martin_message = new Array();
martin_message[1]  = "Description of my first image";
martin_message[2]  = "Second image description"; 
martin_message[3]  = "The last image description";

var martin_alt = new Array();
martin_alt[1]  = "alt tag attribute of my first image";
martin_alt[2]  = "Second image alt tag"; 
martin_alt[3]  = "The last image alt tag 3 out of three";

var my_images = new Array();
var SLIDE_load = new Array();
var SLIDE_status, SLIDE_timeout;
var SLIDE_actual = 1;
var SLIDE_speed = 3000;
var SLIDE_fade = 2;
for (i = 1; i <= martin_message.length-1; i++)
{
  my_images[i] = my_Dir+i+'.jpg';
  SLIDE_load[i] = new Image();
  SLIDE_load[i].src = my_images[i];
  SLIDE_load[i].alt = martin_alt[i];
}
var SLIDE_count = my_images.length-1;
var SLIDE_count = martin_alt.length-1;
function SLIDE_start()
{
  document.getElementById('SLIDE_pause').disabled = true;
  document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  document.images.SLIDE_picBox.alt = SLIDE_load[SLIDE_actual].src;
  document.getElementById("SLIDE_textBox").innerHTML= martin_message[SLIDE_actual];
}

function SLIDE_play()
{
  document.getElementById('SLIDE_play').disabled = true;
  document.getElementById('SLIDE_pause').disabled = false;
  SLIDE_actual++;
  SLIDE_slide();
  SLIDE_status = 'SLIDE_play';
  SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_pause()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_status = 'SLIDE_pause';
  document.getElementById('SLIDE_pause').disabled = true;
  document.getElementById('SLIDE_play').disabled = false; 
}
function SLIDE_back()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual--;
  SLIDE_slide();
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_forward()
{
  clearTimeout(SLIDE_timeout);
  SLIDE_actual++;
  SLIDE_slide()
  if (SLIDE_status != 'SLIDE_pause') SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);
}
function SLIDE_slide()
{
  if (SLIDE_status != 'SLIDE_pause')
  {
    document.getElementById('SLIDE_play').disabled = true;
    document.getElementById('SLIDE_pause').disabled = false;
  }
  if (SLIDE_actual > (SLIDE_count)) SLIDE_actual=1;
  if (SLIDE_actual < 1) SLIDE_actual = SLIDE_count;
  if (document.all)
  {
    document.getElementById("SLIDE_textBox").style.background = "transparent";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=2)";
    document.images.SLIDE_picBox.style.filter="blendTrans(duration=SLIDE_fade)";
    document.images.SLIDE_picBox.filters.blendTrans.Apply();
  }
  document.images.SLIDE_picBox.src = SLIDE_load[SLIDE_actual].src;
  document.images.SLIDE_picBox.alt = SLIDE_load[SLIDE_actual].src;
  if (document.getElementById) document.getElementById("SLIDE_textBox").innerHTML= martin_message[SLIDE_actual];
  if (document.all) document.images.SLIDE_picBox.filters.blendTrans.Play();
}
function SLIDE_speeds(SLIDE_valgt)
{
  SLIDE_speed = SLIDE_valgt.options[SLIDE_valgt.selectedIndex].value;
}
</script>
</head>
<body bgcolor="#000000" onload="SLIDE_start()">
<center>
<table width="200" border="1">
  <tr>
    <td><img name="SLIDE_picBox"><font color="#FFFFFF"></td>
  </tr>
  <tr>
    <td height="50"><font color="#FFFFFF"><b><div id="SLIDE_textBox"></div></b></font></td>
  </tr>
  <tr>
    <td><center>
           <button type="button" id="SLIDE_back" onclick="SLIDE_back()">Prev</button>
           <button type="button" id="SLIDE_play" onclick="SLIDE_play()">Play</button>
           <button type="button" id="SLIDE_pause" onclick="SLIDE_pause()">Pause</button>
           <button type="button" id="SLIDE_forward" onclick="SLIDE_forward()">Next</button>
         </center>  
</td>
  </tr>
</table>
</center>
</body>
</html>

BillyRayPreachersSon · Jul 10, 2006

There is no error - you're setting the alt text to be the image src - which is exactly what you're seeing.

If you don't want the image src to appear as the alt text, then set it to what you do want.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

mperez5 · Jul 10, 2006

Hi Dan,
You are my hero!
Yea, it works. Thank you very much.
mperez5

mperez5 · Jul 11, 2006

Hi Dan,
Could I ask you one more question, I want my slide start working onload but is not working?

BillyRayPreachersSon · Jul 11, 2006

That's probably because you are never calling "SLIDE_play" - try calling it at the end of the "SLIDE_start" function.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

mperez5 · Jul 11, 2006

Thanks a million again Dan

this was the key

SLIDE_play()

You are good.

mperez5 · Jul 12, 2006

I have another problem, slide one passes to fast is like skipping the first slide. Do you have an idea how to fix this?

cLFlaVA · Jul 12, 2006

that's because you're not using a timeout until after the initial call to SLIDE_play(). try adding this to the end of your SLIDE_start() function:

Code:

SLIDE_timeout = setTimeout("SLIDE_play()",SLIDE_speed);

*cLFlaVA
----------------------------
[tt]( )[sup]13[/sup] * ( <.)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

mperez5 · Jul 12, 2006

Hi cLFlaVA,
Thanks for taking the time but I did try that and I try again making no difference.

mperez5 · Jul 12, 2006

Hi cLFlaVA,
You were right! By accident I left play() in there. I apoligize and the same for Dan I forgot to give couple stars to him.

cLFlaVA · Jul 12, 2006

no prob.

*cLFlaVA
----------------------------
[tt]( )[sup]13[/sup] * ( <.)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Slideshow rotating image with alt tag 2

mperez5

Programmer

BillyRayPreachersSon

Programmer

mperez5

Programmer

BillyRayPreachersSon

Programmer

mperez5

Programmer

mperez5

Programmer

BillyRayPreachersSon

Programmer

mperez5

Programmer

mperez5

Programmer

cLFlaVA

Programmer

mperez5

Programmer

mperez5

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor