Използване на събитията onMouseOver и onMouseOut, източник на javascript, предварителна задача
Изображенията като обекти В обектния модел, използван от Javascript, обектите са не само прозорец на браузър (прозорец) или уеб страница (документ), но и елементи, включени в уеб документи, като изображения. Това означава, че всеки път, когато програмист използва таг в уеб документ, той създава нов обект. Както при други обекти, представянето на изображения като обекти ви позволява по-късно да промените някои свойства на тези обекти. За да можете програмно да контролирате свойствата на даден обект, обектът трябва да получи име, което ще се използва за препратка към него. В случай на снимки, наименуването на обекта на изображението се постига чрез включване на атрибута NAME: в тага. Тъй като Javascript е чувствителен към малки и главни букви, когато се позовавате на обект на изображение, трябва стриктно да се придържате към това как е дефинирано името на обекта. Това означава, че не можете да използвате имена, написани като "MYIMAGE", "MyImage" и т.н., за да се позовавате на новодефиниран обект.
Всички изображения, включени в уеб страница, са членове на колекцията от изображения, която е едно от свойствата на обекта на документа. Елементите на колекцията са организирани в асоциативен масив, така че имената се използват вместо цифрови индекси за препратка към тях. Например, за достъп до обекта на изображението myImage, използвайте следния синтаксис: document.images["myImage"]. Обектите на изображение имат свойство src (вижте спецификацията на HTML 4), което съдържа URL адреса на файл с изображение, който описва изображението. За допълнителни цели е важно да се отбележи, че това свойство на обекта може не само да се чете, но и да се променя: document.images["myImage"].src="https://codelib.ru/s/javascript/onMouseOver_and_onMouseOut_from_images/newImage.gif"
Работа с onMouseOver иonMouseOut за изображения Текущата HTML спецификация изисква събитията onMouseOver - "мишка над изображение" и onMouseOut - "мишка извън изображение" да се поддържат от всички HTML елементи, включително изображения. Забележка. Тъй като onMouseOver и onMouseOut са атрибути на HTML тагове, те не са чувствителни към малки и големи букви. Следователно няма да е грешка да напишете имената на тези атрибути като onmouseover, onmouseout и т.н. За да създадете динамичен ефект на промяна на картината, когато курсорът на мишката я "премине", трябва да зададете (за съответния обект) функцията за манипулиране на събития onMouseOver. По същия начин, за да възстановите старото изображение, когато курсорът се премести извън картината, трябва да зададете манипулатор на функция за събитието onMouseOut. В основния текст на уеб страницата тагът указва файла с изображение, съответстващ на onMouseOut. Забележка. Браузърът Netscape 4.x поддържа само необходимите свойства за хипервръзки (тага). Следователно манипулаторите, дефинирани директно в тага, няма да работят. Този проблем обаче се разрешава лесно чрез създаване на връзка "никъде": onMouseOut="outFunc()"> NAME="myImage" W > Тъй като в този случай браузърът възприема изображението като хипервръзка, така че рамката около изображението да не се появява, е необходимо да зададете нула на атрибута BORDER в тага. Този трик винаги трябва да се използва, тъй като осигурява съвместимост между различни браузъри. Подготовка за обработка на събития onMouseOver и onMouseOut за множество изображения В Задача 2 трябваше да се напишат две функции, за да се създаде ефектът на промяна на изображението. Ако трябва да се осигури подобен ефект на уеб страница за няколко изображения, тогава ще трябва да напишете двефункции за всяко изображение, което е неудобно. За да контролирате подмяната на няколко картини с една функция, се използва специален набор от трикове. 1. За всяка двойка изображения се създават променливи, които съхраняват имената на файловете с изображения, чиито имена се различават само в окончанията: "_on" - отгоре и "_off" - отвън). Например, ако идентификаторите за двойки изображения се базират на имената first, second и third, тогава трябва да се дефинират следните променливи: var first_off = "image1off.gif"; var first_on = "image1on.gif"; var second_off = "image2off.gif"; var second_on = "image2on.gif"; var third_off = "image3off.gif"; var third_on = "image3on.gif"; Тази селекция от имена е необходима, за да се опрости писането на универсални манипулатори.
2. Освен това, тъй като същите две функции ще бъдат използвани за обработка на събитията onMouseOver и onMouseOut на всички изображения, към тези функции трябва да бъде предаден някакъв атрибут, който ще позволи на манипулаторите да определят кое от изображенията е генерирало това събитие. Тези характеристики са имената, взети като основа на идентификаторите на файла с изображения (първи, втори и трети).