Link in one div changing img in another div

[alyssajones]

I know it probably exist some thread talking about it, but each one I've read wasn't quite what I needed.

here is the link to my portfolio site: http://www.talitaemmanuela.com/memine.html

I wanted to make links in the left img (with the tool map in Dreamweaver i suppose) and when I click there it appears or change the img in the div of the right!

Ive tried to do so with the on click of javascript like this: <a href="#" onclick="document.getElementById('sobre').innerHTML = '<p><img src="content/myspace/photo.jpg"/></p>';return false;"><img src="content/my space/mosaico_imgs.jpg" border="0" style="margin-top:38px;" /></a> This attempt failed because of the "" in the img (in red). Javascript read until ...photo.jpg", leaving ';return false;"> as if it was a text... It worked when i put just text inside <p>.

I hope you understood what i mean, and i hope a bright soul can help!!

thanx

[JugglerDrummer]

You've got the js hooked up all right, its just that the image isn't in that <a> in the code of your site. If you move the image into it, you should get the desired effect. ;D

[almostbob]

overly complicated
images have src directly accessible

<a href="#" onclick="document.getElementById('IMAGEIWANTTOCHANGE').src='content/myspace/photo.jpg';return false;"><img src="content/my space/mosaico_imgs.jpg" border="0" style="margin-top:38px;" /></a>
<!-- or -->
<img onclick="document.getElementById('IMAGEIWANTTOCHANGE').src='content/myspace/photo.jpg';" src="content/my space/mosaico_imgs.jpg" border="0" style="margin-top:38px;" />

changing the inner html of another element seems unneccessary

[alyssajones]

overly complicated
images have src directly accessible

<a href="#" onclick="document.getElementById('IMAGEIWANTTOCHANGE').src='content/myspace/photo.jpg';return false;"><img src="content/my space/mosaico_imgs.jpg" border="0" style="margin-top:38px;" /></a>
<!-- or -->
<img onclick="document.getElementById('IMAGEIWANTTOCHANGE').src='content/myspace/photo.jpg';" src="content/my space/mosaico_imgs.jpg" border="0" style="margin-top:38px;" />

changing the inner html of another element seems unneccessary

This seems like a good solution, the problem is that i dont understand js, so what should be IMAGEIWANTTOCHANGE??
i guessed it would be something like this ('content/my space/mosaico_imgs2.jpg').. but it didnt work.. and even so, it wouldnt have one single img to change, each time it have to replace the previous img. Plus its to change the content in another div(div "sobre").. =/

[alyssajones]

You've got the js hooked up all right, its just that the image isn't in that <a> in the code of your site. If you move the image into it, you should get the desired effect. ;D

in the site theres not even <a> next to the img because i dont want it to work badly.. but ive tried already and it dont work..

[almostbob]

<a href="#" onclick="document.getElementById('IMAGEIWANTTOCHANGE').src='content/myspace/photo.jpg';return false;"><img src="content/my space/mosaico_imgs.jpg" border="0" style="margin-top:38px;" /></a>
<!--any number of images can be linked to change the displayed image -->
<!-- or -->
<img onclick="document.getElementById('IMAGEIWANTTOCHANGE').src='content/myspace/photo.jpg';" src="content/my space/mosaico_imgs.jpg" border="0" style="margin-top:38px;" />
<!---->
<div id='sobre'> <!-- this id is irrelevant for this code-->
<img id='IMAGEIWANTTOCHANGE' src='whatever.jpg' />
</div>

onclick the image with the id IMAGEIWANTTOCHANGE will change

[alyssajones]

It worked!!!!!!!!!!!!!!! thank you so much, you where the first to put at least a little little bit of javascript in my head!

[almostbob]

w3c javascript tut. basic but its good http://www.w3schools.com/JS/default.asp
and the code samples are portable you can put them in anything