ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Особенности background-position
8 сообщений из 8, страница 1 из 1
Особенности background-position
    #39303518
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Всем привет.

Есть такой небольшой html:
Код: html
1.
<a href="#" style="background: url(some_img.png);">


и css:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
a
{
    display: block;
    width: 34px;
    height: 34px;
    background-position: 0 0;
    background-repeat: no-repeat;
}



Мне нужно, чтобы при наведении на эту картинку подгружалась вторая ее половинка, т.е. что-то типа того:
Код: css
1.
2.
3.
4.
a:hover
{
    background-position: 0 -34px;    
}



Но так не работает.
Я не могу прописать background: url() в самом css, т.к. картинка подгружается динамически (тащится из базы).
Это можно сделать средствами css или нужно яваскриптом src картинки подменивать?
...
Рейтинг: 0 / 0
05.09.2016, 02:26
| Ответить | Цитировать | Написать  
Особенности background-position
    #39303527
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
urukhayЯ не могу прописать background: url() в самом css
Можете, временно заменить CSS, перезаписав поверх существующих стилей новые, а потом отменить - вернуться к старым значениям. 19285188

Таким способом удобно добавлять и удалять псевдоклассы, CSS-анимацию, правила keyframes и т.д.
Ограничений нет никаких, это абсолютно то-же самое, что и внешний CSS-файл.
...
Рейтинг: 0 / 0
05.09.2016, 05:14
| Ответить | Цитировать | Написать  
Особенности background-position
    #39303530
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
P.S. чтобы избежать неприятного визуального эффекта при динамичной подгрузке новых картинок,
лучше их заранее подгружать путём добавления HTML-кода <img src="..." ... /> в скрытый блочный элемент с нулевыми размерами и установленным свойством visibility:hidden
...
Рейтинг: 0 / 0
05.09.2016, 05:41
| Ответить | Цитировать | Написать  
Особенности background-position
    #39303531
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
Код: css
1.
2.
3.
4.
.preloadImages {
     position:absolute; top:0; left:0; width:0; height:0;
     visibility:hidden; overflow:hidden;
 }
...
Рейтинг: 0 / 0
05.09.2016, 05:48
| Ответить | Цитировать | Написать  
Особенности background-position
    #39303847
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Спасибо, но с виду смахивает на жесть ради такой простой задачи! :)

Если говорить о яваскрипте, почему нельзя, к примеру, в html вывести 2 тега img: один с картинкой по умолчанию, второй - с той, которая появится при наведении (второй, соответственно, скрываем через display: none). Ну а потом вешаем события mouseOver и mouseOut.

Но я хотел решить эту задачу без использования JS. Видимо, нельзя.
...
Рейтинг: 0 / 0
05.09.2016, 14:34
| Ответить | Цитировать | Написать  
Особенности background-position
    #39303870
Alexander A. Sak
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alexander A. Sak
Участник
urukhayЕсли говорить о яваскрипте, почему нельзя, к примеру, в html вывести 2 тега img: один с картинкой по умолчанию, второй - с той, которая появится при наведении (второй, соответственно, скрываем через display: none). Ну а потом вешаем события mouseOver и mouseOut.

Но я хотел решить эту задачу без использования JS. Видимо, нельзя.

Никто не мешает в CSS указать разный display для :hover и не-:hover.
Будет с двумя картинками, сменой при наведении, но без JS.
...
Рейтинг: 0 / 0
05.09.2016, 15:03
| Ответить | Цитировать | Написать  
Особенности background-position
    #39303871
Alexander A. Sak
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alexander A. Sak
Участник
Как-то так (не проверял):
Код: html
1.
2.
3.
4.
<div class="nojs">
   <img class="normal" src="...">
   <img class="onhover" src="...">
</div>



Код: css
1.
2.
3.
4.
5.
6.
7.
.nojs .onhover, .nojs:hover .normal {
   display:none;
}

.nojs .normal, .nojs:hover .onhover {
   display:inline-block;
}
...
Рейтинг: 0 / 0
05.09.2016, 15:07
| Ответить | Цитировать | Написать  
Особенности background-position
    #39303873
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Во, вот такой вариант мне нравится больше.
Спасибо!
...
Рейтинг: 0 / 0
05.09.2016, 15:10
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Особенности background-position
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]