Oh, how I would LOVE it if there was a very web-smart person out there in Bravenet land who could answer this design question. I have seen on the Internet (mostly on YouTube) about how tools like AJAX and JQUERY and others can enable you to make an object on your webpage change into another object that it is linked to without having to load a separate page when clicking on the link. If you will, please go to my website page, where you will be able to see what I am trying to accomplish. Currently the only link I have set up on the page takes you to another page, however, I do not want it to. I want each object to change into the linked object without changing pages. Oh, life would be so wonderful if there was just a code that I could input into my page that would enable this action. Does anyone know how to accomplish this task? I know it can be done, I just don't know how to do it. Thank you for any and all suggestions and answers.

Browser: IE8 and Mozilla Firefox

OS: Windows Vista

Can it be done? Yes. But I'm not sure you understand the scope of what your trying to do. If you were dealing with just one or two images on the page, it would be a relatively simple task. But your current page has 20 spaces and a potential for more. That relates to 40 different images.

Your also confusing the issue by trying to use links. Wrapping a image in a link doesn't make things easier, it makes things harder. And, unless you actually want the visitor to go to another page, there isn't any need.

So here is an example of how it might be done. Take a look at Philos Corkboard Test Page. I uncluttered it by putting all the style settings in the "head".

The example creates a table with 5 cells across and 4 down. Only the first two actually work. That's all the images you provided, but that should be enough. If you look at the source code, you will see that each cell has the "answer" image as a background. The "question" image is then placed in the table cell which then effectively hides the "answer" image. Note that the "question" image is also assigned a "id". In the example, the "id" for each image is simply the row/column cell reference. For example, "00" is row 0, column 0 and "01" is row 0 column 1. This makes it easy to know where you are in the table.

When you click on the image, a small JavaScript program named "hide_show()" is called, with the image ID as a parameter. The ID parameter is how the JavaScript program knows which image to work on. Using the ID, the script checks the "visibility" parameter. If it is not set yet, or set to "visible", the script changes "visibility" to "hidden". This then reveals the "answer" image in the background. Likewise, if the "visibility" parameter is set to "hidden", the script changes it to "visible". That operation brings the "question" image to the foreground and hides the "answer" image.

There is a little bit of a Firefox issue. After several selections on the same image, the "question" image is grayed out. It appears to be a "focus" issue. It still operates. If you click to focus somewhere else on the page, or on another image, the gray goes away and the image is restored. I may continue to look at that problem.

There are other ways of doing this, but this was the simplest I could think of. Other methods required large arrays of images and variables. The script would then have to determine which table cell you were clicking in, check the cell state (answer/question), and then adjust the image content.

Browser: FIrefox

OS: Solaris, Redhat, Fedora, Suse

I have just scanned your message, and I know it will take me a while to comprehend all of the "super" information you provided, but I did look at the corkboard test page that you made and all I can say is "WOW! You are simply amazing, and DO YOU WANT TO BE MY BEST FRIEND FOR LIFE?" Thank you SOOOOOOOOO much! I can't wait to try this out myself! I know I will have questions later as I try to put the instructions you gave me into action. I can only hope you will be available at that time. Thank you so much for your help. You are truly a lifesaver!

-Jenn

Browser: IE, firefox

OS: Windows Vista

Hello Philo!

I tried your example and instructions out on a test page that I made. It is www.brainiac.mmt111.com/test4.html. I must have done something wrong, because it didn't work for me. The following 2 steps is what I could make out from your instructions and source code that I was supposed to do:

1. In-put the javascript (hide/show) code into the heading section of my webpage.

2. Change the code for each image to relate to the hide/show code.

I tried to accomplish these 2 steps using only the 1st image in the table. If you will, please take a look at what I did, and please tell me if you see something simple that I did wrong that can be fixed for this first image.

In addition, I did see that you had changed your code up quite a bit, placing a lot of code in the heading instead of within each individual item, yet, I did not try to do that to my test page, as I get so confused when it comes to code in the first place. However, I am trying to learn as much as I can. Thank you for any help/advice/suggestions you can offer.

-Jennifer

Browser: IE8 and Mozilla Firefox

OS: Windows Vista

Well, I actually was just now able to make this source code work for me. Thank you so much for your help. I really do appreciate it. I see all I had to do was copy your code and insert it into my webpage, then change only a small amount of things. I am in awe of how much you know and even moreso the time you took to help me. Thank you so much.

Browser: IE8 and Mozilla Firefox

OS: Windows Vista

I have completed my page successfully, thanks to all of your help, Philo. Thank you so much! I seriously doubt I would have accomplished it without your help.

See the completed page on:
www.brainiac.mmt111.com/corkboard.html

Browser: IE8 and Mozilla Firefox

OS: Windows Vista

Hello! I am back to work on this "hide_show" page again and I have a question that I hope you can answer.

After taking the code and making some minor changes I was able to make this page look exactly like I wanted it. I decided I wanted the table centered on the page and managed to get it to look like this; however, it only looks like I want it to on M.Firefox. It is totally off-centered on Internet Explorer. I am wondering if you have a fix for this. Thanks so very much for any help you can offer.

Browser: IE8 and Mozilla Firefox

OS: Windows Vista

This page I am working on is now located at:
http://brainiac.mmt111.com/corkboard.html

Browser: IE8 and Mozilla Firefox

OS: Windows Vista

Please disregard my previous question. I have figured this out now. Thank you.

-Jenn

Browser: IE8 and Mozilla Firefox

OS: Windows Vista