Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Как сделать, чтоб при наведении менялся цвет контура рисунка

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

Ze Bolacha



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Из-за этой проблемы стоит сайт.
 
Пожалуйста, скажите, как сделать две вещи:
 
1. Чтобы при наведении курсора на картинку менялся цвет контура рисунка - к примеру, с белого на розовый.
 
2. Есть такая вещь: картинка с этим самым контуром а в соседней ячейке таблицы текста. Оба - и картинка, и текст - ведут по одной ссылке. Как сделать, чтобы при наведении на что-то одно розовым цветом загоралось все - и текст и контур рисунка.
 
Заранее Вам всем спасибо!

Всего записей: 185 | Зарегистр. 21-07-2003 | Отправлено: 17:37 17-08-2003
Putila

Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Ze Bolacha

Цитата:
Из-за этой проблемы стоит сайт.  

Что делает?

Цитата:
1. Чтобы при наведении курсора на картинку менялся цвет контура рисунка - к примеру, с белого на розовый.  

JavaScript...!
<img border="1" id=i1 border-color="ff0000" src="Images/afrout.gif" onMouseOver=border-color="ff8888"  onMouseOut=border-color="ff0000">
тоже самое пишешь для текста, обращаясь к id картинки, то-есть  onMouseOver=document.i1.border-color="ff8888". должно работать (не пробывал).

----------
...

Всего записей: 602 | Зарегистр. 27-04-2003 | Отправлено: 19:16 17-08-2003
IntenT



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Ze Bolacha
Детали зависят от того, как ты этот контур делаешь. А принцип - использование событий OnMouseOver и OnMouseOut для соответствующих элементов

Всего записей: 1584 | Зарегистр. 16-12-2001 | Отправлено: 19:42 17-08-2003
Putila

Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Цитата:
Детали зависят от того, как ты этот контур делаешь. А принцип - использование событий OnMouseOver и OnMouseOut для соответствующих элементов

Рамку можно реализовать, через фон контейнера с полями...

----------
...

Всего записей: 602 | Зарегистр. 27-04-2003 | Отправлено: 23:08 17-08-2003
nuToH



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
попробуй это:

Цитата:
<style>
<!--
a.image:link,a.image:visited,a.image:active
{
border: 1px solid #начальный_цвет;
}
a.image:hover
{
border: 1px solid #конечный_цвет;
}
-->
</style>
 
<a href="ссылочка :)" class=image><img border=0 src="твой_рисунок"></a>

 
Добавлено
я проверял, работает :)

----------
~ отец

Всего записей: 627 | Зарегистр. 28-06-2001 | Отправлено: 01:39 18-08-2003 | Исправлено: nuToH, 01:40 18-08-2003
Ze Bolacha



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
nuToH, спасибо. Твой вариант сработал. Остальные все не дали результатов. Скрипт не изменял цвет бордера. Не известь мочему... Может быть, что-то с правильностью написания. Насчет контейнера: не хотелось бы так сложно делать.
 
Вот только, nuToH, сделав все по твоей инструкции со стилями, я получил интересный эффект - бордер отображается правильно, но только слева, справа и снизу. А верхняя планка куда-то девается...
 
Шо делать?
 
Может кто-то видел пример на каком-либо сайте? Так было бы проще понять...

Всего записей: 185 | Зарегистр. 21-07-2003 | Отправлено: 03:40 18-08-2003
Ze Bolacha



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
И все еще не решен вопрос с тем, чтобы при наведении на что-то одно розовым цветом загоралось все - и текст и контур рисунка.

Всего записей: 185 | Зарегистр. 21-07-2003 | Отправлено: 13:17 18-08-2003
nuToH



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
интересный момент
я перед тем как запостить свой предыдущий пост с кодом, проверил его - все работало
до этого у меня бывало такая же ситуация, т.е. не все границы отображались
имхо тут надо прописывать для каждого бордера:

Код:
border-top
border-right
border-bottom
border-left

 
насчет:
Цитата:
И все еще не решен вопрос с тем, чтобы при наведении на что-то одно розовым цветом загоралось все - и текст и контур рисунка.

если тебе без разницы, одновременно чтоб загорались или нет, то можно использовать для каждого элемента (текст и картинка) отдельный тег ссылки
а если надо, чтоб одновременно, то немного тяжко. т.е. моим способом уже не пойдешь, потому что бордер будет появлятся и вокруг текста тоже. можно как-нибудь попробовать при помощи javascript'а.
есть еще вариант: спросить себя, а нужен ли такой изврат?

----------
~ отец

Всего записей: 627 | Зарегистр. 28-06-2001 | Отправлено: 17:41 18-08-2003
IntenT



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Ze Bolacha

Цитата:
И все еще не решен вопрос с тем, чтобы при наведении на что-то одно розовым цветом загоралось все - и текст и контур рисунка.

Однако, только JavaScript'ом
 
Вот, наваял

Код:
 
