Haxxy;1252827 wrote:How can I change a div's content on image click?
I want to have an image grid and when i click on one of those images, a specific div to change.
Two questions:
1. Are the image group at the bottom the "image grid" you wish to click on?
2. When clicked, what is the <div> supposed to be changed to? Hidden to visible? Contents display from what to what?
I guess I'm still unclear of the concept of which you are trying to create, so this is just a SWAG at a template to change as needed.
I reduced the size of the top <div>'s for testing purposes only. Your display ran off the edge of my screen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load Content On Image Click</title>
<style type="text/css">
#content0, #content1, #content2, #content3 {
position: relative;
/* width: 560px; height: 315px; final display size */
width: 230px; height: 157px; /* for testing purposes */
z-index: 1;
background-color: #888; /* #000000; */
margin: auto;
}
#images {
position: relative;
width: 300px;
height: 70px;
z-index: 2;
top: 50px;
margin: auto;
}
#image0, #image1, #image2, #image3 {
z-index: 1;
background-color: #000000;
display:inline;
}
</style>
</head>
<body>
<form id="myForm" action="" method="post" onsubmit="return false">
<div id="content0">div 1 contents</div>
<div id="content1">div 2 contents</div>
<div id="content2">div 3 contents</div>
<div id="content3">div 4 contents</div>
<div id="images">
<img id="image0" src="" height="70px" width="70px" />
<img id="image1" src="" height="70px" width="70px" />
<img id="image2" src="" height="70px" width="70px" />
<img id="image3" src="" height="70px" width="70px" />
</div>
</form>
<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?273795-Div-content-change-on-image-click&p=1252843#post1252843
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = ['11.jpg','12.jpg','13.jpg','14.jpg'];
window.onload = function() {
var sel = document.getElementById('images').getElementsByTagName('img');
for (var i=0; i<imgList.length; i++) {
sel[i].src = baseURL+imgList[i];
sel[i].onclick = function() {
var info = this.id;
info = 'content'+info.charAt(info.length-1);
document.getElementById(info).innerHTML += ' has been changed';
}
}
}
</script>
</body>
</html>
