Member Avatar for 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

  • 3 Contributors
  • 7 Replies
  • 329 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for 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

Member Avatar for 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

Edited by almostbob because: n/a
Member Avatar for 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").. =/

Member Avatar for 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..

Member Avatar for 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

Edited by almostbob because: n/a
Member Avatar for alyssajones

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.