<script>
function On(arr, cnt)
{
 for(i=0; i<cnt; i++)
  {
    document.all[arr[i]].style.background="FF0000";
  }
 
}
function Off(arr, cnt)
{
 for(i=0; i<cnt; i++)
  {
    document.all[arr[i]].style.background="FFFFFF";
  }
 
}
 
</script>
<body style="margin-left:0; margin-bottom:0; margin-top:0; margin-right:0;">
<img src=ok.gif name=im onmouseover="javascript:On(Array('im','tc'),2)" onmouseout="javascript:Off(Array('im','tc'),2)">
<br>
<br>
<a name=tc onmouseover="javascript:On(Array('im','tc'),2)" onmouseout="javascript:Off(Array('im','tc'),2)">
some text
</a>
</body>
 

 
Добавлено
Здесь правда фон меняется а не рамка, но переделать - элементарно (а то я забыл как к рамке обращаться из JS)

Всего записей: 1584 | Зарегистр. 16-12-2001 | Отправлено: 17:55 18-08-2003
Ze Bolacha



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Рассказываю.
 
1. Попробовал написать для каждого бордера цвет - ничегошеньки не вышло...
 
2. Пробовал посмотреть в другом браузере - взял Netscape 7.0 - там еще интереснее: рисуется только планка снизу, да два маленьких обрубка по бокам. Как такое может быть?
 
3. Со скриптом тоже ничего не вышло...
 
Ужас какой-то! Ничего не получается! Хоть бы одно вышло - так нет, на тебе...
 
Волосы рву на себе. Кстати: стоит не сайт, а его выпуск. Вот.

Всего записей: 185 | Зарегистр. 21-07-2003 | Отправлено: 00:57 19-08-2003
nuToH



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ze Bolacha

Цитата:
стоит не сайт, а его выпуск. Вот

если выпуск посвящен этому, то надо эксперементировать, чтоб раскрыть проблему
если же просто для оформления, то попробуй найти компромисс

----------
~ отец

Всего записей: 627 | Зарегистр. 28-06-2001 | Отправлено: 01:46 19-08-2003
Ze Bolacha



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
nuToH, ну вообще-то хотелось бы сделать то, что задумал...

Всего записей: 185 | Зарегистр. 21-07-2003 | Отправлено: 11:25 19-08-2003
nuToH



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
имхо, только javascript'ом

----------
~ отец

Всего записей: 627 | Зарегистр. 28-06-2001 | Отправлено: 18:14 19-08-2003
Putila

Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Ze Bolacha
Пользуйся CSS! Ни какой жабы! Как я тебе писал... Должно работать, если руки из плеч растут. Я ща сам попробую в ртьд это вставить...  
 

Цитата:
Волосы рву на себе. Кстати: стоит не сайт, а его выпуск. Вот.

Запатентуй этот спозоб, как метод эпиляции! Вдруг спрос будет? Мне, как автору идеи пару процентов от прибыли не забудь перечислять  
 


----------
...

Всего записей: 602 | Зарегистр. 27-04-2003 | Отправлено: 18:59 19-08-2003
nuToH



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Putila

Цитата:
Пользуйся CSS! Ни какой жабы!


Цитата:
<body style="margin-left:0; margin-bottom:0; margin-top:0; margin-right:0;">  
<img src=ok.gif name=im onmouseover="javascript:On(Array('im','tc'),2)" onmouseout="javascript:Off(Array('im','tc'),2)">

 
...или меня глючит...

----------
~ отец

Всего записей: 627 | Зарегистр. 28-06-2001 | Отправлено: 01:14 20-08-2003
Ze Bolacha



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Как делать то?!!! а?

Всего записей: 185 | Зарегистр. 21-07-2003 | Отправлено: 03:43 20-08-2003
vladmir

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ze Bolacha
Выложи где-нибудь одну страничку с CSS от nuToHа
Должно вроде работать - так, не глядя, сложно сказать, что не так.

Всего записей: 2232 | Зарегистр. 22-01-2003 | Отправлено: 19:14 23-08-2003
nuToH



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vladmir
Ze Bolacha
вроде должно. да и не только должно, а работает. просто в разных браузерах по разному. вот я например в 6-ом ИЕ смотрел - в нем простым border отображается весь контур. в других, например:
Цитата:
Пробовал посмотреть в другом браузере - взял Netscape 7.0 - там еще интереснее: рисуется только планка снизу, да два маленьких обрубка по бокам

тут однозначно спасает задание цветов для каждого бордера:

Цитата:
a:link,a:active,a:visited {
border-top: 1px solid #0000FF;
border-bottom: 1px solid #0000FF;
border-left: 1px solid #0000FF;
border-right: 1px solid #0000FF;
}
a:hover {
border-top: 1px solid #FF0000;
border-bottom: 1px solid #FF0000;
border-left: 1px solid #FF0000;
border-right: 1px solid #FF0000;
}

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

----------
~ отец

Всего записей: 627 | Зарегистр. 28-06-2001 | Отправлено: 08:17 24-08-2003 | Исправлено: nuToH, 08:23 24-08-2003
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Как сделать, чтоб при наведении менялся цвет контура рисунка


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru