Добро пожаловать, Гость. Пожалуйста, выберите Вход или Регистрация
Привет.лв Главная Справка Поиск Вход Регистрация
Страниц: 1
Печать Bookmark and Share
Удалить этот блок рекламы?
Удали рекламу
Ссылка с двумя цветами! (Прочитано 5590 раз)
hevel
Народный любимец
*
Вне Форума



Сообщений: 968
Латвия
Пол: male
Ссылка с двумя цветами!
14.12.2007 :: 16:53:46
 
У меня такой вопросик! Когда навожу на ссылку то она меняет текст, использовал Css. А перед ней набольшая картинка которая меняет цвет, там уже Java скрипт.
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!


Вот я и хочу поинтересоваться можно ли сделать все в Css. Место картинки использовать другой символ, но чтобы он менял цвет на оранжевый, а сама текстовая ссылка на #0066CD.
Наверх
 
 

Неважно кто ты в глубине души, о человеке судят по поступкам.
WWW   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Ссылка с двумя цветами!
Ответ #1 - 14.12.2007 :: 17:21:24
 
Тоесть когда наводим на кнопку, она меняет цвет и меняет картинку с лева. Да это можно сделать используя только css. Давай рассмотрим пример который используется на привет.лв.

CSS: Код:
a {
  background:url('http://privet.lv/ntr/images/dot1.gif') no-repeat 0 0px; /* Грузим рисунок */
  padding-left:20px; /* Делаем отступ, для того что б рисунок не был под кнопочкой */
  color:#5E5E5E; /* Устанавливаем цвет кнопки  */
}
a:hover {  /* Функциа срабатывает после попадания курсора на кнопку  */
  background-position:0 -28px; /* Наш подгруженный рисунок поднимаем вверх */
  color:#0066CD; /* Изменяем цвет кнопки  */
} 



HTML: Код:
<a href="#">Главная страница</a> 


Вот собственно и все. Улыбка Можно в a:hover использовать не background-position а background с новым рисунком. - Который будет грузится при наведение. Но лучше так не делать.

Изменено:
Добавлено: 14/12/2007 18:23

Вот еще в голову пришла одна идея: Улыбка
CSS: Код:
a {
   color:#d4f498;
   }
a span {
   color:#fd294f;
   }
a:hover {
   color:#f9825b;
   }
a:hover span {
   color:#01d706;
   } 


HTML: Код:
<a href="#"><span>&curren;</span> Кнопка</a> 

Наверх
 
« Последняя редакция: 14.12.2007 :: 18:23:58 от Ramzies »  

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
hevel
Народный любимец
*
Вне Форума



Сообщений: 968
Латвия
Пол: male
Re: Ссылка с двумя цветами!
Ответ #2 - 09.04.2008 :: 14:23:20
 
А как сделать чтоб при наведении курсора происходила замена картинки! Ссылка и картинка находится в разный ячейках (картинка не должна быть ссылкой, на странице будет находится 4 таких линка!)
смотри: Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Наверх
 
 

Неважно кто ты в глубине души, о человеке судят по поступкам.
WWW   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Ссылка с двумя цветами!
Ответ #3 - 09.04.2008 :: 14:28:50
 
hevel писал(а) 09.04.2008 :: 14:23:20:
А как сделать чтоб при наведении курсора происходила замена картинки! Ссылка и картинка находится в разный ячейках (картинка не должна быть ссылкой, на странице будет находится 4 таких линка!)
смотри: Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

А у нас недавно была похожая тема, вот, держи Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Улыбка
И вот это тоже, думаю будет полезно: Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
hevel
Народный любимец
*
Вне Форума



Сообщений: 968
Латвия
Пол: male
Re: Ссылка с двумя цветами!
Ответ #4 - 09.04.2008 :: 14:40:13
 
Я это смотрел, и это не то.
Меня смущает то что картинка и ссылка находится в разных ячейках и я не представляю как их связать!
Наверх
 
 

