Question

http://jsfiddle.net/xDaL8/6/ is where it’s being held. I have four divs, one position on the right which is the menu links and on the left 3 divs in this order top to bottom is image, content and view more. The “view more” needs to have the same link for whichever on the right side link was hovered over because once point leaves link the left side content stays active so the view more for that particular links needs to have the same link address as that particular link on the right. Hope that was not that confusing.

`$(document).ready(function() {

    var defaultText  = '.description';
    $("#MenuBar1 li").mouseover(function() {
        $("#back").attr("src", $(this).data("img"));
        defaultText = $(".description").html();
        $(".description").html($(this).data("description"));
    }).mouseout(function() {
        $("#back").attr("src", $("#back").data("original"));
        $(".description").html(defaultText);
});​   <div>
<div style="width: 377px; position:relative; left: 395px;">
    <ul id="MenuBar1" class="MenuBarHorizontal">
        <div style="height:20px;">
            <li id="button1" data-img="http://http://demo/images/anne.jpg" width="357" height="241" border="0" data-description="Demo Images Description">
                <a href="#">Anywhere</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button2" data-img="http://demo/images/Banner.jpg"  data-description="Banner Description" >
                <a href="#">ware</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button3" data-img="http://demo/images/Banner.jpg"  data-description="Demand Description" >
                <a href="#">Demand</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button4" data-img="http:http://demo/images/Bans.jpg"  data-description="CMO Description" >
                <a href="#">CM</a>
            </li>
        </div>
        <div style="height:20px;">
            <li id="button5" data-img="http://demo/images/eat.jpg"  data-description="Key Description" >
                <a href="#">Key</a>
            </li>
        </div>

    </ul>
</div>
<div style="width: 357px; position: relative; top: -380px;" id="content"> 
    <img id="back"src="http://demo/images/Banner.jpg"data-original="http://demo/images/Banner.jpg" alt="e.s.t" /> 
</div>

put text content here for each hover
​`

Answer 1

Check out the updated fiddle.

Assuming I understand what you want to do correctly here’s the updated code:

Updated HTML:

<div>
  <div style="width: 377px; position:relative; left: 395px;">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <div style="height:20px;">
        <li id="button1" data-img="http://http://demo/images/anne.jpg" width="357" height="241" border="0" data-description="Demo Images Description" data-link="http://www.google.com">
          <a href="#">Anywhere</a>
        </li>
      </div>
      <div style="height:20px;">
        <li id="button2" data-img="http://demo/images/Banner.jpg"  data-description="Banner Description" data-link="http://www.yahoo.com">
          <a href="#">ware</a>
        </li>
      </div>
      <div style="height:20px;">
        <li id="button5" data-img="http://demo/images/eat.jpg"  data-description="Key Description" data-link="http://www.bing.com">
          <a href="#">Key</a>
        </li>
      </div>
    </ul>
  </div>
  <div style="width: 357px; position: relative; top: -380px;" id="content"> 
    <img id="back"src="http://demo/images/Banner.jpg"data-original="http://demo/images/Banner.jpg" alt="e.s.t" /> 
  </div>
  <div class="description" id="Text">put text content here for each hover</div>  
  <div> 
    <a href="#" id="view_more_link" style="color: #000">View More&gt;&gt;</a> </div>
  </div>​
</div>

The updated javascript:

$(document).ready(function() {

    var defaultText = $(".description").html();
    $("#MenuBar1 li").mouseover(function() {
        $("#back").attr("src", $(this).data("img"));
        defaultText = $(".description").html();
        $(".description").html($(this).data("description"));
        $('#view_more_link').prop('href', $(this).data("link"));
    }).mouseout(function() {
        $("#back").attr("src", $("#back").data("original"));
        $(".description").html(defaultText);
    });

});
​

You were on the right track putting the description in a data property on your list items. I just did the same thing by adding a data-link property to the list item and then binding that property to the “View More” link’s href property.