How to set text in a cell

[ziggy.696040]

My web page has thumbnail pictures, and when the user clicks on a
thumbnail, I change the image source of a full-size image elsewhere on
the page. I'd also like to change the caption of the full-size image,
but I'm not sure how to set the value of the text. I've tried creating
a form with a single input field, and I can set the value of that
field, but the field has a sunken style that I can't get rid of, and
I'd like to find a different way of displaying the text.

Is there an easier way to change the value of a text field?

Thanks,

Tom

 

[Ivan Marsh]

My web page has thumbnail pictures, and when the user clicks on a
thumbnail, I change the image source of a full-size image elsewhere on
the page. I'd also like to change the caption of the full-size image,
but I'm not sure how to set the value of the text. I've tried creating
a form with a single input field, and I can set the value of that
field, but the field has a sunken style that I can't get rid of, and
I'd like to find a different way of displaying the text.

Is there an easier way to change the value of a text field?

Thanks,

Tom

You don't need a form. Use an anchor and the innerHTML function.

<a name='myanchor'></a>

document.myanchor.innerHTML = '<b>my file name</b>';

Will change the page to:

<a name='myanchor'><b>my file name</b></a>

 

[RobG]

You don't need a form. Use an anchor and the innerHTML function.

The OP is better off to use a <span> rather than an <a> tag.

<a> is intended for navigation, either as a destination
(anchor) or link, whereas <span> is for in-line markup and does
not infer any presentational idiom or display characteristics
and therefore seems to better suit the OP's need.

<a name='myanchor'></a>

document.myanchor.innerHTML = '<b>my file name</b>';

Will change the page to:

<a name='myanchor'><b>my file name</b></a>

Not in any browser I tested. Removing "document." provides an
IE specific way of referencing a named element that will not
work in most other browsers.

A better, cross browser, standards compliant method is to add a
span in the HTML where the text is to appear, then modify its
content:

<span id="caption_00">the caption will appear here</span>

Then on the thumbnail onclick, add the script to change it:

<img ... onclick="changeCaption('caption_00',
'Here is the new caption');" ...>

And somewhere in the page (preferably in the head), put the
script that modifies the caption:

<script type="text/javascript">
function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).firstChild.data = txt;
} else if (document.all) {
document.all[ele].firstChild.data = txt;
}
}
</script>

The function could be made more generic by having it use the
alt tag of the image for the caption and if its id is related to
the image to the id of the span, then the onclick could be
attached dynamically so that there is no need to add code for
the onclick to every thumbnail.

Always remembering of course that users without JavaScript
support will not see anything happen when the thumbnail is
clicked.

 

[RobG]

RobG wrote:
[...]

A better, cross browser, standards compliant method is to add a
span in the HTML where the text is to appear, then modify its
content:

<span id="caption_00">the caption will appear here</span>

Should mention that the suggested method only works if there
something in the <span> already, that is, that it has a
firstChild. If the span is intended to be empty, then use a
non-breaking space as the default:

<span id="caption_00">&nsbp;</span>

or modify the non-standard-but-widely-supported innerHTML
attribute of the span:

[...]

function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).firstChild.data = txt;
} else if (document.all) {
document.all[ele].firstChild.data = txt;
}

function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).innerHTML = txt;
} else if (document.all) {
document.all[ele].innerHTML = txt;
}

[...]

 

[DU]

RobG wrote:
[...]

A better, cross browser, standards compliant method is to add a
span in the HTML where the text is to appear, then modify its
content:

<span id="caption_00">the caption will appear here</span>

Should mention that the suggested method only works if there
something in the <span> already, that is, that it has a
firstChild.

Since the function targets only a specific node under controlled
circumstances (design requirements are clear and limited), then it is
safe to ignore this issue. If you want to use a more generic, more
general function for setting text of a node (or subtree) - and I do not
recommend doing so here -, then you need to create a function meeting
such design requirements.

If the span is intended to be empty, then use a

non-breaking space as the default:

<span id="caption_00">&nsbp;</span>

or modify the non-standard-but-widely-supported innerHTML
attribute of the span:

[...]

function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).firstChild.data = txt;
} else if (document.all) {
document.all[ele].firstChild.data = txt;
}

function changeCaption(ele,txt) {
if (document.getElementById) {
document.getElementById(ele).innerHTML = txt;

All of the browsers which support getElementById also support nodeType
attribute, nodeName attribute, firstChild, childNodes[], nodeValue and
data attributes so there is no need to resort to innerHTML here. Very
very few browsers still in use today on the web do not support
firstChild.data (or childNodes[0].nodeValue) and, in which case - eg
MSIE 4 -, innerText will be much faster, efficient.

} else if (document.all) {
document.all[ele].innerHTML = txt;
}

[...]

DU