Неважно кто ты в глубине души, о человеке судят по поступкам.
WWW   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Ссылка с двумя цветами!
Ответ #5 - 09.04.2008 :: 14:59:35
 
Аа, ты наверное о верхних кнопках на сайте. Хм. Ты хочешь менять не только рисунок который находится в кнопки но и рисунки который вне кнопки (тоесть с лева - 1,2,3,4)?
В таком случае даже не знаю что посоветовать тебе. Тут нужно JavaScript юзать или переделывать html верстку - таким образом что б весь рисунок был в кнопке.




P.S. Лучше наверное будет переделать html код.
Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
hevel
Народный любимец
*
Вне Форума



Сообщений: 968
Латвия
Пол: male
Re: Ссылка с двумя цветами!
Ответ #6 - 09.04.2008 :: 15:05:26
 
Нет, менять я уже не буду! Вот тоже думаю Яву использовать.
Только я хочу изменять только картинку (где например цифра 3, когда навожу курсор на ссылку "тесты", сама ссылка остается такой же!)
Наверх
 
 

Неважно кто ты в глубине души, о человеке судят по поступкам.
WWW   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Ссылка с двумя цветами!
Ответ #7 - 09.04.2008 :: 15:10:21
 
hevel писал(а) 09.04.2008 :: 15:05:26:
Нет, менять я уже не буду! Вот тоже думаю Яву использовать.
Только я хочу изменять только картинку (где например цифра 3, когда навожу курсор на ссылку "тесты", сама ссылка остается такой же!)


Хорошо я подумаю, сегодня после 24:00 или завтра в течение дня постараюсь что ни будь выложить.  Улыбка А сейчас на учебу пора.  Смущённый
Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
hevel
Народный любимец
*
Вне Форума



Сообщений: 968
Латвия
Пол: male
Re: Ссылка с двумя цветами!
Ответ #8 - 09.04.2008 :: 15:45:23
 
хорошо, вот принцип чего я хочу добиться! Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

Если можешь оптимизируй код, а то он был думан для другой цели!
Наверх
 
 

Неважно кто ты в глубине души, о человеке судят по поступкам.
WWW   IP записан
Ramzies
Администратор
*****
Вне Форума

Все что случается
имеет причину.

Сообщений: 2632
Даугавпилс, Валмиера.
Пол: male
Re: Ссылка с двумя цветами!
Ответ #9 - 09.04.2008 :: 18:43:17
 
hevel писал(а) 09.04.2008 :: 15:45:23:
хорошо, вот принцип чего я хочу добиться! Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!

Если можешь оптимизируй код, а то он был думан для другой цели!



В твоем скрипте много лишнего. Почему бы не сделать тебе проще, насколько я понял это будет использоваться только в 1, 2 кнопках. Значит нет особого смысла создавать функции, а можно просто прямо в кнопке поместить:

Код:
<a href="http://hevel.times.lv" onmouseover="document.getElementById('test').src='map1.gif'" onmouseout="document.getElementById('test').src='blank.gif'"><img src="20.gif" border="0" align="left"></a>

<img src="blank.gif" id="test"> 



Думаю разберешься, тут ничего сложного.
Наверх
 
 

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в Вход или Регистрация!!
Научись говорить, что ты _х_о_ч_е_ш_ь, вместо точго, чего ты _н_е_ _х_о_ч_е_ш_ь...
WWW Ramzies renat2985   IP записан
hevel
Народный любимец
*
Вне Форума



Сообщений: 968
Латвия
Пол: male
Re: Ссылка с двумя цветами!
Ответ #10 - 09.04.2008 :: 20:01:58
 
Разобрался, Спасибо!
Наверх
 
 

Неважно кто ты в глубине души, о человеке судят по поступкам.
WWW   IP записан
Страниц: 1
Печать Bookmark and Share
www.privet.lv

Privet.lv/forum » Powered by YaBB 2.2.3 (fix)!
YaBB © 2000-2012. Все права защищены.
Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge