Links that affects only a part of a page.

hello.

I'm not too sure How I could phrase this in it's correct terms, but here is my situation.

I'm doing a website for a dealer that deals with products for corporate gifts and goods. such as t shirts, Caps, Mugs, etc.

Here's what I have in mind...

As any user click on a product in the product panel as shown below, the Product details panel will immediately change with the given product information such as size, price etc etc.

Instead of linking it to a whole new page just like what HTML usually does.
This saves time and has a better user experience.

I'm using Joomla! to build the site btw. any methods of doing this will be much appreciated.

 

So you want something like the way pictures are handled on eBay?

That requires JavaScript

 

yes. true. is there a standard phrase or term for this? is very hard to do research and start goggling it since that I don't know what's the proper term for it.

or are there sites that may help me out?

thank you.

 

I simple way of doing this would be to create a div that is going to hold the product data and give it an ID of "product_info". Then store all the product data in an array (or variables). Then you can put a function in like this:

HTML:

<script type='text/javascript'>

function changeInfo(arrKey) {
document.getElementById("product_info").innerHTML = info_arr[arrKey];
return true;
}

</script>

On the link for each product make it point to '#' and insert an onclick event to point to changeInfo with the numeric key of the array that holds the description. This will basically swap the HTML inside the div for that of the individual products.

I haven't explained it particualarly well, but hopefully you'll understand what I mean

 

I have a base understanding of what you mean. But I'm not too sure about the details as I have no java scripting knowledge at all. I only dealt with actionscript for Flash.

where do i insert the array or variables? I assume it's written it in a separate file, (like an Action Script Class file)
and somehow is directed from the Java script code in the page itself?

is there a website that you would recommend me for further details? would love to learn more.

thank you.

 

There's a useful looking site here about changing the inner HTML of a div. Unlike in the examples there, in my example I said to call a function in the onClick event, to make it much more efficient. The array could be stored directly in the HTML file (which would be useful because it could be generated as the output of the PHP/ASP file. You can read more about Javascipt arrays on the W3Schools site.

So your array decaration would look like this:

Code:

var products = new array();
products[0] = "Info about the first product. This can include HTML tags";
products[1] = "Info about the second product.";

I hope that explains it a bit more, but if you need any more help with code just ask