На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » HTML/DHTML

Как сделать подсказку к ссылке и рисунку, управление видимостью объекта, изменение содержания блока

Задают все вопросы: как сделать подсказку к ссылке, к рисунку, как изменять комментарии к пунктам меню. Вопросы, по идее, старые, забитые, давно всеми "обсосанные" со всех сторон...

Ладно уж... Хотя, мне лично интересен сам вопрос применения подобных эффектов на веб-станице в принципе, так сказать. Или уже не интересен...

Самое распространенное применение подобных эффектов— выведение подсказок к пунктам меню. Я вполне понимаю применение подсказок и комментариев в том случае, если пункты меню совершенно не понятны "среднему" посетителю, выполненны в виде графических вставок и сами пояснения имеют приличные размеры. Но если у вас совершенно обычное меню с понятным содержанием, то зачем нужны подсказки? Если меню ваше в виде обычных текстовых ссылок, то выгоднее просто несколько понятнее описать пункты меню. И в поисковиках будет более ревалентно. Это "лирическое" и практическое отступление сделанно с одной целью— подумайте перед применением подобных решений, действительно они вам нужны? Часто, конечно, подобное дополнение просит поставить заказчик, так круче, на его взгляд...


Первое
Самое простое и, часто, оптимальное решение— обычные всплывающие подсказки. Для рисунков они задаются— ALT="текст пояснения" Альтернативный текст для рисунка на тот случай, если он по неизвестной нам причине не загрузится или отключено отображение рисунков, для текстовых и голосовых броузеров.
Для ссылок, да и для всех почти элементов можно применить TITLE="текст пояснения" Для рисунков подобный метод тоже применим. Вписываем все это добро прямо в тэг элемента и наслаждаемся результатом— размер минимальный, если пояснение сделанно коротко и "по делу", то все вполне прочитывается за время видимости подсказки. В Нетскейпах четвертых версий ТИТЛ не работает... Да, кстати, такие подсказки работают в меню разделов вверху данной страницы.


Второе
Тоже очень простое решение, не требует ни ума, ни опыта— выведение подсказки в строку статуса. Перед применением подобного "выверта" стоит подумать о тех посетителях, которые не имеют понятия о статусной строке или используют ее "по прямому назначению"— смотрят адрес страницы, на которую ссылается какая либо определенная ссылка. Лично меня подобные подсказки просто бесят...

Делаем так: <B onmouseover="window.status='Текст пояснения';" onmouseout="window.status='Текст по умолчанию';" >onmouseover="window.status='Текст пояснения';" onmouseout="window.status='Текст по умолчанию';"

Для примера подведите мышА к приведенному выше описанию и смотрите в строку статуса. Как видите, после отведения мышки в статусе остается текст "по умолчанию", можно там прописать название сайта, например. В самом начале, в БОДИ, рекомендую поставить onload="window.defaultStatus='Текст по умолчанию'" тогда на вашей страничке подобная "погань" будет "торчать" с самого момента загрузки страницы.


Третий вариант
Управление видимостью объекта. В определенный блок или слой впихиваем свой комментарий и делаем его видимым толко при наведении мышки на определенный элемент меню. Пишем скрипт:


<SCRIPT language=JavaScript>
<!--

dom = (document.getElementById)? true:false
ns4 = (document.layers)? true:false
ie4 = (document.all && !dom)? true:false

function init() {
if (dom) block = document.getElementById("blockDiv").style
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
}

function showObject(obj) {
if (ns4) obj.visibility = "show"
else obj.visibility = "visible"
}

function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else obj.visibility = "hidden"
}

//-->
</SCRIPT>

А само появление объекта будет управляться так:


<A href="javascript:showObject(block)">show</A>
<A href="javascript:hideObject(block)">hide</A>

Сам объект будет "обзываться" так:


<DIV id=blockDiv >Пояснение</DIV>

Работает и в нетскейпах четвертых версий. Только вот все это прописывать, все эти скрипты...


Вариант четвертый
Милый моему сердцу, так сказать. :) О том, что нетскейпы четвертые можно назвать "живыми трупами", я уже говорил, исходя из этого можно все сделать очень просто с использованием стилевых спецификаций. Пример пока приводить не буду, объясню все "на пальцах". Не путать с "рамсами"! :)

Основы всего нашего будущего "изобретения" можно найти в разделе о БЛОЧНЫХ СТРУКТУРАХ. Что мы будем делать— мы создаем необходимый набор блоков в описании классов которых, кроме расположения, размеров и всего прочего указываем visibility:hidden; Мы получаем некий набор невидимых изначально блоков, содержащих нужную нам информацию. Теперь просто создаем еще один класс, в котором указываем только visibility:show;— больше ничего! Теперь смотрим или СОЗДАНИЕ МЕНЮ ЗА ПЯТЬ МИНУТ в разделе о блоках или отдельную статью об изменениях классов в разделе об общем применении стилей. Нам просто надо изменить класс невидимого блока на тот класс, в котором у нас указанна видимость. Так как кроме visibility:show; тот класс не содержит больше никаких описаний стилей, то и меняться будет только свойство visibility. Все остальные стилевые описания останутся без изменений— расположение, цвета, все остальное, что вы там нагромоздили. :) Если все слои на одном месте должны находиться, можно им назначить разный ЗЕТ-ИНДЕКС. Как видите, все опять просто, даже элементарно... В Ватсоны пойдете? :)

Мое описание изготовления выпадающего меню многие обозвали "извратом", но используют с удовольствием. :) Вполне возможно, что и этот вариант можно отнести к подобным извращениям... Скриптов тоже минимум, одна строчка. Если данное описание вызовет интерес и возникнут сложности с реализацией, обязуюсь сделать работающий пример для наглядности.


Пятый вариант
Привожу код для начала:


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

function movein(which,html){

if (document.getElementById)
document.getElementById("boxdescription").innerHTML=html
else
boxdescription.innerHTML=html
}

function moveout(which){

if (document.getElementById)
document.getElementById("boxdescription").
innerHTML='\<CENTER\>Текст по умолчанию\</CENTER\>'
(предыдущие две строки
пишутся в одну! Перенос сделан
для удобства размещения!)

else
boxdescription.innerHTML='\<CENTER\>
Текст по умолчанию\</CENTER\>'
}

//-->
</script>

Этот скрипт "заталкиваем" в ХЕАД


<DIV ALIGN="left" VALIGN="center" id="boxdescription" >
<CENTER>Текс по умолчанию</CENTER>
</DIV>

Это тот блок, в который будут выводиться наши подсказки


<a href="адрес"
onmouseover="movein(this,' Текст подсказки');"
onmouseout="moveout(this);">портфолио:</A>

А так делаем выведение подсказки при наведении мышА на ссылку. Внимание обратить стоит на boxdescription в скрипте и в имени блока, назвать можно как угодно, только не запутаться. В данном примере использованно свойство innerHTML, оно позволяет выводить не только текст, но и тэги. Для примера использован тег ЦЕНТЕР. Обратите внимание на обратный слэш перед открывающей скобкой тэга. Данный пример будет работать в Эксплорерах и Нетскейпе шестом. Для четвертых нетскейпов можно тоже сделать подобный эффект, но код сильно усложниться и надежность его... Ну, не очень, так скажем.


Алямкин Илья Юрьевич
S.T.Y.L.E.mtk.on.ufanet

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100