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:

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
  • 342 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short note: was right to suggest swapping the displayed image rather than injecting HTML into a div — that keeps things simple and avoids the quoting/escaping headache you hit in your original onclick string. ’s point about where the clickable element lives is also useful: thumbnails need to reference the image they should show. Below is a lightweight, maintainable pattern you can use instead of inline onclicks.

Example markup and unobtrusive script (put the script in a separate file or at the end of the page):

<a href="images/large1.jpg" class="thumb" data-large="images/large1.jpg">
  <img src="images/thumb1.jpg" alt="thumb 1">
</a>

<div id="sobre">
  <img id="mainPhoto" src="images/placeholder.jpg" alt="Main photo">
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('a.thumb').forEach(function (t) {
    t.addEventListener('click', function (ev) {
      ev.preventDefault();
      var large = t.getAttribute('data-large');
      document.querySelector('#mainPhoto').setAttribute('src', large);
    });
  });
});
</script>

Troubleshooting checklist if swapping still fails: confirm the target image element exists and has the correct id, open the browser console for JavaScript errors, and verify the image path actually loads (enter it in the address bar or watch the Network tab for 404s). Avoid spaces in filenames (rename to hyphens or underscores) because servers are case-sensitive and spaces can break URLs unless encoded. For smoother UX, preload large images with a tiny script or keep the anchor href pointing to the large file so users without JavaScript can still open the image.

Small extras: always include descriptive alt text, keep JavaScript out of HTML attributes for easier maintenance, and consider debouncing or transitions if you add effects. This keeps the solution robust and easy to extend.

Recommended Answers

All 7 Replies

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.