[arclight]

Hello-

I'm designing a site for a stone supplier and I'm having a little trouble figuring out a basic problem. I would like to swap out an image (actually 47 images) via a text link WITHOUT reloading the page. I just don't want to create more pages when I know this can be done with either CSS, DHTML, or PHP. I'm up to speed on HTML and CSS for fonts and leading. I'm not up to speed on dynamic content though. I don't want to preload any of the images for obvious speed reasons. Should I use a layer and target it? I've never used layers before and wasn't sure about their compatability. Any help in figuring it out would be greatly appreciated.

Here is the page in question here . You can see the menu on the left, I want to swap out the image on the right via those hyperlinks-

somebody school me please-

[registered_user]

In your html, where you call the image on the right

Code:
<img src="images/inventory_03.jpg" width="481" height="251" alt="">

add a name attribute like so:

Code:
<img src="images/inventory_03.jpg" width="481" height="251" alt="" name="myNameisAwesome">

Then, add a little javascript to your hyperlink:

Code:
<a href="#" onClick="window.document.myNameisAwesome.src='inventory_X.jpg'; return false;">

Where 'inventory_X.jpg' is the name of the image to be swapped in. Also, you can substitute any name you'd like for 'myNameisAwesome' too. The 'return false' bit prevents browsers from reloading the page.

[Chris O'Brien]

window.document.myNameisAwesome.src

Bleh. Isn't that only an MSIE thing? I'd go for giving the element an ID and using

Code:
document.getElementById("whateverID").src

since it's much more standards based an nice

Anyhoo, in regards to the question, make a wee function like

Code:
function swapImage(what) {

    document.getElementById("imageName").src = what;

}

and then have

Code:
<a href="whatever.html" onmouseover="swapImage('hello.jpg')"> hi</a>

as it reduces your markup a bit...

There's obviously loads of ways of refining this for your needs...

[registered_user]

Originally posted by Black Book:
Bleh. Isn't that only an MSIE thing? I'd go for giving the element an ID and using
… since it's much more standards based an nice

Very true, your example is more inline with w3c's standard.

But I bet the other way will probably cause less grief for someone who isn't very familiar with javascript.

[cowerd]

don't want to seem to pissy here, but isn't there a way of categorizing the stone categories so a user doesn't have to browse through 47 names to find what they want?

thumbnails perhaps or at least an outline?

[arclight]

Hello again-

Thanks to all who responded. Both worked great, I feel like an idiot since it was so simple! You guys are quick to respond!

As for the outline/layout question: Man I hear ya! This client has been difficult to work with every step of the way. I had broken down the stone by type and mocked up thumbnail pages but they are already have a brochure where the stone is listed by number! I became tired of persuading them to change their mind and figured I would show them the two side by side. Thanks for being pissy