JavaScript

08.03.2008, 09:10

Нужно написать такой вот скриптик (см. аттач) с комментариями, чтобы человек, не знающий JavaScript, смог разобраться программе и переделать ее по своему усмотрению.

kainen · 11.04.2008, 14:20

......

C1FR0 · 30.06.2009, 02:20

Задача:
Переписать код под элемент div или td с использованием метода onmouseover. Полностью сохранить функциональность выполнения метода.

Код HTML:

<html >
  <head >
    <style type = "text/css" >
      a{
        display: block;
        height: 100px;
        width: 100px;
      }
      a:link, a:visited, a:active{
        background-image: url('light_off.png');
      }
      a:hover{
        background-image: url('light_on.png');
      }
    </style>
  </head>
  <body >
    <a href = "#" >&nbsp;</a>
  </body>
</html>

Insya · 01.07.2009, 17:40

Цитата:

Сообщение от C1FR0

Задача:
Переписать код под элемент div или td с использованием метода onmouseover. Полностью сохранить функциональность выполнения метода.

Код HTML:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
function f1()
{
	document.getElementById("div").style.backgroundImage = "url('lighton.png')";
}
function f2()
{
	document.getElementById("div").style.backgroundImage = "url('lightoff.png')";
}
</script>
</head>

<body>
<div id="div" style="width:100px;height:100px;background-image:url('lightoff.png')" onmouseover="f1()" onmouseout="f2()"></div>
</body>

</html>

ΛLIEN · 01.07.2009, 17:48

Нафига кодить на javascript, если через css это и так прекрасно работает. Javascript может быть отключен в браузере в целях безопасности и работать не будет.

C1FR0 · 01.07.2009, 18:43

to Insya
Благодарю!

to ΛLIEN
В задумке объект не должен быть ссылкой.
Возможно использовать пару <a ></a> без параметра href, но в этом случае пропадает кроссбраузерность.
Данный прием является дизайнерским решением. Если он не будет работать в браузерах с отключенным JS, то это не беда. А если его не увидят пользователи потому, что им нравится какой-то из 5 основных браузеров, то это нехорошо.

ΛLIEN · 01.07.2009, 20:18

Пардон, я забыл об у... в смысле, ущербности ie6, которым я не пользуюсь по причине его у...щербности. Меня поражает, что этот идиотизм с селектором :hover не был исправлен ни одним из сервис паков, так что без яваскрипта только через обертку тегом <A>

Код:

<html>
<head>
    <style type = "text/css" >
      div.mydiv a {
        background-image: url('lightoff.png');
		text-decoration : none;
		display:block;
      }
	  div.mydiv a:hover {
        background-image: url('lighton.png');
      }
    </style>
</head>
<title>Untitled 1</title>
</head>

<body>
<div class="mydiv"><a href="#">1234567</a></div>
</body>

</html>

C1FR0 · 01.07.2009, 20:57

В IE6 нет никаких проблем с псевдоэлементом :hover в том случае, если пара <a ></a> обозначена как ссылка, т.е. с присвоенным параметром href.

Но мне надо, чтобы эффект метода достигался без использования ссылки, т.е. без параметра href. А в этом случае возникает проблема в Google Chrome, IE и Safari.

А зачем ты использовал обертку в div я вообще не понимаю.

ΛLIEN · 01.07.2009, 21:19

Цитата:

Сообщение от C1FR0

В IE6 нет никаких проблем с псевдоэлементом :hover

В IE6 :hover воспринимается только тэгом <a>, хотя по стандарту css2 должен восприниматься любым. СSS2 это стандарт 1998 года вообще-то.
href="#" считай что это ссылка вникуда. От клика по ней ничего не произойдет.

C1FR0 · 01.07.2009, 21:24

Цитата:

Сообщение от ΛLIEN

В IE6 :hover воспринимается только тэгом <a>, хотя по стандарту css2 должен восприниматься любым. СSS2 это стандарт 1998 года вообще-то.

Вот этого я не знал. Спецификации W3C не читаю, т.к. с английским мы поссорились. А в учебниках по CSS, которые я читал, авторы не потрудились осветить данный факт.

Цитата:

Сообщение от ΛLIEN

href="#" считай что это ссылка вникуда. От клика по ней ничего не произойдет.

Знаю. Но стремление все делать идеально не позволяет мне создавать ссылку в никуда.

30.06.2009, 02:20	#3
C1FR0 Complete Регистрация: 07.01.2009 Адрес: Гатчина Нарушения:[Посмотреть]	Задача: Переписать код под элемент div или td с использованием метода onmouseover. Полностью сохранить функциональность выполнения метода. Код HTML: <html > <head > <style type = "text/css" > a{ display: block; height: 100px; width: 100px; } a:link, a:visited, a:active{ background-image: url('light_off.png'); } a:hover{ background-image: url('light_on.png'); } </style> </head> <body > <a href = "#" >* </a> </body> </html> __________________ MATRIX — connecting people Последний раз редактировалось C1FR0. 30.06.2009 в 02:25.*

01.07.2009, 17:48	#5
ΛLIEN пришелец Регистрация: 23.01.2006 Адрес: Земля, 013 в центуре Нарушения:[Посмотреть]	Нафига кодить на javascript, если через css это и так прекрасно работает. Javascript может быть отключен в браузере в целях безопасности и работать не будет. __________________ Use the Source, Luke!

01.07.2009, 18:43	#6
C1FR0 Complete Регистрация: 07.01.2009 Адрес: Гатчина Нарушения:[Посмотреть]	to Insya Благодарю! to ΛLIEN В задумке объект не должен быть ссылкой. Возможно использовать пару <a ></a> без параметра href, но в этом случае пропадает кроссбраузерность. Данный прием является дизайнерским решением. Если он не будет работать в браузерах с отключенным JS, то это не беда. А если его не увидят пользователи потому, что им нравится какой-то из 5 основных браузеров, то это нехорошо. __________________ MATRIX — connecting people Последний раз редактировалось C1FR0. 01.07.2009 в 18:47.

01.07.2009, 20:18	#7
ΛLIEN пришелец Регистрация: 23.01.2006 Адрес: Земля, 013 в центуре Нарушения:[Посмотреть]	Пардон, я забыл об у... в смысле, ущербности ie6, которым я не пользуюсь по причине его у...щербности. Меня поражает, что этот идиотизм с селектором :hover не был исправлен ни одним из сервис паков, так что без яваскрипта только через обертку тегом <A> Код: <html> <head> <style type = "text/css" > div.mydiv a { background-image: url('lightoff.png'); text-decoration : none; display:block; } div.mydiv a:hover { background-image: url('lighton.png'); } </style> </head> <title>Untitled 1</title> </head> <body> <div class="mydiv"><a href="#">1234567</a></div> </body> </html> __________________ Use the Source, Luke! Последний раз редактировалось ΛLIEN. 01.07.2009 в 20:20.

01.07.2009, 20:57	#8
C1FR0 Complete Регистрация: 07.01.2009 Адрес: Гатчина Нарушения:[Посмотреть]	В IE6 нет никаких проблем с псевдоэлементом :hover в том случае, если пара <a ></a> обозначена как ссылка, т.е. с присвоенным параметром href. Но мне надо, чтобы эффект метода достигался без использования ссылки, т.е. без параметра href. А в этом случае возникает проблема в Google Chrome, IE и Safari. А зачем ты использовал обертку в div я вообще не понимаю. __________________ MATRIX — connecting people Последний раз редактировалось C1FR0. 01.07.2009 в 21:14.