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

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
elixxerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
Can you post the code for what you have now, so we can look at the best way to add that functionality?
0
hhammashCommented:
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
Saqib KhanSenior DeveloperCommented:
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
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

elixxerAuthor Commented:
Please close. Currently I will not be needing this as I am not going to use it.
0
Saqib KhanSenior DeveloperCommented:
But what about Expert's input. this means we were just wasting our time when we were trying to help him/her?
0
coreybryantCommented:
Asker did request to close this question 5 months ago with no input at that time from anyone.

-Corey
0
coreybryantCommented:
force accept
coreybryant
FP Page Editor
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development Software

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.