Solved

changing text cell and image cell onClick

Posted on 2001-07-19
6
292 Views
Last Modified: 2012-06-21
i have used a javascript to create a thumbnail viewer which shows one image at a time and lets the user click through the array of images sequencially using a "next" and "last" button.

I need to ALSO have it change text in a cell to correspond with each image as a description.

I've been playing with this too long and I don't know enough about javascript to figure out how to make it work.
Any ideas would be appreciated.

comments only please.  here's the code. I have the div where I want the text to change named "description":


<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
prev1 = new Image (32,18);
prev1.src = "images/prev1.gif";
prev2 = new Image (32,18);
prev2.src = "images/prev2.gif";

next1 = new Image (32,18);
next1.src = "images/next1.gif";
next2 = new Image (32,18);
next2.src = "images/next2.gif";

go1 = new Image (48,24);
go1.src = "images/go1.gif";
go2 = new Image (48,24);
go2.src = "images/go2.gif";

maxPic = 4;

p1 = new Image (144,96);
p1.src = "images/1-thumb.jpg";
link1 = "full1.html";

p2 = new Image (144,96);
p2.src = "images/2-thumb.jpg";
link2 = "full2.html";

p3 = new Image (144,96);
p3.src = "images/3-thumb.jpg";
link3 = "full3.html";


p4 = new Image (144,96);
p4.src = "images/4-thumb.jpg";
link4 = "full4.html";

count = 1;
function next()
      {
      count++;
      if (count > maxPic)
            {
            count = 1;
            }

      eval("document.p.src=p" + count + ".src");
      
      
      }
      
function back()
      {
      count--;
      if (count == 0)
            {
            count = maxPic;
            }
      
      eval("document.p.src=p" + count + ".src");

      }

function link()
      {
    window.open(eval("link" + count),null,'top=1,left=50,width=700,height=650,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes');
      }

function Open(page)
      {
      OpenWin = this.open(page, "CtrlWindow", "left=50,width=700,width=700,height=650,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes");
      }

function Open2(page) {
      OpenWin = this.open(page, "CtrlWindow", "left=50,width=700,width=675,height=650,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes");
      }


      
//  End -->
</script>
</head>
<body>
<table width="475" cellspacing="0" cellpadding="10">
                                    <tr>
                                          <td class="text" width="210" valign="top">
                        
                                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Take a few moments to browse through the thumbnails on the right.  To view an image full size, click the "go" button.
                                          <br><br><br>
                                          <div style="border:thin solid #330099;height:115px;padding:5px;" name="description" class="text">
                                          If this works it will be really really cool
                                          </div>

                                          </td>
                                          <td valign="top">
                                    
                                                <table width="160" valign="top" cellspacing="0" cellpadding="0" border="0" bgcolor="#43039A">
                                                      <tr>
                                                      
                                                      <td height="15" width="160" bgcolor="#43039A" style="padding:5px;>
                                                      <div align="centeR"><img src="images/preview.gif"></div>
                                                      </td>
                  
                                                      </tr>
                                                      <tr>
                                                            <td align="center" height="96" width="160" bgcolor="#43039A">
                                                            <img name=p src="images/1-thumb.jpg" border=0 width=144 height=96>
                                                            </td>
                                                      </tr>
                                                      <tr>
                                                            <td width="160" align="center" bgcolor="#43039A">
                                                                  <table>
                                                                        <tr>
                                                                              <td bgcolor="#43039A">
                                                            <a href="javascript:back()" onmouseover="prev.src=prev2.src" onmouseout="prev.src=prev1.src"><img src="images/prev1.gif" border="0" name="prev"></a>
                                                                              </td>
                                                                              <td height="25" bgcolor="#43039A">
                                                            <a href="javascript:link()" onmouseover="go.src=go2.src" onmouseout="go.src=go1.src"><img src="images/go1.gif" border="0" name="go"></a>
                                                                              </td>
                                                                              <td height="25" bgcolor="#43039A">
                                                            <a href="javascript:next()" onmouseover="next.src=next2.src" onmouseout="next.src=next1.src"><img src="images/next1.gif" border="0" name="next"></a>
                                                                              </td>
                                                                        </tr>
                                                                  </table>
                                                            </td>
                                                      <tr>
                                                            <td width="160" style=";font-size:9px;font-weight:bold;color:#ffffff;padding-bottom:5px;" align="center">
                                                            Click "View" for full size images.
                                                            </td>
                                                      </tr>
                                                </table>
                                          
                                          
                                          </td>
                              </table>
0
Comment
Question by:1cell
  • 3
  • 3
6 Comments
 
LVL 3

Expert Comment

by:MHQ
ID: 6299718
Add:
text1="the text for pic1"
where you set the src to the image-files.

Then use:
document.all.description.innerText=eval("text"+count);
next to the line you have saying: eval("document.p.src=p" + count + ".src");

you could also use
document.all.description.innerHTML=""
to change the HTML within the tag.

Regards,
MHQ
0
 
LVL 6

Author Comment

by:1cell
ID: 6299896
ok, got an error

document.all.description is not an ojbect

i have:

<div name="description">

isn't that all it should take?
0
 
LVL 3

Accepted Solution

by:
MHQ earned 100 total points
ID: 6299906
change the <div name="description"> to <div id="description">

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Author Comment

by:1cell
ID: 6299908
and I need to have the text1="text for pic1" like:

var text1="text for pic1";

right?
0
 
LVL 6

Author Comment

by:1cell
ID: 6299917
awesome, thank you very much.  i think this is the second time you've helped me with javascript headaches.  you rock!
0
 
LVL 3

Expert Comment

by:MHQ
ID: 6299942
np ;) I'm here to help!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question