Question

I made the mouse hover animate, when I move the mouse over the link it will show the image and when I move the mouse to another link the previous image have to disappear and show another image that belong to another link.

        <style>
         .imgHover {
         display: inline;
         position: relative;
         }
       .hover {
       display: none;
        position: absolute;

        z-index: 2;
        }
      </style>



 <script type="text/javascript">
  $(function() {
     $(".imgHover").hover(
    function() {
        $(this).children("img").fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
    },
    function() {
        $(this).children("img").fadeTo(200, 1).end().children(".hover").fadeOut(100)();
    });
    });</script>


   <a class="imgHover" href="htpp://google.com">Text Link 1
   <img class="hover" src="image_link1.jpg" alt=""></a>


   <a class="imgHover" href="htpp://google.com">Text Link 2
   <img class="hover" src="image_link2.jpg" alt=""></a>

///////////////////////////////////
Can I move the code link this and when I mouse hover Text Link 1 the script select the image 1… Please help.

   <div id="imageshow">
  <img class="hover" src="image_link1.jpg" alt="">
 <img class="hover" src="image_link2.jpg" alt="">
  </div>


     <div id="link">
    <a class="imgHover" href="htpp://google.com">Text Link 1   </a>
    <a class="imgHover" href="htpp://google.com">Text Link 2   </a>

   </div>

Answer 1

You have to put it before the first fade:

$(".imgHover").hover(
function() {
    $(this).children("img").stop().fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
},
function() {
    $(this).children("img").stop().fadeTo(200, 1).end().children(".hover").fadeOut(100)();
});