Подсказка

В началото на запознаването с HTML изглежда, че в него има достатъчно от всичко и някъде дори има нещо излишно. Но с натрупването на знания и опит започват да възникват въпроси, чиито отговори ги няма в учебниците. Един от тези въпроси звучи по следния начин: "как бихте украсили подсказка?".

И така, как се изпълнява такъв намек?

Параметърът за видимост е зададен на скрит, защото Първоначално подсказката трябва да бъде скрита. Ширината на този блок е 400 пиксела, а височината варира в зависимост от съдържанието и е не по-малко от 10 пиксела. Също така, за визуално отделяне на подсказката от основното съдържание, тя е рамкирана с черна рамка с дебелина 1 пиксел.

Сега трябва да накараме подсказката да се показва, когато мишката се задържи върху нещо. Например, ще се появява и изчезва над картината:

Тоест, когато преместите мишката върху картината, функцията movePic() ще бъде извикана със стринг параметър - подсказката - който ще покаже div-блок до показалеца на мишката, а когато бъде премахнат, ще бъде извикана hidePic(), която ще го скрие обратно.

Следва скриптът за показване и скриване на подсказката. Скриването е много по-лесно от показването, така че първо hidePic():

    Тази опция вече работи, но има недостатъци:
  • ако документът може да се превърта (както обикновено е), тогава правилно подсказката ще работи само в горната позиция на екрана, тъй като clientX и clientY връщат само относителни координати на мишката.
  • ако обектът, който изскача подсказката, е разположен по-близо до десния край на прозореца, тогава той ще изпълзи извън екрана и страницата ще се разтегне.
  • същото с долния ръб.

Сега е време да коригираме грешките. Всъщност всички горепосочени недостатъци се решават много лесно:

  • достатъчно за определяне на височинатапревъртената част на документа
  • прави се проверка за позицията на курсора спрямо десния край.
  • същото с долния ръб.

Обикновено те правят подсказка, която следва курсора на мишката. Това се постига по следния начин. Първо, функцията трябва да се извика не onmouseover, а onmousemove, и второ, низът, предаден на функцията movePic(), трябва да бъде изпратен до тялото на подсказката само веднъж (в противен случай могат да се появят различни видове отблясъци и т.н., особено ако има картина в подсказката). Следва целият код на документа.