Solved

changing text cell and image cell onClick

Posted on 2001-07-19
6
285 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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now