CodePen

HTML

            
              <img src="http://tomroof.com/tinymonster/wp-content/uploads/2013/02/pic1.png" id="img1" alt="img1"/>
  <img src="http://tomroof.com/tinymonster/wp-content/uploads/2013/02/pic2.png" id="img2" alt="img2"/>
  <img src="http://tomroof.com/tinymonster/wp-content/uploads/2013/02/pic3.png" id="img3" alt="img3"/>


<div id="aum"></div>

<div>Another Div that shouldn't change</div>
            
          
!
via HTML Inspector

CSS

            
              * { margin:0;padding:0; }
body { background:#E9EEF5; }

ul {
  list-style-type:none;
  width:900px;
  margin:10px auto 0;
}

li {
  margin:0 10px;
  display:inline-block;
}

div {
  font:20pt 'Georgia';
  height:50px;
  width:674px;
  margin:20px auto 0;
  text-align:center;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#img1').click(function() {
  $('#aum').html('Text 1');
});

$('#img2').click(function() {
  $('#aum').html('Text 2');
});


$('#img3').click(function() {
  $('#aum').html('Text 3');
});
  
/** --OR-- you could get the images alt attribute and print that out 

$('#aardvark').click(function() {
  var alt = $(this).attr('alt');
  $('div').html(alt);
});
**/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................