Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6
Внимание: рекомендуется обновленная версия данной статьи.
Несмотря на то, что данное решение уже опубликовано в РУнете не мной, я просто не могу не написать о нем, т.к. решение, на мой взгляд, достойно внимания, и нужно его популяризовать посредством моего блога.
Я постоянно слежу за материалами по HTML и CSS верстке, но почему-то до недавнего времени мне нигде не попался простейший способ создания ховер-эффекта (:hover) в самом часто упоминаемом веб-разработчиками браузере IE6, который, как мы знаем, данный селектор поддерживает только для тега ссылки <a>.
Не знаю, то ли это решение объективно считается не таким уж хорошим, то ли я хожу не теми дорогами Интернета, но я лишь месяц назад увидел его в блоге Сергея Гордиенко, который, как оказалась, пользуется этим скриптом уже давно (а со мной не поделился =).
До сей поры мне приходилось применять громоздкие скрипты, данный же скрипт состоит из всего лишь 6 строк:
1 2 3 4 5 6 | <attach for=element event=onmouseover handler=topm> <attach for=element event=onmouseout handler=verm> <script> function topm(){element.className='hover';} function verm(){element.className='';} </script> |
Наверное, его можно и в одну строку вытянуть =), суть не в этом, главное, что его размер ничтожно мал по сравнению с альтернативными решениями, известными мне на сегодняшний день.
Данный скрипт нужно сохранить в файл с любым названием, но обязательно с расширением .htc, например, ie6hover.htc.
Как пользоваться скриптом
Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу):
1 | * {behavior:url("ie6hover.htc")} |
Либо, например, вот так (если хотим его применить только к конкретному элементу):
1 | li {behavior:url("ie6hover.htc")} |
А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком:
1 2 3 4 | li:hover ul, /* для современных браузеров */ li.hover ul { /* для Internet Explorer 6 */ display: block } |
Обратите внимание, что класс .hover - это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
Как видите, все максимально просто.
Спасибо за скриптик, возьму на вооружение. А что за разрешение “htc”, а то в гугле кроме коммуникаторов ничего найти не могу толкового.
Я сам не знаю, что за такое разрешение. Какая-то разновидность ява-скрипта. Встречал подобные только для усмирения IE6.
2
3
4
5
6
7
{
scrollbar-face-color: expression(runtimeStyle.scrollbarFaceColor = '#fff',
onmouseover = function() {this.className += ' hover'},
onmouseout = function() {this.className = this.className.replace(/ hover/g, '')}
);
}
В отдельном ie.css м?
Очень удобное решение! Я раньше пользовался скриптом, который подключал/убирал необходимый класс - теперь перейду на этот способ.
Только вот хотелось бы почитать по поводу этого htc поподробнее :)
Здесь описано, что за расширение файлов .htc - http://filext.com/file-extension/HTC
lusever, так даже красивее. Спасибо! Только зачем в скрипте какой-то “scrollbar-face-color”?
Elliot, спасибо за ссылку!
То есть htc-файл - это механизм для реализации динамического HTML в скрипте.
Скриптик весьма неплох, есть аналогичный для IE, тоже реализованный на htc, но там подключение идет через псевдокласс:hover а не через класс, те как у всех других браузеров. Взять можно тут
Повелитель тегов, я этот и имел в виду, говоря о громоздких скриптах.
да htc скрипты позволяют задать с помощью скриптов поведение контроллов, благадоря чем намного упрощается реализация
Да, он больше. однако, если скрипт вынесен в отдельный файл, про современных “толстых” каналах это не так критично, если только он не используется на портале уровня яндекса или яху.
Независимо от ширины канала, я предпочту большому скрипту маленький.
Спасибо, Дмитрий.
Как уже писал, не помню откуда его взял, да собственно уже и не важно :)
А использую давно.
Даже мини-галерею на нем сделал: http://trifler.ru/blog/post_1200410261.html
Сам всегда мучился, со скриптами для меню в IE6, но теперь вроде, как проблема решена :)
Сергей, и тебе спасибо ;)
Зачем использовать scrollbar-face-color :) Думал, ты в теме.
Кроме как присутствия “scrollbar-face-color” в файлах дополнительных материалов, не нашел объяснения, для чего это нужно.
Да согласен, в принципе, модно внести некоторые коррективы в этот код, другими словами его модернизировать тем что бы скорость его подгрузки увеличилась на 5-15%, сейчас как раз работаю, потом поделюсь
не знаю, может я что-то не так делаю, - но в ИЕ6-ом у меня “эффект наведения” появляется (стает активным) сразу же при загрузке страницы. Пробовал даже просто взять те несколько строчек которые представлены здесь, но всё равно :(
Спасибо за скрипт, продолжаем борьбу с кривож#постью IE6.
Спасибо большое! Мучалась с длинными скриптами, которые все равно не работали. С этим все получилось!
у эелемента был класс… допустим
Мы наводим на на неё курсор… и в ие6 у нас затирается класс, убираем курсор и унас элемент остаётся без класса.
Лично я уже смирился с ИЕ6 и если надо пишу на javascript. Всё такие свое и к месту - быстрее в разы.
Jman, обрати внимание на этот комментарий, Павел предложил решение, которое подходит для твоего случая.
Это не мой случай :), или больше никто не пользуется классами?
У Павла как раз написано правильно.
Просто 6 строчек надо немного поправить, подглядывая в решение Павла.
2
3
4
5
6
<attach for=element event=onmouseout handler=verm>
<script>
function topm(){element.className += ' hover';} // добавляем ещё один класс, а не затираем
function verm(){element.className.replace(/ hover/g, '');} //удаляем только класс ховер, а остальные оставляем.
</script>
во блин, а если код с подсветкой, то можно теги не скрывать было… %)
Jman, спасибо за эту добавку =) Мне пока такой случай не попадался.
Jman
Улучшение скрипта привествуется, но ходелось бы увидеть конкретный пример, где описанная вами ситуация имеет место быть и как ее исправляет ваше предложение.
Ссылка на пример с кратким пояснением, не помешает :)
Уппс, в коде закралась ошибка… перепечатывал бездумно.
2
3
4
5
6
<attach for=element event=onmouseout handler=verm>
<script>
function topm(){element.className += ' hover';} // добавляем ещё один класс, а не затираем
function verm(){element.className = element.className.replace(/ hover/g, '');} //удаляем только класс ховер, а остальные оставляем.
</script>
gordi,
Dimox,
как хостер порешает проблемы с ftp выложу пример, почему скрипт который в топике - неправильный. Но как по мне это очевидно.
Jman
Скрипт рабочий, проверен неоднократно.
Возможно вам нужен несколько иный функционал, но требовать всего и все от простейшего скрипта, еще раз подчеркну, который решает все возложенные на него обязанности, не стоит :)
Ждем конкретного примера.
gordi, как у вас с Javascript? а с версткой? Вы пользуетесь классами? или вы тулите везде divы с id? А занете что у элемента может быть несколько классов? Что существуют селекторы типа .class01+class02 (которые пока не везде работают) Я внёс правильные изменения в скрипт, количество знаков немного увиличилось, строк осталось столько же.
element.className=’hover’; - конуструкция сама по себе деструктиваная, она ведь в тупую трёт классы у элемента.
Нужен пример доказывающий очивидное?
http://myopinion.net.ua/examples/ie6hover/ сначала заходим нормальным браузером и читаем, потом заходим MSIE6
Dimox, а что куки не работают? надоедеает постоянно форму заполнять :)
Да мы это прекрасно понимаем, просто в наших работах не встречаются примеры, когда при использовании hover-скрипта у элемента имеются какие-либо классы. Поэтому мы и говорим, что нам хватает варианта, который я привел в статье. Т.е. у нас с Сергеем, как правило, следующий HTML-код:
2
3
4
5
<li></li>
<li></li>
...
</ul>
Работали. Похоже, я потер какую-то часть шаблона, которая отвечает за это. Знать бы, какую…
Jman
Стоит ли так горячиться?
Решили проблему, молодец :)
Мне она в таком виде не встречалась.
Хотя, сомнения кое-какие есть, и думаю в вашем случае, можно было бы обойтись только средствами CSS.
Но это кто, как может :)
Потому, как ваш пример и в IE6 и IE7 ведет себя одиаково, только не надо мне рассказывать сказки по условные комментарии, ладно :)
Вот где зло. Подключите в таком виде к любому сайту и у вас будут сыпатся в MSIE все классы.
li {behavior:url(”ie6hover.htc”)} — такой способ имеет право на жизнь, при условии что у li не будет классов.
И в место того чтобы оправдыватся и гнать на меня, что я высосоал проблему из пальца
Могли бы просто внести изминение в код и статью. У вас же 1900 подписчиков, из них процентов 20% будут бездумно использовать этот скрипт.
Всё таки я немогу понять почему я должен доказывать очивидное. Давайте сделаем на оборот.
Dimox, если не трудно подключи к своему блогу этот скрипт, так как написано в статье
и посмотри что будет в IE6 и IE7.
Я себя за гуру не считаю, и рад когда мне указывают на мои ошибки. Тут же я вижу ситуацию на оборот.
Я повторю ещё раз, это не мой случай. Я на эту статью попал из поста про итоги года, мне ховер эфект для IE не нужен. Насчёт средств CSS можете мне не расказывать.
Если уж мне сильно нужен будет :hover :active :focus то я лучше буду использывать http://www.xs4all.nl/~peterned/htc/csshover3-source.htc - 200 строк кода, но зато не генерит лишних классов.
Чёт я разошолся. :)
Надо было молча исправить, и написать решение у себя. Тогда бы мне не пришлось ни кому ни чего доказывать.
gordi,
потому как ваш скрипт выполняется там, где есть подержка .htc, тоесть и в MSIE6 и MSIE7 и классы будут продать и там и там. если только не подключить его через условные коменты или хаки. То что пример себя видёт одинкаво в обоих браузерах - так и было задумано. Класс для боди я никогда не присваиваю.Пример был написан только для того чтобы показать как скрипт затирает классы.
Jman
Повторю, не стоит так горячиться, в конце концов, что произошло?
У вас была проблема, вы ее решили, прекрасно.
Нам с Дмитрием она не встречалась, благодаря вам будем знать :)
К чему ваши высказываения в мой адрес по поводу знания или не знания чего либо:
Ваши слова, и заметьте, вы первый начали высказывать претензии ко мне и автору блога, хотя пару-тройку уроков вам бы мы с Дмитрием могли бы дать, не только по html и css, но и по правилам поведения в приличном обществе, будьте сдержанее, по меньше амбиций и апломба, это поможет во многих спорны случаях, компромиссы рулят :)
Тем более делить то, нам не чего в принципе.
А просьба показать пример, что в ней особенного?
Суть вашей проблемы стала яснее и многие, кто сталкнется с ней, вам скажут за это только спасибо.
К автору блога я претензий не высказывал :)
Человек сказал спасибо, и доказывать ничего не просил.
Втягивать третьего (хоть и хозяина блога) не стоит. Говорите за себя.
Учить меня правилам поведения? Не смешите. Давайте не будем переходить на личности.
И я ещё раз повторю — это не моя проблема.
Jman
Еще раз перечитайте себя, что вы писали и что вы имели ввиду говоря:
Никто не требовал от вас доказательств ваше правоты, не будьте смешными.
Была просьба показать пример и ничего более.
И начиналась это словами:
Что в этом такого обидного для вас, что вас так задело за живое?
Следите за своими словами, выражениями и все будет Ok :)
Жизни учат те, кто жить как раз и не умеет. © не помню кто сказал.
хотя пару-тройку уроков вам бы мы с Дмитрием могли бы дать, не только по html и css, но и по правилам поведения в приличном обществе,
от слов “не только по html и css” я даже прослезился.
А на счёт поведения в точку. Именно из-за него меня дважды выгоняли из школы :D
блин. я ещё раз повторюсь. Мне не нужен ни какой функционал.
gordi,
0_о , а где я выражался?
если у вас с javascript и xhtml хорошо (да-да, вы ведь даже собрались дать пару уроков ), тогда почему вы захотели увидеть очевидное.
эта конструкция уничтожает классы.
Jman
Ах, вот в чем причина Вашего на адекватного поведения, простите, ради бога, не знал :)
Тогда в чем дело?
Говорю вам спасибо за исправление.
Надеюсь вы успокоитесь после этого? :(
да, меня зацепило то что “мне нужен какой-то функционал”.
Надеюсь наш спор исчерпан?
Если кого-то не устраивает моя манера общения, то я извиняюсь. gordi ;)
Как раз на оборот, не причина а следствие.
Но опять таки, я ни кому не грубил, и не оскорблял. Я всего лишь высказал сомнение в вашей компетенции.
gordi
Устал вас цитировать.
Читайте внимательно не только себя любимого, ok :)
То, что очевидно для меня или для вас, совсем не очевидно для большинства, примеры подтверждающие очевидное и невероятное, никогда не повредят, согласны?
Закончим на мирной ноте, все уже сказанно :)
В моём понимании выражаться — ругаться матом .
Я шизофренией не страдаю.
предлагаю перейти на ты, и пожать друг-другу руки.
Хватит наверное уже нам флудить. Если вдруг захочется продолжить… icq 986785
Jman
А какие на то у вас были основания?
Может быть вы не доверяете автору блога, который в своей публикации дал прямую ссылку на меня?
Причем в в одном из своих первых комментариев, я сказал, что не являюсь атором скрипта, просто использую его, как есть и все.
Не хочу строить никаких догадок в отнешении вас, но еще раз перечитаейте комментарии и не только свои и многое поймете, если конечно сможете.
С такой манерой общения лучше сами с собой перед зеркалом практикуйте :)
А Вы умеете говорить за себя. Может Вам хватит прикрываться автором блога.
То что он поставил на Вас прямую ссылку, для меня ровным счётом ничего не значит.
Вы для меня не несёте никакого авторитета. Так что Ваши заявления о том что Вы будете меня учить поведению css и html — пустые слова.
Указывать на мою манеру поведения а тем более как мне практиковаться, вам никто права не давал. Не нравится не общайтесь.
Вы слишком высокого о себе мнения и как личность и как профессионал.
Свои догадки можете оставить при себе. Я сказал своё последнее слово. И считаю что дальнейший разговор — бессмысленный. Флудите дальше.
Jman
Ну на конец-то :)
Маленький ребенок обиделся и пошел плакать :)
Стало легче дышать:)
Jman,
Я бы сам никогда не стал пользоваться конструкцией, которая захватывает сразу все теги. Я бы даже запись вида li {behavior:url(”ie6hover.htc”)} сделал еще более уточняющей, т.е. вот так:
А в статье я просто примеры привел. Но теперь понимаю, что обязательно нужны уточнения на счет затирания стилей. В общем, внесу в статью необходимые правки, народ же не знает =)
Еще раз спасибо за дополнение!
P.S. Ничего себе баталии развели, на моем блоге такое впервые =) Зря вы так поцапались…
Тролли :).
Кстати в статье можно описать все три решения.
1 Решение для определенного селектора.
2 Решение Павла через експрешн.
3 Решение для всего документа. (автор не я, это всего лишь симбиоз из первого и второго).
С наступающим :)
Jman, да, пожалуй, так и сделаю. А, возможно, опубликую это в виде новой статьи.
Слава богу, пошел конструктив :)
Что всегда привествуется.
Не забываеи и про примеры :)
А просьбу показать оные, не воспринемаем в штыки, ведь они (примеры), только помогают прояснить те или иные моменты, что в целом приносит пользу всем тем, кто желает совершенствоваться в профессии, и тем для кого это просто хобби :)
Dimox, Ну тогда ждём новую статью, с удовольствием сделаю кросспост
Сергей, хорошо, и живые примеры для сравнения всех вариантов “нарисую” =)
Dimox, Ok
Сам, когда начинал, долго ломал голову, что там имел ввиду тот или иной “гений”, ему-то и одного слова было достаточно, чтобы описать проблему и ее решение :)
А нам смертным думать и думать :)
Поэтому вспоминая прошлое, для своих читателей, всегда только с примерами, как говориться бери и пользуйся, все проверенно мин нет :)
Настраивай, как надо, но вот этого делать ни в коем случае нельзя :)
Ну ты понимаешь :)
Дам-с, как приходит время заниматься IE6, так и хочется переосмыслить все жизненные ценности. Проще всего, наверное, вывести сообщение, мол, обновитесь, и не морочить себе голову :)
Ребят, отметьте в статье, что не стоит цеплять htc’цешку на селектор *. Попробуйте взять очень большую страничку с плотной верстокой(сохраните на винт, например, страницу хабра с большим количестов комментов) и добавьте в стили: “* { behavior:url(”какой нибудь.htc”); }”
Посмотрите что станет с ишаком. На каждый встреченный html-элемент (даже <br /> будет запрашиваться и выполняться скрипт.
Такие вещи (behavior и любые expression) всегда применяются точечно — если они нужены где-то, то надо создать класс и только на него и вешать.
Удачи.
Вот за это - огромное спасибо!
Мда, прочитал все коментарии поста и был очень удивлен тому что Jman говорил о реальных вещах которые и доказательств то не требуют, а ему както сразу и неповерили. Если вы только верстаете и не будете делать функционал то не спешите цеплять на все елементы id, лучше сделайте через class, а программер, если понадобится, сам потом прицепит нужный ему айдишник и по нем разрулит js.
Вот решение которое я когдато применял:
выносим в ie6.css
2
3
4
5
6
behavior: expression(
this.onmouseover = new Function("this.className += ' hover'"),
this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
this.style.behavior = null);
}
ну а в обычном все как и прежде
2
3
4
#navigation li.hover{
background:#f00;
}
Но все же это нестоит применять. Так как експрешн будет тормозить работу браузера, заметно будет на больших страницах