Hello. I wanted to ask how to solve this issue correctly :): You need to show pictures when you hover over a link, that is, when you hover over a link in one block, the picture appears in another, then when you hover over another link in the same block, see another picture

<ul class="left-block f_left"> <li> <div class="sub-menu-item"> <a class=" href-sub-menu left-sub-menu" onmouseover = " id =x" href="">name</a> </div> </li> </ul> <div class="block-container" style="width: 224px"> <div class="block-detail"> <div id="x" class=" block-item"> <span class="block-title">neme</span> <a href=""><img id="data" src="url-img"></a> <p class="block-descriptions">Desc</p> </div> </div> </div>

    2 answers 2

    There are a million ways to implement this, I propose this solution:

    • add data-pic attribute to links

    they will look something like this:

     <a href="http://google.com/" data-pic="pic/google.png">Google</a> <a href="http://yandex.ru/" data-pic="pic/ya.png">Yandex</a> <a href="http://hashcode.ru/" data-pic="pic/hashcode.png">HashCode</a>

    Well, parsing this case is very easy with jQuery:

     $('a').hover(function(){ var kx=$(this).data('pic'); $('img').attr('src', kx).fadeIn(100); }, function(){ $('img').fadeOut(100); });

    It should work something like this: http://jsfiddle.net/fccXw/ Good luck to you!

    • thank you very much what you need :) - papa777
     <!DOCTYPE html> <html> <head> <title>Page Title</title> <script> window.onload = function () { document.getElementById('link').onmouseover = function () { document.getElementById('img').src = 'logo2.png'; } document.getElementById('link').onmouseout = function () { document.getElementById('img').src = 'logo.png'; } } </script> </head> <body> <ul class="left-block f_left"> <li> <div class="sub-menu-item"> <a id="link" href="">name</a> </div> </li> </ul> <div class="block-container" style="width: 224px"> <div class="block-detail"> <div id="x" class=" block-item"> <span class="block-title">neme</span> <a href=""><img id="img" src="logo.png"></a> <p class="block-descriptions">Desc</p> </div> </div> </div> </body> </html>
    • Thanks for the answer, I probably incorrectly asked :) I have php dynamics there and it will be easy to track every picture, can you tell me how to do something for an example: I will add in <img id = "img" src = "empty"> data = "url from db", but when you hover in src = "instead of empty, the data from data" is clearer. This is in order not to load 100 images, but to load when the user performs an action. Thank you - papa777