[Решено] Смена картинки при наведении на область. Как?

Тема в разделе "JavaScript", создана пользователем AnOcToJI, 2 мар 2016.

Статус темы:
Закрыта.
  1. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    309
    Симпатии:
    188
    1) Собственно есть 3 кнопоки и один блок с картинкой, при наведении на кнопки надо сделать смену изображений в блоке с картинкой для каждой кнопки своя картинка(ну или спрайт со своими координатами)
    а точнее:
    изначально стоит картинка 1_0
    навёл на кнопку 1 в "circle" сменилась картинка на 1_1
    навёл на кнопку 2 в "circle" сменилась картинка на 1_2 и т.д

    2) и есть ещё одна кнопка при нажатии на которую надо сменить изображения, которые были изначально при наведении на кнопки
    а точнее:
    после нажатия на "сменить изображение" изначальная картинка с 1_0 сменится на 2_0 и чтобы кнопки то же поменяли значения
    навёл на кнопку 1 в "circle" сменилась картинка на 2_1
    навёл на кнопку 2 в "circle" сменилась картинка на 2_2 и т.д

    Код:
       <div>
     <button class="top">1</button>
     <button class="center">2</button>
     <button class="bottom">3</button>
   </div>   
   <div>
     <div class="circle">основной блок с картинкой</div>
     <button class="shave">сменить изображения</button>
   </div>
     
    AnOcToJI, 2 мар 2016
    #1
  2. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    В форуме javascript вам быстрее ответят на этот вопрос. Полагаю, поставленная задача решается с помощью query.
     
    iga, 2 мар 2016
    #2
  3. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    AnOcToJI, ты хочешь на чистом CSS это замутить? вроде не реально.
     
    $iD, 2 мар 2016
    #3
  4. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    309
    Симпатии:
    188
    нет, не принципиально, можно и на js
     
    AnOcToJI, 2 мар 2016
    #4
  5. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    HTML:
    <!DOCTYPE html>
<html lang="ru">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.buttons > button').hover(function() {
                $('#circle > #inner').toggleClass($(this).data('class'))
            });

            $('.shave').on('click', function (e) {
                e.preventDefault();

                $('#circle').attr('class', 'square');
            })
        });
    </script>
</head>
<body>
    <div class="buttons">
        <button class="top" data-class="img1">1</button>
        <button class="center" data-class="img2">2</button>
        <button class="bottom" data-class="img3">3</button>
   </div>   
   <div>
     <div id="circle" class="circle"><div id="inner" class="base"></div></div>
     <button class="shave">change</button>
   </div>
</body>
</html>
    Как-то так.

    все картинки висят на img1,2,3 и на base живёт картинка по умолчанию.
    и в css что типа
    Код:
    .circle > .base {} 
.circle > .img1 {}
....
.square > .base {}
....
    Идея должна быть понятна :Smile:

    При желании можно вместо классов прибить ссылки на картинки :Smile:
     
    $iD, 2 мар 2016
    #5
    AnOcToJI нравится это.
  6. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    309
    Симпатии:
    188
    Огромное спасибо!
    --- Добавлено, 3 мар 2016 ---
    А возник ещё такой вопрос, у кнопок есть второстепенные страницы(страница 1, 2 , 3) на этих страница есть 1 фото
    <div id="circle" class="circle"><div id="inner" class="base"></div></div>
    надо чтобы после смены картинки по кнопке
    <button class="shave">change</button>
    оно применялось и к второстепенным страницам, как такое реализовать?
     
    AnOcToJI, 3 мар 2016
    #6
  7. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    я не понял, что такое второстепенная страница :Smile:
     
    $iD, 10 мар 2016
    #7
  8. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    309
    Симпатии:
    188
    главная index.html
    второстепенная about.html
     
    AnOcToJI, 10 мар 2016
    #8
  9. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    если я правильно понял, то без бэкенда никак )
     
    $iD, 10 мар 2016
    #9
  10. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    309
    Симпатии:
    188
    через куки никак разве не реализовать?
     
    AnOcToJI, 10 мар 2016
    #10
  11. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    ну да, можешь через куку. заюзав: https://github.com/js-cookie/js-cookie

    в on click на shave писать куку, а на других страницах читать) прям в куку можно записывать класс, либо имя картинки.
     
    $iD, 10 мар 2016
    #11
    AnOcToJI нравится это.
  12. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    309
    Симпатии:
    188
    да вот же, я это понимаю, просто js совсем у меня плох, я с ним на Вы
     
    AnOcToJI, 10 мар 2016
    #12
  13. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    Код:
    <!DOCTYPE html>
<html lang="ru">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.buttons > button').hover(function() {
                $('#circle > #inner').toggleClass($(this).data('class'))
            });

            $('.shave').on('click', function (e) {
                e.preventDefault();

                $('#circle').attr('class', 'square');
                Cookies.set('img', '1');
            })
        });
    </script>
</head>
<body>
    <div class="buttons">
        <button class="top" data-class="img1">1</button>
        <button class="center" data-class="img2">2</button>
        <button class="bottom" data-class="img3">3</button>
   </div>   
   <div>
     <div id="circle" class="circle"><div id="inner" class="base"></div></div>
     <button class="shave">change</button>
   </div>
   <a href="2.html">next page</a>
</body>
</html>
    И вторая страница:
    Код:
    <!DOCTYPE html>
<html lang="ru">
<head>
  <title></title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
  var img = Cookies.get('img');

  if (img !== undefined) {
  $('.test').html(img);
  }
  });
  </script>
</head>
<body>
  page2
  <div class="test"></div>
</body>
</html>
    Как-то так. Посыл будет такой.
     
    $iD, 14 мар 2016
    #13
    AnOcToJI нравится это.
< Как закрыть toggle при открытии другого toggle?) | Прокрутка блока вместе с скроллом. Как сделать? >
Статус темы:
Закрыта.