Hi all,
I have a new website that has a portfolio page. Currently, the code is such:
<input type="image" src="_images/01.png" id="01" alt=""
onclick="document.getElementById('outputDiv').innerHTML =
'<section class=gallery><img src=_images/img01.jpg>' +
'<p>Image name - by Photographer</p></section>';" />
This seems extremely cumbersome and is impractical for a site that could have many images on several pages since the above code was for just one image. I would like to have a function that looked at the thumbnail image id and took that id number and placed it in an outputDiv text string as such:
function ShowImg()
{
var img;
img = document.getElementById('').value;
document.getElementById('outputDiv').innerHTML =
'<img src=_images/img' + img + '.jpg>';
}
IN BODY:
<input type="image" src="_images/01.png" id="01" alt="" onclick="ShowImg()" />
So, how do I get past the fact that each id is different? A friend suggested using an if statement, but that doesn't make sense to me. I thought about an array, but I would rather not have to go and update the array everytime I add/substract images from the gallery. I would just like to be able to look at the id value and pop it into a text string.
Thoughts?