Question

I can think of various solutions , like creating 3 different HTML documents each having different image and linking these HTML files to the Menu in which I want to change the image .

I know it is possible by jquery , I just need some help in understand so that I can achieve this .

Answer 1

May be you’re looking for something like this (See DEMO):

HTML

​<div class="menu">
  <a href="#" data-image-src="1.jpg">link 1</a>
  <a href="#" data-image-src="2.jpg">link 2</a>
  <a href="#" data-image-src="3.jpg">link 3</a>
  <a href="#" data-image-src="4.jpg">link 4</a>
  <a href="#" data-image-src="5.jpg">link 5</a>
</div>

​<div id="container">
  <img src="">
</div>​

JavaScript

​$(document).ready(function () {
    $('.menu a').hover(function () {
        $('#container img').attr('src', $(this).data('image-src'));
    });
});​

In this code you place source of image which should be shown when you hover over the link in data attribute in the link. And when you hover over the link it calls callback in which current source of image changes.

UPDATED

See DEMO