Viewer title to textbox?

[zoobie]

I'd like this image viewer to operate as usual...but when the "next" button is clicked, also have the title of the image displayed in my form's textbox on the same page <form name=myform><input type=text name=title size=15>

I know it's something like document.this.next.value = document.myform.title.value but can't quite understand the viewer and how it's onclicked.

Thanks :p

<input type="button" name="btnNext" class="whitered" value=" Next " onclick="Next();"></p>
<p align="center"><img name="_Ath_Slide"></p>

<p align="center"><SPAN id="_Ath_FileName"></SPAN> <br>
<font color="#304467"size="1">
<SPAN id="_Ath_Img_X"></SPAN><SPAN id="_Ath_Img_N"></SPAN></font> </p>

<p align="center">

<script>

g_fPlayMode = 0;
g_iimg = 0;
g_imax = 0;
g_ImageTable = new Array();

function ChangeImage(fFwd)
{
if (fFwd)
{
if (++g_iimg==g_imax)
g_iimg=0;
}
else
{
if (g_iimg==0)
g_iimg=g_imax;
g_iimg--;
}
Update();
}

function Update(){
document.all._Ath_Slide.src = g_ImageTable[g_iimg][0];
document.all._Ath_FileName.innerHTML = g_ImageTable[g_iimg][1];
document.all._Ath_Img_X.innerHTML = g_iimg + 1;
document.all._Ath_Img_N.innerHTML = g_imax;
}


function Play()
{
g_fPlayMode = !g_fPlayMode;
if (g_fPlayMode)
{
btnPrev.disabled = btnNext.disabled = true;
Next();
}
else
{
btnPrev.disabled = btnNext.disabled = false;

}
}
function OnImgLoad()
{
if (g_fPlayMode)
window.setTimeout("Tick()", g_dwTimeOutSec*1000);
}
function Tick()
{
if (g_fPlayMode)
Next();
}
function Prev()
{
ChangeImage(false);
}
function Next()
{
ChangeImage(true);
}
function main()
{

Update();
}

g_ImageTable[g_imax++] = new Array ("blank_blue.gif","<font face=\"times new roman\"color=\"#ffffff\"><b><i>START</b></i></font>");
g_ImageTable[g_imax++] = new Array ("walkingahead_S.gif","<font face=\"times new roman\"color=\"#ffffff\"><b><i>ABOVE IT ALL</b></i></font>");
g_ImageTable[g_imax++] = new Array ("stooges.gif","<font face=\"times new roman\"color=\"#ffffff\"><b><i>3 STOOGES</b></i></font>");
g_ImageTable[g_imax++] = new Array ("head.gif","<font face=\"times new roman\"color=\"#ffffff\"><b><i>WEEDHEAD</b></i></font>");
g_ImageTable[g_imax++] = new Array ("brainy_S.gif","<font face=\"times new roman\"color=\"#ffffff\"><b><i>NO BRAINER</b></i></font>");
g_ImageTable[g_imax++] = new Array ("alfred_S.gif","<font face=\"times new roman\"color=\"#ffffff\"><b><i>ALFRED</b></i></font>");
g_ImageTable[g_imax++] = new Array ("clown.gif","<font face=\"times new roman\"color=\"#ffffff\"><b><i>JESTER</b></i></font>");
g_dwTimeOutSec=2
</script>

[ShriekForth]

You just have it backwards.


function Update(){
document.all._Ath_Slide.src = g_ImageTable[g_iimg][0];
document.myform.title.value = g_ImageTable[g_iimg][1];
document.all._Ath_Img_X.innerHTML = g_iimg + 1;
document.all._Ath_Img_N.innerHTML = g_imax;
}


You will probably want to remove the html formatting from those titles as well.

ShriekForth

[zoobie]

Thanks

How would I style the above html formatting with css? I tried:
<style type="text/css">"JESTER" {font:bold 18px Times New Roman, serif; color:#FFFFFF; font-style:italic}</style> in the head...but it didn't work. It's defaulting.

Thanks again :p

[beetle]

"JESTER" isn't a valid CSS selector (in otherwords, you can't assign CSS style to text by the value of the text) Let's create a custom CSS class for SPAN objects with the name 'imgText'<style>
span.imgText {
font: bold italic 18px Times New Roman, serif;
color: #FFFFFF;
}
</style>

g_ImageTable[g_imax++] = new Array ("clown.gif","<span class=\"imgText\">JESTER</span>");Of course, you don't have to use the className 'imgText', it can be anything you like

[zoobie]

Well, I'm using span.style {font:bold 18px Times New Roman} which works for the viewer...but the whole thing is showing up in the textbox <span style="style">JESTER</span> :rolleyes:

[beetle]

Maybe I'm not sure what you are getting at. got a link?

[zoobie]

<span style="style">JESTER</span> (the whole tag) is showing up in the textbox instead of JESTER.

[beetle]

Ohhhh, i see.

You can't put any objects within the contraints of a textarea

<textarea><span>text</span></textarea> is not valid

In DOM terms, only 1 type 3 node (#textNode) can be a child to a TEXTAREA object.

If you want the text in the TEXTAREA to by styled, you need to attach the style to it directly

textarea.mystyle { blah: blah; }
<textarea class="mystyle">text</textarea>

[zoobie]

Look here (http://geocities.com/zoobie007/prob1.html).

[ShriekForth]

Just set the style on the textbox.

<style type="text/css">
.ImageTitle {font:bold 18px Times New Roman, serif; color:#000000; font-style:italic}
</style>

<input type=text name=title size=15 class="ImageTitle">

ShriekForth

[ShriekForth]

I think I see what you are trying to do now. You need to remove the formatting from the titles in the array. That's not needed. Set a class on the filename, as well as the input box. Let that class define the style of the title.

<span id="_Ath_FileName" class="ImageTitle"></span>
<input type=text name=animation size=25 class="ImageTitleBox">

<style type="text/css">
.ImageTitle {font:bold 18px Times New Roman; COLOR:#FFFFFF; font-style:italic}
.ImageTitleBox {font:bold 18px Times New Roman; COLOR:#000000; font-style:italic}
</style>

ShriekForth

[zoobie]

Yesssssssss...

At first, it didn't work...but then I saw the <span id="_Ath_FileName"></span> at the top of the image viewer code and inserted the class="ImageTitle" there..

Works perfectly!

Thanks :p