Paano Gumawa Ng Isang Pop-up Na Imahe

Talaan ng mga Nilalaman:

Paano Gumawa Ng Isang Pop-up Na Imahe
Paano Gumawa Ng Isang Pop-up Na Imahe

Video: Paano Gumawa Ng Isang Pop-up Na Imahe

Video: Paano Gumawa Ng Isang Pop-up Na Imahe
Video: POP-UP tutorial | 3-layer Rotation Bunny on The Moon | OCT Mid-Autumn Theme Bullet Journal Coverpage 2024, Nobyembre
Anonim

Ang pop-up o pop-under windows ay nagiging mas popular sa Internet. O, mas simple, mga pop-up na larawan. Maraming mga may-ari ng site ang madalas na gawin ang mga ito para sa mga layunin sa advertising, ngunit hindi alam ng lahat ang algorithm para sa kanilang paglikha.

Paano gumawa ng isang pop-up na imahe
Paano gumawa ng isang pop-up na imahe

Kailangan iyon

  • - HTML editor;
  • - kuwaderno;
  • - pagho-host.

Panuto

Hakbang 1

Lumikha o magbukas ng isang bagong web page sa HTML o isang text editor. Maaari mong gamitin ang mga tanyag na programa tulad ng Dreamweaver, Expression Web at iba pa para sa hangaring ito. Kung ginagawa mo lang ang iyong mga unang hakbang sa wikang pagprograma ng HTML, gumamit ng isang regular na "notepad".

Hakbang 2

I-paste ang sumusunod na code sa pagitan ng mga tag na "head" at "/ head":

.thumbnail {posisyon: kamag-anak; z-index: 0;}

.thumbnail: mag-hover {background-color: transparent; z-index: 50;}

.thumbnail span {/ * CSS para sa pinalaki na imahe * / posisyon: absolute; background-color: lightyellow; padding: 5px; kaliwa: -1000px; hangganan: 1px dashing grey; kakayahang makita: nakatago; kulay itim; dekorasyon sa teksto: wala;}

.thumbnail span img {/ * CSS para sa pinalaki na imahe * / border-width: 0; padding: 2px;}

.thumbnail: hover span {/ * CSS para sa pinalaki na imahe sa hover * / visibility: nakikita; itaas: 0; kaliwa: 65px; / * posisyon kung saan ang pinalaki na imahe ay dapat na mabawi nang pahalang * /}

Hakbang 3

Ayusin ang pahalang na offset ng popup imahe sa pamamagitan ng pagbabago ng halaga sa huling linya ng code. Maglaan ng espasyo sa pagitan ng mga tag na "body" at "/ body" kung saan mo nais na lumitaw ang imahe sa web page. Pagkatapos kopyahin at i-paste ang sumusunod na code:

Halimbawa ng isang pamagat ng teksto

Isang halimbawa ng pamagat ng teksto"

Hakbang 4

Palitan ang "folder / pinakamalepci1.jpg" ng file na ginamit para sa popup na larawan. Gawin ang pareho sa pangalawang bloke ng code. Baguhin ang linyang "Halimbawa ng pamagat ng teksto" dito sa dapat na nakasulat sa imaheng pop-up. Baguhin din ang mga halaga ng taas at lapad sa code upang ayusin ang laki ng imaheng pop-up. Lumikha ng mga karagdagang bloke ng code upang magdagdag ng higit pang mga sketch. Ipasok ang iba pang mga katangian, tag, at teksto sa dokumento ng HTML kung kinakailangan. I-save ang HTML file at pagkatapos ay i-upload ito sa iyong web server.

Inirerekumendang: