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

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

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

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    293
    Симпатии:
    186
    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>   
    
     
  2. iga

    iga

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

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.350
    Симпатии:
    1.380
    AnOcToJI, ты хочешь на чистом CSS это замутить? вроде не реально.
     
  4. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    293
    Симпатии:
    186
    нет, не принципиально, можно и на js
     
  5. $iD

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.350
    Симпатии:
    1.380
    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:
     
    AnOcToJI нравится это.
  6. AnOcToJI

    AnOcToJI

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

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.350
    Симпатии:
    1.380
    я не понял, что такое второстепенная страница :Smile:
     
  8. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    293
    Симпатии:
    186
    главная index.html
    второстепенная about.html
     
  9. $iD

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.350
    Симпатии:
    1.380
    если я правильно понял, то без бэкенда никак )
     
  10. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    293
    Симпатии:
    186
    через куки никак разве не реализовать?
     
  11. $iD

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

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

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

    AnOcToJI

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

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

    Регистрация:
    13 мар 2012
    Сообщения:
    3.350
    Симпатии:
    1.380
    Код:
    <!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>
    Как-то так. Посыл будет такой.
     
    AnOcToJI нравится это.
Статус темы:
Закрыта.