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.
Printable View
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.
It would be helpful if you could provide a link to a sample of the images you wish to use.Quote:
Originally Posted by Haxxy
Also, the HTML layout should be easy for you to provide so we could show you where to place the JS controls.
We want to be helpful, but we don't wish to take the time to develop and implement your projects for you.
Sorry about that. So, i have the following: "content4" to be the main, and the other 3 (number 3,2,1) to be available on image click. In these contents, i want to put youtube embeded and some html buttons.
Thank you in advance.HTML Code:<!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">
#content1 {
position: relative;
width: 560px;
height: 315px;
z-index: 1;
background-color: #000000;
margin: auto;
}
#content2 {
position: relative;
width: 560px;
height: 315px;
z-index: 1;
background-color: #000000;
margin: auto;
}
#content3 {
position: relative;
width: 560px;
height: 315px;
z-index: 1;
background-color: #000000;
margin: auto;
}
#content4 {
position: relative;
width: 560px;
height: 315px;
z-index: 1;
background-color: #000000;
margin: auto;
}
#images {
position: relative;
width: 300px;
height: 70px;
z-index: 2;
top: 50px;
margin: auto;
}
#image1 {
position: absolute;
width: 70px;
height: 70px;
z-index: 1;
background-color: #000000;
}
#image2 {
position: absolute;
width: 70px;
height: 70px;
z-index: 1;
background-color: #000000;
left: 75px;
}
#image3 {
position: absolute;
width: 70px;
height: 70px;
z-index: 1;
background-color: #000000;
left: 150px;
}
#image4 {
position: absolute;
width: 70px;
height: 70px;
z-index: 1;
background-color: #000000;
left: 230px;
}
</style>
</head>
<body>
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
<div id="images">
<div id="image1"><a href="content1"><img src="image1.jpg" width="70" height="70" /></a></div>
<div id="image2"><a href="content2"><img src="image2.jpg" width="70" height="70" /></a></div>
<div id="image3"><a href="content3"><img src="image3.jpg" width="70" height="70" /></a></div>
<div id="image4"><a href="content4"><img src="image4.jpg" width="70" height="70" /></a></div>
</div>
</body>
</html>
Two questions:Quote:
Originally Posted by Haxxy
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.
Two questions:Quote:
Originally Posted by Haxxy
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.
Code:<!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>
it's exactly like this(http://www.impressivewebs.com/demo-f...tent-switcher/), but instead of the numbered grid, i want images. And in the content area I want to be able to put an image and an iframe youtube video
maybe this will be OK
Note though I have changed your original to remove the redundancy.
Code:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>swap divs</title>
<style>
.wrap{width:600px;margin:2em auto;padding-top:0.5em;background-color:pink;}
.stuff{width:500px;height:500px;background-color:lime;margin:1em auto;padding:1em;}
.hide{display:none;}
.ctr{text-align:center;}
</style>
<script>
var divs = (function () {
var images, cont1, cont2, cont3, cont4;
function getTargetDiv(evt) {
evt = evt || window.event;
return evt.target || evt.srcElement;
}
function showem(evt) {
var me = getTargetDiv(evt);
switch (me.id) {
case 'one':
cont1.classList.remove('hide');
if (!cont2.classList.contains('hide')) {
cont2.classList.add('hide');
}
if (!cont3.classList.contains('hide')) {
cont3.classList.add('hide');
}
if (!cont4.classList.contains('hide')) {
cont4.classList.add('hide');
}
break;
case 'two':
cont2.classList.remove('hide');
if (!cont1.classList.contains('hide')) {
cont1.classList.add('hide');
}
if (!cont3.classList.contains('hide')) {
cont3.classList.add('hide');
}
if (!cont4.classList.contains('hide')) {
cont4.classList.add('hide');
}
break;
case 'three':
cont3.classList.remove('hide');
if (!cont2.classList.contains('hide')) {
cont2.classList.add('hide');
}
if (!cont1.classList.contains('hide')) {
cont1.classList.add('hide');
}
if (!cont4.classList.contains('hide')) {
cont4.classList.add('hide');
}
break;
case 'four':
cont4.classList.remove('hide');
if (!cont2.classList.contains('hide')) {
cont2.classList.add('hide');
}
if (!cont3.classList.contains('hide')) {
cont3.classList.add('hide');
}
if (!cont1.classList.contains('hide')) {
cont1.classList.add('hide');
}
break;
default:
}
}
function init() {
images = document.getElementById('images');
images.addEventListener('click', showem, false);
cont1 = document.getElementById('content1');
cont2 = document.getElementById('content2');
cont3 = document.getElementById('content3');
cont4 = document.getElementById('content4');
}
return {
start: init
};
}());
window.onload = divs.start;
</script>
</head>
<body>
<div class="wrap">
<div class="hide stuff" id="content1">
<h1>Header stuff for div 1</h1>
<h3>Hidden originally</h3>
<p>Add what you like in this div here</p>
<img src="http://lorempixel.com/500/300/food/10" alt='c1' />
</div>
<div class="hide stuff" id="content2">
<h1>Header stuff for div 2</h1>
<h3>Hidden originally</h3>
<p>Add what you like in this div here</p>
<img src="http://lorempixel.com/500/300/food/9" alt='c2' />
</div>
<div class="hide stuff" id="content3">
<h1>Header stuff for div 3</h1>
<h3>Hidden originally</h3>
<p>Add what you like in this div here</p>
<p>Putting a heap of hidden divs into a web page and having them appear at will sounds impressive in theory but in practice can be a pain for the user.</p><p>Depending on the content of each div, the page may take forever to load causing concern for the user. You the developer can tolerate anything with your work but always think of the end user.</p>
<img src="http://lorempixel.com/200/200/animals" alt='c2' />
</div>
<div class="stuff" id="content4">
<h1>Header stuff for div 4</h1>
<h3>Displayed on start up</h3>
<p>Add what you like in this div here</p>
<img src="http://lorempixel.com/500/300/food/5" alt='c4' />
</div>
<div class="ctr" id="images">
<img id="one" src="http://lorempixel.com/70/70/sports/1" alt='click 1' />
<img id="two" src="http://lorempixel.com/70/70/sports/2" alt='click 2' />
<img id="three" src="http://lorempixel.com/70/70/sports/3" alt='click 3' />
<img id="four" src="http://lorempixel.com/70/70/sports/4" alt='click 4' />
</div>
</div>
</body>
</html>
Thanks a lot.
One more question: how can i change which div to show first?
Easiest way would be to change...Quote:
Originally Posted by Haxxy
Also, could shorten the code a bit with this...Code:<div class="stuff" id="content1">
... and ...
<div class="hide stuff" id="content4">
Code:function showem(evt) {
if (!cont1.classList.contains('hide')) { cont1.classList.add('hide'); }
if (!cont2.classList.contains('hide')) { cont2.classList.add('hide'); }
if (!cont3.classList.contains('hide')) { cont3.classList.add('hide'); }
if (!cont4.classList.contains('hide')) { cont4.classList.add('hide'); }
var me = getTargetDiv(evt);
switch (me.id) {
case 'one': cont1.classList.remove('hide'); break;
case 'two': cont2.classList.remove('hide'); break;
case 'three': cont3.classList.remove('hide'); break;
case 'four': cont4.classList.remove('hide'); break;
default:
}
}
Thanks JMRKER.
I was going to ask him if he had actually looked at the source because as you can see it was very obvious. (well I thought so)
as for the alterations there can be many ways to improve things but my excuse is to make it readable for other to learn the basics. (and I am sticken to that:) )
You're welcome.Quote:
Originally Posted by grumpyOleMan
Alterations were more observations than recommendations.:D
It's your code (thank you) so OP can do as he/she pleases.:eek:
My particular philosophy is that fewer words are easier to comprehend
than (almost) redundant code.:o
