Changing images

I'm trying to change a image in a box on my page whit just pressing a link on another place on the page. I want it to work like this.. say i want information about something. Then i press a link about a special topic, the information is loaded inside a main content <div id="main">. But the thing i want also to happen is that a picture that is related to the main content is loaded inside another <div id="picture"> element. Have searched the web for info about this, but cant find anything. Do anyone inside here have a clue how to do it.
I tryed this:

<script language="JavaScript" type="text/JavaScript>
if ( image != ""){
document.write("<img src="pathtopic/" +image +".jpg" />");
}
else {
document.write("<img src="pathtopic/no-life.jpg">");
}
</script>

the image variable is a variable used by the whole index.php file inside a form, that is also a javascript. And the document in question is image.html, and it only contain a <img src.........../>. Why dont this work?

I also tryed a php script:
<?php
if ($_POST["image"]== "" )
{
print("<img src=\"no-life.jpg\" alt=\"no-life\" width=\"100%\" />");
}
else
{
$tmp = "pathtopic/{$_POST["image"]}.jpg";
print("<img src=\"$tmp\" alt=\"no picture\" width=\"50%\" />");
}
?>
But that only loads the alt attribute, when i print the $tmp var it displays the whole path and filname, but picture doesnt load.

1. document.write is not a dynamic method. Use DOM instead
2. you need a function which is to be fired by a handler event (let's say onclick)

<script language="JavaScript" type="text/JavaScript>
function switchImages(image){
var picurl='no-life.jpg';
if (image != ""){url=image;}
document.getElementById('picture').getElementsByTagName('img')[0].setAttribute('src',picurl);
}
</script>