0

Здравствуйте Хотел спросить как правильно решить данный вопрос :): Нужно показать картинки при наведении на ссылку, то есть при наведении на ссылку в одном блоке картинка появляется в другом, потом при наведении на другую ссылку в том же блоке виводиься другая картинка

<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 ответа 2

0

Есть миллион способов это реализовать, я предлагаю такое решение:

  • к ссылкам добавить атрибут data-pic

они будут выглядеть примерно так:

<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>

ну и распарсить это дело очень легко при помощи jQuery:

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

Должно работать как то так: http://jsfiddle.net/fccXw/ Удачи вам!

1
  • спасибо большое то что надо :)
    – papa777
    3 ноя 2013 в 22:19
0
<!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>
1
  • Спасибо за ответ я наверное неправильно спросил :) у меня там динамика php и отследить каждую картинку будет просто, может подскажете как для примера как сделать что-то: я добавлю в <img id="img" src="пусто"> data = "урл с БД", а при наведении в src = "вместо пусто данные с data" вот так яснее. Это для того чтобы не грузить 100-ни картинок, а загружать когда пользователь совершит действие Спасибо
    – papa777
    3 ноя 2013 в 22:09

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.