www.webdeveloper.com
Results 1 to 11 of 11

Thread: Div content change on image click

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    4

    Div content change on image click

    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.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    Quote Originally Posted by Haxxy View Post
    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.
    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.

  3. #3
    Join Date
    Feb 2013
    Posts
    4
    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.

    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>
    Thank you in advance.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377
    Quote Originally Posted by Haxxy View Post
    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.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Quote Originally Posted by Haxxy View Post
    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.
    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>

  6. #6
    Join Date
    Feb 2013
    Posts
    4
    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

  7. #7
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    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>

  8. #8
    Join Date
    Feb 2013
    Posts
    4
    Thanks a lot.

    One more question: how can i change which div to show first?

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    Quote Originally Posted by Haxxy View Post
    Thanks a lot.

    One more question: how can i change which div to show first?
    Easiest way would be to change...
    Code:
        <div class="stuff" id="content1">
    
    ... and ...
    
        <div class="hide stuff" id="content4">
    Also, could shorten the code a bit with this...
    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:
    		}
    	}
    Last edited by JMRKER; 03-08-2013 at 02:58 PM.

  10. #10
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    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 )

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Thumbs up

    Quote Originally Posted by grumpyOleMan View Post
    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.

    Alterations were more observations than recommendations.
    It's your code (thank you) so OP can do as he/she pleases.
    My particular philosophy is that fewer words are easier to comprehend
    than (almost) redundant code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles