логотип

Доброго времени суток, дамы и господа.
И хватит о добром на сегодня...

© Сергей Доренко

Нравится мне этот Доренко, такой оптимстичный, веселый такой ;-) Ему бы книжки детские писать, а он... Эх, зарывает человек ведь талант, зарывает... И хватит о нем ;-)

Нравится мне это или нет, но пришла пора извиняться. Мне, естественно, ибо это выпуск ждал своего часа чуть ли не целый месяц ;-( Да, стыдно, товарищ смотритель, стыдно... Но что делать, сессия, обрыв связи, неурожай риса в Китае и еще много подобных "маленьких неприятностей", как говорит одна девочка в рекламе, отрывали мои непоседливые ручки от клавиатуры. Но все, конец всем бедам, сессию я сдал, связь восстановилась, а "маленькие неприятности" у вышеупомянутой девочки перешли в разряд "больших" ;-) Так что больше ничто не стоит между мной и вами, дорогие подписчики. Я только что вернулся с фазенды Дона Паппы, где занимался окучиванием бататов, и теперь душа жаждет интеллектуального труда. Вперед - к победам программизма!

Кстати, о вас, мои читатели (тьфу, чуть не написал - почитатели ;-)) - я был поражен, но нас, больных, уже почти 300. Не так уж и плохо для рассылки, которая, собственно, еще и не выходила ;-) Будем продолжать в том же духе.

Напоследок, кратенько о сегодняшнем выпуске. Он будет построен по схеме школьного сочинения: вступление, ответы на письма, немного по теме, заключение. Вступление вы только что прочли.

Итак, сегодня нам пишут Машенька и Дашенька, и вот по каким вопросам:

Машенька: "Как сделать,чтобы при прокрутке страницы фон оставался на одном месте, а текст с картинками двигался?"
Дашенька: "Что нужно сделать, чтобы при наведении курсора на картинку-ссылку появилась другая, т.е. эффект светящейся или нажатой кнопки?"

Что ж, попробуем ответить.

Ответ Машеньке:

Да, такая тема есть. Правда, насколько я знаю, она работает только для IE 4.0 и выше. NC её пока не поддерживает (во всяком случае ниже версии 4.6). Так что, если ты хочешь писать переносимый HTML, то три раза подумай, прежде чем использовать такую экзотическую штуку. Но... дело твое ;-)

Итак, коротко и ясно, сразу синтаксис:

<body background="тра_ля_ля" ... bgproperties=fixed>
Тут все вроде бы понятно: "тра_ля_ля" - это имя картинки на фон, многоточие - остальные свойства body, и самое важное - там, в конце. в связи с таким вопросом, хотелось бы затронуть и стили. Чтобы писать стильные страницы, Машенька, надо уметь пользоваться стилями. Кстати, раз уж поднялся такой вопрос, стоит обсудить еще пару-тройку стилей тэга body. Этим и займемся ;-)

Кто был на домашней страничке Смотрителя, тот наверное видел что-то вроде ободранного краешка папируса, идущие по левому краю странички. А может кто-то увидел там и вовсе обкусанные листочки обоев - тут все ограничивается воображением ;-) Эти самые краешки и были сделаны при помощи стилей привязки и повторения. Вот их неполный список (полный знают БГ и еще пара-тройка умных ребят:-)) Итак...

background-attachment

Хехе, сюрприз! Имеет три значения, два из которых полезны. Вот они: scroll и fixed. Одним словом, используя этот стиль, зафиксировать фоновое изображение Машенька могла бы и так:

<body ... style="background-attachment:fixed">
Очевидно, что scroll - это значение стиля по умолчанию, иначе бы у людей возникал вопрос "а как заставить его вертеться?"

background-repeat

Вот его-то Смотритель и использовал в своем "папирусе". Данный стиль управляет повторением фонового изображения на страничке. Имеет четыре значения:

  • repeat - по умолчанию, повторять по вертикали и горизонтали.
  • repeat-x - повторять по горизонтали.
  • repeat-y - повторять по вертикали, использовался Смотрителем .
  • no-repeat - не повторять вообще, рисовать один раз.
Маленькое но. Не советую использовать в NC 4.x... Ох не советую... ;-)

background-position

Тоже бодрый стиль. Управляет положением фоновой картинки на страничке. Используется стандартный синтаксис с использованием значений [X% Y%], [X Y], либо [left|center|bottom top|center|bottom] (надеюсь, я выражаюсь понятно? для непонятливых - пример подальше :-)) Вот как прижать, к примеру, фоновое изображение к правому краю:

<body ... style="background-position:right top;"
В связи с этим возникает маленький ньюанс... Во первых, не стоит использовать данные выкладки на NC4.x, а во вторых, IE4.x размножает фоновые картинки только вниз-вправо, но никак не вверх-влево. Так что, Машенька, опасайся прорех в фоне ;-)))

Ну, Машенька, хватит тебе на сегодня, утомила ;-)

Ответ Дашеньке:

Это так просто, что существует очень много методов. Хотя, если посмотреть правде в глаза, все они, в конечном итоге, делают одно - подменяют свойство src тэга img. Я опищу ту методу, которую использовал в своей последней работе.

Делается все так: сначала рисуются две картинки, желательно одинакового размера ;-) Называются они примерно так: "tralala1_1.gif" и "tralala1_2.gif", или там какое еще расширение :-) (кстати, похоже: тра-ля-ля - сегодня слово выпуска просто ;-) ) Считаем, что первая картинка - это которая погашена, а вторая типа как светится, и также что они находятся в том же каталоге, что и HTML, их использующий.

Дальше где-то, где ты, Дашенька, собиралась разместить эту красивую кнопочку, мы напишем:

<img src="tralala1_1.gif" name="tralala1" onmouseover="lite(1)" onmouseout="dark(1)">
Итак, что здесь что... src явно указывает на "темную" картинку, name я выбрал сам, это будет имя объекта для JavaScript'а Дашенькиного HTML'а. Функция lite будет зажигать кнопочку по наведению мышки, а функция dark - гасить ее. Почему я их так назвал? Люблю английский язык, знаете ли ;-)

Теперь надо написать сами функции зажигания и гашения кнопочки. Ладно, я использую для этого JavaScript, ибо язык достатчно простой и мне нравится. Итак, где-нибудь в HEAD-области страницы напишем вот такую кучу текста:

<script language="JavaScript">
<!--

//функция зажигания кнопки
function lite(whom)
{
	a="tralala";
	a+=whom;
	document.all(a).src=a+"_2.gif";
}

//функция гащения кнопки
function dark(whom)
{
	a="tralala";
	a+=whom;
	document.all(a).src=a+"_1.gif";
}
//-->
</script>

Замечательно, теперь разберем, как это работает... Функции похожи, потому разберу только первую из них. Вначале некой переменной а присваивается некое слово tralala, случайным образом совпавшее с началом названия файлов-картинок и с именем кнопки внутри HTML'а. Потом к нему прибавляется параметр, переданный в функцию, а на самом деле - это просто какое-либо число, являющееся окончанием начала ;-) имени файла-картинки, плюс окончанием имени кнопки. И все. Конструкция document.all("что_то") возвращает объект с именем "что_то", а так как мы (и Дашенька) уже знаем, что это объект img, имеющий свойство src, то мы этому свойству присваиваем имя файла с соответствующей картинкой.

Круто! Жаль, всегда надо помнить о том, что название кнопок внутри HTML'а должно совпадать с началом названия файлов-картинок. Зато очень просто использовать одну и ту же маленькую элегантную функцию для многих кнопок, экономя место в тексте.

Я не спорю, может найдутся способы и получше, это не вершина, конечно же. Если кто знает - шлите Смотрителю

Все, Дашенька, ты тоже утомила меня ;-)))

А по теме сегодня действительно будет немного. Утомленный Машенькой и Дашенькой, я решил спросить вашего, подписчики совета. Куда бы нам направить стопы своих исследований? Тут есть несколько перспективных, на мой взгляд, направлений. Во-первых, это CSS - каскадные листы стилей. Мощнейший инструмент по созданию динамического HTML, тем не менее не менее опасный для переносимых страниц. Во вторых - это layers - слои, тоже, видимо, интересная тема для пары-тройки выпусков. И, в третьих, глобальное - Server-Side-Scripting, три зловещих "S", которые рассматривать и рассматривать. Итак - каковы приоритеты интересности для вас, подписчики? Пишите мне.

Кстати, тут недавно у меня произошел спор с одним веб-мастером, девушкой, кстати, по поводу того, какой же все же браузер лучше, NC или IE. Я понимаю, конечно, что спор вечен, но все же мне было бы интересно узнать и мнение "независимой аудитории". IE, к слову, нам навязывается, чем и можно объяснить его превалирование на рынке. А вот объективного мнения об обоих гигантах браузинга я так и не слышал. Кроме как от себя, ессесьна ;-)))).

И последнее. Опять же появился интересный вопрос. Фреймы - за и против. Не секрет, что можно сделать сайт и без фреймов, несмотря на расхожее мнение, что навигация осуществляется непременно в их контексте. Опять же хотелось бы узнать мнение аудитории, что сейчас предпочтительнее - страницы "листовой" компоновки, без, или с минимумом (не больше 2-х) фреймов, либо жестко увязанные многофреймовые сайты.

Лето - это хорошо. Хорошо, когда тепло, хорошо ночью и с запасом пива ;-) Вообще, жизнь улучшается, чего и вам желаю :-)))

Sincerely yours, Смотритель
Заходите как-нибудь на PYCHICKHOUSE


[ наверх ] | [оставить мнение] | [блог] | [я в контакте]