inner.HTML

[kriscons]

Hi all,

I am retrieving data form a database and displaying an image on screen (for clothing products). Each item of clothing has an image and where items have more than one colour, I display the coloured links.

I want to be able to click the link and by using inner.HTML I want the image to change (i.e. to show the relevant colour).

At the moment, I am using this:

<div id=\"collink\" onclick=\"document.getElementById('productimagebox').innerHTML='$imageref'\"><p>$colour</p></div>

This currently changes the DIV and displays the file path of the image but I need it to show the image itself using this bit of code:

<img src=\"$imageref\" " . imageResize($resizedimg[0], $resizedimg[1], 328) . " />

When I put them togethe, it fails and displays "'> on my screen where my links should be.

Can anyone advise please?

Thanks
Kris

[jscheuer1]

It is unclear what the full context of this is. But, if the first snippet from your post is from a script then either:

<div id=\"collink\" onclick=\"document.getElementById('productimagebox').innerHTML='<img src=\"$imageref\" \" . imageResize($resizedimg[0], $resizedimg[1], 328) . \" />'\"><p>$colour</p></div>

or:

<div id=\"collink\" onclick=\"document.getElementById('productimagebox').innerHTML='<img src=\\"$imageref\\" \" . imageResize($resizedimg[0], $resizedimg[1], 328) . \" />'\"><p>$colour</p></div>

may do the trick. It would be better to access the the src attribute of the image tag directly, leaving innerHTML to handle only the content of the <p> tag but, that would require those two tags to have either unique id's or guaranteed position in the markup inside an element which has a known id.