jquery hover a div and display image on another di

Question

OK javascript newbie here, I want help!

Here is the design that explains better the situation.

My JSFiddle Here

My Code:

<div class="design">
<div class="menu">5 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in effect like shooting.
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
    <li class="menu-item"> <a href="#">menu option</a>
    </li>
</div>
<div class="zoom-preview">image will appear here when we hover at each link at the left. each link it's own image. Also there must be a default image here when we do not hover at any link at the left.</div>
<div class="clear"></div>

All I want to do is when we enter the page there will be a default image at right. But when we hover at each link at the left, the image on the right will be replaced with another image, with a fast zoom effect like shooting for example.

When no link is hovered the default image will be again displayed.

Please some help with the javascript code.. Thanks!

Answer 1

JSFiddle: http://jsfiddle.net/r6ywtk6u/

You will need to put a source for the images

Jquery:

$("a").hover(function(){
    $(".zoom-preview").html($(this).html());
  },
  function() {
    $( ".zoom-preview" ).html( "image will appear here when we hover at each link at the left. each link it's own image. Also there must be a default image here when we do not hover at any link at the left." );
  });

HTML:

<div class="design">
<div class="menu">5 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in effect like shooting.
           <li class="menu-item">
               <a href="#"><img alt="foo"/></a></li>
           <li class="menu-item">
       <a href="#"><img alt="bar"/></a></li>
          <li class="menu-item">
       <a href="#"><img alt="bam"/></a></li>
          <li class="menu-item">
       <a href="#"><img alt="baz"/></a></li>
          <li class="menu-item">
       <a href="#"><img alt="quux"/></a></li>
       </div>
       <div class="zoom-preview"> 
       original content
       </div>
       <div class="clear"></div>
       </div>

on hover enter, you take the html inside the link and put it in the display box. when it leaves, you put the original content back.

Answer 2

Here is a quick demo that will get you started:

Demo:jsFiddle

As you can see I'm using a list with data attributes to set which image should be displayed ( <li data-image='image.jpg'><a ...></a></li>) - the rest is handled by JS.

To control the behavior change the variables value as needed:

var imageContainer = '.img_container', //selector of the image container
    imageList      = '.hoverimage',     //selector of the image list
    maxWidth       = 'parent',          //parent or specific CSS width. 
    defImage       = 'image_to_display.jpg';