Joomla 2.5 Смена логотипа при наведении мыши

Тема в разделе "Интерактивные возможности", создана пользователем GnomAndr, 30.06.2014.

  1. GnomAndr
    Offline

    GnomAndr Недавно здесь

    Регистрация:
    30.06.2014
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    На многих сайтах есть этот эффект, когда наводишь мышку на логотип он меняется или подсвечивается.
    Вот и мне нужно сделать такое. На многих источниках поискал как менять, но не получается, либо сдвигается вся шапка, либо ничего не меняется.
    В файле index.php шаблона нашел где прописан к нему путь. А изменить этот код не знаю как... Сделал 2 файла logo.png и logo1.png, нужно чтоб при наведении мышки logo.png менялось на logo1.png

    <div class="top_inner template_width">
    <div class="logo">
    <h1 style="text-align:center"><a href="<?php echo $this->baseurl;?>"><img src="templates/<?php echo $this->template ?>/images/logo.png" alt="<?php echo $app->getCfg('sitename'); ?>" /></a></h1>
    </div>

    Если не в этом файле надо менять, то подскажите в каком. Шаблон называется jp_lofthouse
     
  2.  
  3. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    А CSS не пробовал изучать?
     
  4. GnomAndr
    Offline

    GnomAndr Недавно здесь

    Регистрация:
    30.06.2014
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    Именно такой ответ я и хотел получить.
    Я только учусь делать сайт. СSS изучаю по мере возможности и опять таки с подобных форумов где 80% шлют в гугл, а 19,9% советуют html, css поизучать.
    Тем более написал, что испробовал способы которые на разных источниках советовали и не получилось самому.
    На самом сайте делать замены картинок подстановкой кода получается этим способом:

    <style type="text/css">
    .demo {
    position:relative;
    margin:0 auto;
    height: 400px;
    width:400px;
    display: block;
    }

    .demo img {
    left: 0;
    position:absolute;
    top: 0;
    }

    .demo img.raz {opacity:0;filter:alpha(opacity=0);}
    .demo:hover img.raz {opacity:1;filter:alpha(opacity=100);}
    .demo:hover img.dva, .demo img.dva:hover {opacity:0;filter:alpha(opacity=0);}
    </style>

    <a class="demo" href="#">
    <img class="raz" src="http://изо2.jpg" />
    <img class="dva" src="http://изо1.jpg" />
    </a>

    А вот с логотипом не получается.
     
  5. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Я рад :)
    От готовых ответов толку 0.

    Чем он отличается?

    1. Делаешь ссылку блочным элементом, указываешь у неё фон - logo.png. При этом из html-кода удаляешь картинку.
    2. При наведении на ссылку фоновая картинка меняется на logo1.png. Чтобы менялось мгновенно - делаешь спрайт из картинок.

    А основы надо изучать надо не по форумам, а хотя бы здесь http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee
     
  6. GnomAndr
    Offline

    GnomAndr Недавно здесь

    Регистрация:
    30.06.2014
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    если указать logo.png фоном то получается.
    Только лого.пнг - не фон, там есть фоновая картинка и она другая, а файл лого.пнг - он сверху фона и является ссылкой на сам сайт.
     
  7. OlegM
    Offline

    OlegM Russian Joomla! Team Команда форума

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Где "там"? У ссылки?
     
  8. GnomAndr
    Offline

    GnomAndr Недавно здесь

    Регистрация:
    30.06.2014
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    на сайте есть фоновая картинка. Нужно сделать, чтоб только логотип менялся, при наведении мышки получалось, что он "подсвечивается".
    АР в круге - это логотип. За ним имеется фоновая картинка - которая синяя.
    --- добавлено: 30.06.2014, первое сообщение размещено: 30.06.2014 ---
    Все разобрался. Не в там я менял, надо было в файле template.css
    Тему можно закрывать.
    --- добавлено: 30.06.2014 ---
    Все разобрался. Не в там я менял, надо было в файле template.css
    Тему можно закрывать.
     

    Вложения:

    Последнее редактирование: 30.06.2014

Поделиться этой страницей

Загрузка...