 ³íòåðíåò³ ñòຠâñå á³ëüø ïîïóëÿðíèìè pop-up àáî pop-under â³êíà. Àáî ïðîñò³øå êàæó÷è, ñïëèâàþ÷³ êàðòèíêè. Áàãàòüîì âëàñíèêàì ñàéò³â ÷àñòî äîâîäèòüñÿ ¿õ ðîáèòè â ðåêëàìíèõ ö³ëÿõ, àëå äàëåêî íå âñ³ çíàþòü àëãîðèòì ¿õ ñòâîðåííÿ.
Âàì çíàäîáèòüñÿ
- - HTML ðåäàêòîð;
- - áëîêíîò;
- - õîñòèíã.
²íñòðóêö³ÿ
Ñòâîð³òü àáî â³äêðèéòå íîâó âåá-ñòîð³íêó â HTML àáî òåêñòîâîìó ðåäàêòîð³. Âè ìîæåòå âèêîðèñòîâóâàòè äëÿ ö³º¿ ìåòè òàê³ ïîïóëÿðí³ ïðîãðàìè, ÿê Dreamweaver, Expression Web òà ³íø³. ßêùî âè ò³ëüêè ðîáèòå ïåðø³ êðîêè â ìîâ³ ïðîãðàìóâàííÿ HTML, ñêîðèñòàéòåñÿ çâè÷àéíèì «áëîêíîòîì».
Âñòàâòå öåé êîä ì³æ òåãàìè "head" ³ "/ head:
" < style type="text/css">
.thumbnail {position: relative- z-index: 0-}
.thumbnail: hover {background-color: transparent- z-index: 50-}
.thumbnail span {/ * CSS for enlarged image * / position: absolute- background-color: lightyellow- padding: 5px- left: -1000px- border: 1px dashed gray- visibility: hidden- color: black- text-decoration: none- }
.thumbnail span img {/ * CSS for enlarged image * / border-width: 0- padding: 2px-}
.thumbnail: hover span {/ * CSS for enlarged image on hover * / visibility: visible- top: 0- left: 65px- / * position where enlarged image should offset horizontally * /}
< / style > "
" < style type="text/css">
.thumbnail {position: relative- z-index: 0-}
.thumbnail: hover {background-color: transparent- z-index: 50-}
.thumbnail span {/ * CSS for enlarged image * / position: absolute- background-color: lightyellow- padding: 5px- left: -1000px- border: 1px dashed gray- visibility: hidden- color: black- text-decoration: none- }
.thumbnail span img {/ * CSS for enlarged image * / border-width: 0- padding: 2px-}
.thumbnail: hover span {/ * CSS for enlarged image on hover * / visibility: visible- top: 0- left: 65px- / * position where enlarged image should offset horizontally * /}
< / style > "
³äðåãóëþéòå ãîðèçîíòàëüíå çì³ùåííÿ ñïëèâàþ÷îãî çîáðàæåííÿ, çì³íèâøè çíà÷åííÿ â îñòàííüîìó ðÿäêó êîäó. Âèä³ë³òü ïðîñò³ð ì³æ òåãàìè "body" ³ "/ body, òàì, äå âè õî÷åòå, ùîá çîáðàæåííÿ ç'ÿâèëîñÿ íà âåá-ñòîð³íö³. Ïîò³ì ñêîï³þéòå ³ âñòàâòå íàñòóïíèé êîä:
< a class="thumbnail" href="#thumb">
Ïðèêëàä íàçâè òåêñòó
< a class="thumbnail" href="#thumb">
Ïðèêëàä íàçâè òåêñòó "
< a class="thumbnail" href="#thumb">
Ïðèêëàä íàçâè òåêñòó
< a class="thumbnail" href="#thumb">
Ïðèêëàä íàçâè òåêñòó "
Çàì³í³òü "folder / largepci1.jpg" íà ôàéë, âèêîðèñòîâóâàíèé äëÿ ñïëèâàþ÷³é ôîòîãðàô³¿. Òå æ ñàìå âèêîíàéòå ç äðóãèì áëîêîì êîäó. Çì³í³òü â íüîìó ðÿäîê «Ïðèêëàä íàçâè òåêñòó» íà òå, ùî ìຠáóòè íàïèñàíî íà ñïëèâàþ÷³é êàðòèíö³. Ïîì³íÿéòå òàêîæ çíà÷åííÿ âèñîòè ³ øèðèíè â êîä³, ùîá íàëàøòóâàòè ðîçì³ð pop-up çîáðàæåííÿ. Ñòâîð³òü äîäàòêîâ³ áëîêè êîäó, ùîá äîäàòè á³ëüøå åñê³ç³â. Ââåä³òü ³íø³ àòðèáóòè, òåãè ³ òåêñò â HTML-äîêóìåíò³ â ðàç³ ïîòðåáè. Çáåðåæ³òü HTML-ôàéë, à ïîò³ì çàâàíòàæòå éîãî íà ñâ³é âåá-ñåðâåð.
ßê çâ'ÿçàòè ìîäíèé áåðå ñïèöÿìè
ßê ïëåñòè òåìëÿê
ßê ïîë³ïøèòè ïðàöåçäàòí³ñòü êîìï'þòåðà
ßê ïðîâîäèòè ñåì³íàðñüê³ çàíÿòòÿ
ßê ïðèãîòóâàòè âàðåíó êàðòîïëþ
ßê îòðèìàòè ïîñâ³ä÷åííÿ âîä³ÿ
ßê çàïëàòèòè àâòîìîá³ëüíèé ïîäàòîê
ßê ïðîäàòè êâàðòèðó êîëèøíüîìó ÷îëîâ³êîâ³
ßê êóïèòè ïîäåðæàíèõ àâòîìîá³ëü