< script type = "text/javascript" > function l_image(a, b) { document.example_img.src = a; document.getElementById("link").href = b.href; } < /script> <div class="block"> <div class="block_img"> <a href="htmls/1.html" id="link"> <img src="img_hover/1.png" name="example_img" width="130" height="50" id="example_img"> </a> </div> <div class="block_links"> <a href="htmls/1.html" onMouseOver="l_image('img_hover/1.png',this)">Ссылка №1</a> <br> <a href="htmls/2.html" onMouseOver="l_image('img_hover/2.png',this)">Ссылка №2</a> <br> <a href="htmls/3.html" onMouseOver="l_image('img_hover/3.png',this)">Ссылка №3</a> <br> </div> </div>

    1 answer 1

    For example:

     var links = $('.block_links').find('a'); links.each(function(){ var $this = $(this), src = $this.data('src'), img = $('.block_img').find('img'), dur = 500; $this.on('mouseover', function(){ img.fadeOut(dur, function(){ $(this).attr('src', src).fadeIn(dur); }); }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="block"> <div class="block_img"> <a href="htmls/1.html" id="link"> <img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg" name="example_img" width="230" height="150" id="example_img"> </a> </div> <div class="block_links"> <a href="htmls/1.html" data-src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">Ссылка №1</a> <br> <a href="htmls/2.html" data-src="http://rs1054.pbsrc.com/albums/s499/vadimzbanok/1327.jpg~c200">Ссылка №2</a> <br> <a href="htmls/3.html" data-src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Blue_Tiger_Im_IMG_9450.jpg">Ссылка №3</a> <br> </div> </div>

    • The trick is that in the "htef" image, the "htef" of the induced link is transmitted. And so, for a partial version - Thank you! - Vladimir