To achieve this functionality, implementing some Javascript is necessary. You can experiment with a code structure like the following:
Here's a pseudo representation in HTML:
<img src="..." class="img1 clickImage">
<img src="..." class="img2 clickImage">
<div class="imageTitles">
<div class="img1 imgTitle">TITLETEXT</div>
<div class="img2 imgTitle">TITLETEXT</div>
</div>
<div class="imageInformations">
<div class="img1 imgInformation">INFORMATION img1</div>
<div class="img2 imgInformation">INFORMATION img2</div>
</div>
Here's an example of how you may use jQuery for this purpose:
jQuery('.clickImage').on('click', function() {
var imgNumber = jQuery(this).getClass().replace('clickImage', '');
jQuery('imageTitles .imgTitle').hide(); // hide all image Titles
jQuery('imageTitles .imgTitle.' + imgNumber).show(); // show title corresponding to the clicked image
// Repeat the same steps for imgInformation
});
This implementation is a bit rough, but it should guide you on what needs to be done.
EDIT:
Updated code snippet as follows:
HTML:
<img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="img1 clickImage">
<img src="http://media.tumblr.com/tumblr_mcf11pk4nj1ru82ue.jpg" class="img2 clickImage">
<div id="page-wrap">
<div class="imageTitles">
<div class="img1 imgTitle">TITLETEXT</div>
<div class="img2 imgTitle">TITLETEXT</div>
</div>
<div class="imageInformations">
<div class="img1 imgInformation">INFORMATION img1</div>
<div class="img2 imgInformation">INFORMATION img2</div>
</div>
</div>
Javascript:
jQuery('.imageTitles .imgTitle').hide();
jQuery('.imageInformations .imgInformation').hide();
jQuery('.clickImage').on('click', function () {
var imgNumber = jQuery(this).attr("class").replace('clickImage', '');
jQuery('.imageTitles .imgTitle').hide(); // hide all image Titles
jQuery('.imageTitles .imgTitle.' + imgNumber).show(); // display the relevant title (e.g., img1)
jQuery('.imageInformations .imgInformation').hide();
jQuery('.imageInformations .imgInformation.' + imgNumber).show();
});