Solved

Click on Image/Open info in different Table on same page!

Posted on 2003-11-20
8
249 Views
Last Modified: 2013-12-24
I have two tables on the same page. Nothing real elaberate. The top table has the page info and several smaller images that when "clicked" will display their info. How do I get the smaller image's info to display in the second table without it reloading the page?

thanxx
0
Comment
Question by:elixxer
8 Comments
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Can you post the code for what you have now, so we can look at the best way to add that functionality?
0
 
LVL 14

Expert Comment

by:hhammash
Comment Utility
Hi,

You can do it in two ways (without programming)

Method 1
-----------
On the same page you will have the table that has the images and underneath it the table that will display the information of the image.

Make each table as a DRW,  the second table which will display the info will be a DRW that is waiting for the info from the hyperlink.  When you click on the picture the second DRW (the table which will display info) will display the information.

In the Picture Hyperlink include a parameter so when clicked,  the destination will be the same page.  www.pagename?id=900

Method 2
----------
Create the second table (DRW) on a separate page and call it Details.asp

Go back to the first page that has the table with the images and go under the table and insert an Inline Frame:  Insert>Inline Frame

Set the Inline Frame properties to display Details.asp page. The picture hyperlink should have parameters holding info that the second DRW is waiting for.

You can remove the Inline frame borders and  you can make it look like a part of the page. You can extend it Vertically and Horizontally to be able to hold the entire page,  in this case the scroll bars will not appear.

Regards
hhammash
0
 
LVL 23

Expert Comment

by:adilkhan
Comment Utility
Very Easy Approach.
Code is Really simple and Easy to Modify.
Give it a Try and let me know if you have any questions.
(Copy and paste into notepad, Save as .html to see this Code in action).

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<Script>
// Define HTML for your imgaes information

html_1 = "<b>You Clicked Image1</b>"
html_2 = "<b>You Clicked Image 2!</b>"

function info(whi, i)      {

// whi is the ID name <div> within your table, and i is the index WHICH html variable you want to assign

document.getElementById(whi).innerHTML = eval("html_"+i)
document.getElementById(whi).innerHTML = eval("html_"+i)

}

// See below how the function is been used.

</Script>
</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  <tr>
    <td width="50%"><a href="javaScript:info('info', 1)">Image 1 info</a></td>
    <td width="50%"><a href="javaScript:info('info', 2)">Image 2 Info</a></td>
  </tr>

</table><br>
<table border="3" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#800000" width="100%" id="AutoNumber2">
  <tr>
    <td width="100%"><div id="info">Select a Image</div></td>
  </tr>
</table>

</body>

</html>
0
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

 

Author Comment

by:elixxer
Comment Utility
Please close. Currently I will not be needing this as I am not going to use it.
0
 
LVL 23

Expert Comment

by:adilkhan
Comment Utility
But what about Expert's input. this means we were just wasting our time when we were trying to help him/her?
0
 
LVL 29

Expert Comment

by:coreybryant
Comment Utility
Asker did request to close this question 5 months ago with no input at that time from anyone.

-Corey
0
 
LVL 29

Accepted Solution

by:
coreybryant earned 0 total points
Comment Utility
force accept
coreybryant
FP Page Editor
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

Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

728 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

14 Experts available now in Live!

Get 1:1 Help Now