X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Подскажите по CSS
mitzury
mitzury
Topic Starter сообщение 24.10.2013, 12:32; Ответить: mitzury
Сообщение #1


Бывалый
****

Группа: User
Сообщений: 296
Регистрация: 22.4.2013
Из: Санкт Петербург
Поблагодарили: 24 раза
Репутация:   2  


Подскажите плс, есть картинка на ней полупрозрачной полоской выделяется текст.
По задумке на картинке этот текст должен меняться, а при наведении мышкой н а картинку должен меняться цвет этой подсветки.

В итоге из 18 картинок на сайте должно быть более 50 их в разных видах.
Соответственно вопрос, можно ли как то это сделать в CSS?

чтобы не рисовать столько картинок и упростить работу.

и встречный вопрос как сделать изменение картинки при наведении мышкой на нее, через CSS знаю есть способ прописывание стиля, но в ФФ он криво работает (хотя может что то не то делаю...)

Сообщение отредактировал mitzury - 24.10.2013, 12:41
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dididima
dididima
сообщение 24.10.2013, 13:06; Ответить: dididima
Сообщение #2


Бывалый
****

Группа: User
Сообщений: 451
Регистрация: 26.10.2010
Поблагодарили: 52 раза
Репутация:   16  


при наведении меняешь стиль через img:hover {}

А так смотря какие там картинки, если их можно реализовать через CSS, то нету смысла их прорисовывать


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mitzury
mitzury
Topic Starter сообщение 24.10.2013, 13:16; Ответить: mitzury
Сообщение #3


Бывалый
****

Группа: User
Сообщений: 296
Регистрация: 22.4.2013
Из: Санкт Петербург
Поблагодарили: 24 раза
Репутация:   2  


dididima,

вот именно так и делаю, но в фф почему то книво работает, да и при этом надо иметь кучу картинок что не удобно, картинки обычные в jpg

Сообщение отредактировал mitzury - 24.10.2013, 13:18
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sgrass
sgrass
сообщение 24.10.2013, 15:34; Ответить: sgrass
Сообщение #4


Новичок
*

Группа: User
Сообщений: 19
Регистрация: 6.9.2013
Поблагодарили: 11 раз
Репутация:   2  


Если я правильно понял, картинка стоит фоном?
Если так, то можно сделать спрайты, т.е. 2 картинки (те, которые будут меняться при наведении мышкой) совместить в одну. И при наведении через :hover {} менять не саму картинку, а background-position. Тогда не нужна будет куча картинок.
Например, в фоне должна быть картинка высотой 100px: делаем в фотошопе из двух 100-пиксельных картинок одну в 200px, поставив их друг над другом, и при наведении мышки смещаем ее на половину ее высоты, вот так:
div {
height: 100px;
background-image: url(такая-то картинка);
background-repeat: no-repeat;
background-position: 0 0;
}
div:hover {
background-position: 0 -100px;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sdrc26
sdrc26
сообщение 25.10.2013, 2:26; Ответить: sdrc26
Сообщение #5


Завсегдатай
*****

Группа: Active User
Сообщений: 751
Регистрация: 25.10.2009
Из: Амстердам
Поблагодарили: 215 раз
Репутация:   32  


и встречный вопрос как сделать изменение картинки при наведении мышкой на нее, через CSS знаю есть способ прописывание стиля, но в ФФ он криво работает (хотя может что то не то делаю...)


Если и я правильно понял, есть одна картинка, и нужно сделать, чтобы при наведение показывалась другая

html
<a href="http://" title="Текст который будет подсвечиваться при навидени" id="button1" />


css
#button1 {
display: block;
/* ширина картинки */
width: 191px;
/* Высота картинки */
height: 42px;
/* Картинка, без повторения и позиция (можно в % или px) */
background: url(menu.png) no-repeat -191px 0;
}
a:hover#button1, a:focus#button1 {
/* Картинка которая будет открываться при наведение + без повторения и ее координаты на одной картинке */
background: url(menu.png) no-repeat -191px -44px;
}


Сообщение отредактировал sdrc26 - 25.10.2013, 2:28


--------------------
__________________AMSTERDAM__________________

ISPmgr Lite / Pro - 3 / 5.5 EUR в месяц или 22 / 40 EUR Вечная

P.S. Занимаюсь предоставлением услуг Хостинга с 2007-ого года
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mitzury
mitzury
Topic Starter сообщение 25.10.2013, 12:39; Ответить: mitzury
Сообщение #6


Бывалый
****

Группа: User
Сообщений: 296
Регистрация: 22.4.2013
Из: Санкт Петербург
Поблагодарили: 24 раза
Репутация:   2  


