/    Sign up×
Community /Pin to ProfileBookmark

Changing 2 table cells dynamically, image and text

Copy linkTweet thisAlerts:
Feb 28.2005

I am working on being able to display my artwork on the web. I have the following working for changing images onmouseover, but I can not think of how to make the discriptive text cell change the content when the image is changed. To see the cuurent state go to:
[url]http://www.bondistudios.com/artgallery.cfm?thispage=1[/url]

I’m using ColdFusion to keep all the coding in one file rather than many pages of html, this seems like a good approach.

So, I’m asking for help in this matter, how to change text content when images is changed.

Thanks,
Bob

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@TheBearMayFeb 28.2005 — Just give the span an id and change it in the changePhoto function:

[code=php]
..
document.getElementById("spanId").lastChild.nodeValue="New Span Text"
...
<td><span id="spanId" class="style1">This is the information area<br>
and can have links and other really<br>
neat and cool things...</span>
...
[/code]
Copy linkTweet thisAlerts:
@bbondiauthorFeb 28.2005 — That sounds like what I was kinda expecting. This ID thingie can be handy.

So, on the call to the change function I pass a parameter that correspondes to the image being changed. Maybe an integer so there could be an index to an array that has the text for that image?

Does a loaded array stay resident while I mouseover items?

I'd could do all the text in a switch statement rather than an array, maybe?

Would it make sense to pass text arguments to the change funtion?

Discussion and comments, please.

Thanks,

Bob
Copy linkTweet thisAlerts:
@TheBearMayMar 01.2005 — It can be done in any manner that you've listed on a small scale, although as it grows though the array idea has some appeal. If you declare the array outside of any function it will be global (and will also save a cycle or two in reconsituting it). You could do it with one array, but it's probably simplier to do it as two (one for the image, and one for the text). Then instead of passing the name, I'd just pass it the index to the array (remember that JS arrays start at zero).
Copy linkTweet thisAlerts:
@bbondiauthorMar 01.2005 — My current attempt to do this is at http://www.bondistudios.com/artgallerytest3.cfm?thispage=1

It does not output the array values.

Is the array declared OK?

I'm passing an integer value to index the array.

Since it is not working, I'm suspicious about the array and if it is global, I'm not sure how else to declare it, though.

In my HTML, I have this for the onmouseover code:
*************************************************
<td height="128" width="96">

<a onmouseover="changePhoto ('images/webprints/P1010040rose1weblow.jpg','tall', 0)">

<img src="images/webprints/thumbnails/tn_P1010040rose1weblow.jpg"

border="1" height="128" hspace="1" vspace="1" width="96">

</a>

</td>
-------------------------------------------------




For the idea you suggested this is the ID section:
*************************************************
<td rowspan="4" id="largeImageContainer" style="width: 525px; height: 525px;">

<img src="images/webprints/P1010040rose1weblow.jpg" height="525" width="389">

</td>

<td rowspan="4"><span id="spanId" class="style1">This is the default information area...</span>

</td>
-------------------------------------------------




The Javascript is in the <head> section and looks like:
*************************************************
<script language="javascript">

Image_Sub_Text = new array(6);

Image_Sub_Text[0] = "The 1st image textnwith a newline, I hope";

Image_Sub_Text[1] = "The 2nd image textnwith a newline, I hope";

Image_Sub_Text[2] = "The 3rd image textnwith a newline, I hope";

Image_Sub_Text[3] = "The 4th image textnwith a newline, I hope";

Image_Sub_Text[4] = "The 5th image textnwith a newline, I hope";

Image_Sub_Text[5] = "The 6th image textnwith a newline, I hope";

function changePhoto(imageName,wideTall,this_string){

theImageContainer = document.getElementById('largeImageContainer');

switch(wideTall){

case 'wide':

theImageContainer.innerHTML = '<img src="' + imageName + '" width="' + 525 + '" height="' + 389 + '">';

break;

case 'tall':

theImageContainer.innerHTML = '<img src="' + imageName + '" width="' + 389 + '" height="' + 525 + '">';

break;

}

document.getElementById("spanId").lastChild.nodeValue=Image_Sub_Text[this_string];

}

</script>
-------------------------------------------------

×

Success!

Help @bbondi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...