На главную   |  

Советы по тому



Советы по тому

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




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

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

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

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

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


Имя:
Пароль:
Сообщение

Для вставки имени, кликните на нем.

Опции сообщения Добавить свою подпись
Подписаться на получение ответов по e-mail
Добавить тему в личные закладки
Разрешить смайлики?
Запретить коды



Как делать домовенка своими руками 289
Советы по тому 796
Как засолить щуку
Советы по тому 402
Смешные картинки
Советы по тому 770
Стильные варианты причесок
Советы по тому 808
50 прикольных картинок
Советы по тому 525
Вязаные шапки, схемы и описания - Вяжи. ру - модели 2
Советы по тому 23
Советы по тому 49
Советы по тому 38
Советы по тому 6
Советы по тому 44
Советы по тому 11
Советы по тому 25
Советы по тому 51
Советы по тому 23
Советы по тому 1


Теги:

Как в домашних условиях сделать скатку лица  Как сделать волосы густыми из яйца  Как тогда лучше сделать  Костюм оптимуса прайма из бумаги своими руками  Типовая схема включения ma4810  Открытки и любви фото картинки  Как в minecraft сделать карту на прохождение  Крепление лодочного мотора к транцу своими руками  Asus tf101 зарядное устройство схема  Реле denso 156700-0870 схема  Лифт стол для ручного фрезера своими руками  Отреставрировать стулья своими руками  Схема датчика включения вентилятора дэу матиз  Подарки на восемнадцатилетие для девушек  Сделать акустику как в клубе  Как сделать отрицательный рейтинг в ко  Поделки из соленого теста профессиональный  Подарок с характером о чем этот фильм  Чертежи как сделать боевого робота  Как сделать инн невский район  Дачный домик своими руками из вагончиков  Как сделать стежок за иглу  Сделать светильник своими руками из трубы  

 Карта сайта