sdrc26,

попробовал ваш способ, неплохой.


Картинка одна, просто у картинки внизу должен быть текст, и полоска выделяющая этот текст и при наведении полоска должна меняться

<html>
<head>
<style>
#button1 {
display: block;
/* ширина картинки */
width: 191px;
/* Высота картинки */
height: 42px;
/* Картинка, без повторения и позиция (можно в % или px) */
background: url(menu.png) no-repeat -191px 0;
}
a:hover#button1, a:focus#button1 {
/* Картинка которая будет открываться при наведение + без повторения и ее координаты на одной картинке */
background: url(menu.jpg) no-repeat -191px -44px;
}
</style>
</head>
<body>
<table>
<td background="menu.jpg">
<a href="http://" title="Текст который будет подсвечиваться при навидени" id="button1">text</a>
</td>
</table>
</body>
</html>


вот если сделать что то вроде такого, то просто на кратинку будет наслаиваться вторая с полоской..
а можете подсказать координаты если картинка 320х215 ?

И как этот способ будет работать в браузерах различных?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sdrc26
sdrc26
сообщение 25.10.2013, 23:05; Ответить: sdrc26
Сообщение #7


Завсегдатай
*****

Группа: Active User
Сообщений: 751
Регистрация: 25.10.2009
Из: Амстердам
Поблагодарили: 215 раз
Репутация:   32  


Картинка одна, просто у картинки внизу должен быть текст, и полоска выделяющая этот текст и при наведении полоска должна меняться

Хм, немного не понял.
У вас текст и картинка или все на одной картинки, текст и т.п.?

Или же у вас просто текст и при наведение на него, должна открываться картинка как титл (мини обзор)
Или просто текст, который обведен/подчеркнут полоской, которая должна менять цвет при наведении на нее? если так, то вам тут даже картинка не нежна, решается все методом CSS


а можете подсказать координаты если картинка 320х215 ?

Откройте фотошоп, поставьте линейку, выберите вариант измерения в пикселях и разметкой картинки смотрите координаты =)


И как этот способ будет работать в браузерах различных?

Способ который я указал, работает во всех популярных браузерах, без надобности создания под каждый своего класса

Сообщение отредактировал sdrc26 - 25.10.2013, 23:07


--------------------
__________________AMSTERDAM__________________

ISPmgr Lite / Pro - 3 / 5.5 EUR в месяц или 22 / 40 EUR Вечная

P.S. Занимаюсь предоставлением услуг Хостинга с 2007-ого года
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebKill
WebKill
сообщение 26.10.2013, 0:19; Ответить: WebKill
Сообщение #8


Новичок
*

Группа: Banned
Сообщений: 25
Регистрация: 23.10.2013
Поблагодарили: 2 раза
Репутация:   -5  


вам нужно что-то типа слайдера, что-бы текст менялся при наведение, скачайте исходники и посмотрите как там сделанно

Сообщение отредактировал WebKill - 26.10.2013, 0:20
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Frey
Frey
сообщение 31.10.2013, 7:29; Ответить: Frey
Сообщение #9


Новичок
*

Группа: User
Сообщений: 20
Регистрация: 27.5.2011
Поблагодарили: 5 раз
Репутация:   1  


Используйте jsfiddle.net для вставки примеров, всем будет значительно проще.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nightfox
Nightfox
сообщение 12.11.2013, 16:43; Ответить: Nightfox
Сообщение #10


Новичок
*

Группа: User
Сообщений: 16
Регистрация: 11.8.2013
Поблагодарили: 3 раза
Репутация:   0  


О, у меня заодно подобный вопрос. Как сделать так чтобы на всем сайте поверх контента пыла картинка полупрозрачная (например со словом ПРОДАЕТСЯ)?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Подскажите по где купить дёшево домены com info biz net
6 docdie 993 13.12.2017, 18:29
автор: docdie
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1062 11.12.2017, 16:01
автор: Nell
Открытая тема (нет новых ответов) Подскажите аналоги хостинга
0 dimaguru 363 8.12.2017, 14:55
автор: dimaguru
Открытая тема (нет новых ответов) Подскажите норм VPN-сервис для смартфона?
28 CyberAngel 4444 28.11.2017, 21:06
автор: bitcoin24_exchange
Открытая тема (нет новых ответов) Подскажите решение для управления рекламой на сетке сайтов WP и DLE
2 Autorealt 649 25.11.2017, 15:37
автор: Autorealt


 



RSS Текстовая версия Сейчас: 16.12.2017, 17:39
Дизайн