A Bölcsész Vállalkozik



Ebben a blogban nyomon követheted, hogy milyen is az, amikor egy bölcsész 0 tapasztalattal vállalkozni kezd. A tartalomjegyzékhez és a cikkek rövid ismertetőjéhez kattints a fenti linkre!

Friss topikok

Linkblog

Eszköztár: Pop-up ablak generálása

2008.07.21. 23:34 :: laciabolcsesz

Hogy legyen már a sok elmélet között valami gyakorlat is.  A pop-up ablakokat ugyan mindenki utálja, de kétségtelenül működnek, és nagyon megdobhatják a feliratkozók számát. Mivel a készítésük sokaknak gondot okoz, ezért most jöjjön egy lehetséges módszer az elkészítéséhez.

Az alábbi írás html kódokat is fog tartalmazni. A kódoknál vastag betűvel tüntettem fel azokat a változókat, amiknek a nevét neked kell megadnod. A bejegyzés végén látsz egy példatárat, hogy ezek a változók például milyen értéket vehetnek fel.

 

Tehát a Pop-Up készítés lépései:

ELSŐ LÉPÉS: Készíts egy képet, ami a popup ablakod lesz. Így fog kinézni a popup. A Háztartási Tippek oldalon ez a kép például a 3 összetűzött jegyzetlap, plusz a rajta lévő szövegek és az ajándék termék képe. A feladat elvégzéséhez javaslom a Photoshopot. Ha ez nincs meg, akkor az ingyenes Gimp jó választás lehet. Ennek menetébe most nem mennék bele, mert az egy másik bejegyzés lenne. Egyszerű popupok létrehozásához elvileg persze a Paint is elég lehet (ez a Windows rendszer része, ha az fut a gépeden).

Tipp: Ha nem értesz ezekhez, inkább keress valakit, aki meg tudja neked csinálni, mert a kezelésük megtanulása azért nem két perc!

 

MÁSODIK LÉPÉS: Vedd elő az oldaladat (mondjuk, hogy ez egy .html fájl), és nyisd meg egy szövegszerkesztőben. Javaslom a Jegyzettömböt, de ha valami komolyabb kódkiemelővel ellátott jegyzettömbprogramot szeretnél, akkor használd az ingyenes Notepad++ programot (magyarul is elérhető). Linuxon, BSD-n a Kate javasolt.

Tipp: A Notepad++ programot azért érdemes használni, mert kódkiemelés van benne, tehát pontosan látod, ha elfelejtettél lezárni egy taget, vagy egy sort, nem raktál ki valahová egy idézőjelet, stb. Ha nem értesz a HTML-hez semmilyen szinten, akkor kérj meg valakit, vagy kezdj el olvasni az alapokról.

 

HARMADIK LÉPÉS: Keresd meg a HEAD taget. Mit is jelent ez? Lesz a .html fájlban egy ilyen:

<head>
VALAMI
</head>

Hogy a HEAD tagek között mi lesz neked, azt nem tudom. Ne ijedj meg, ha az a valami nagyon, akár sok-sok sor hosszú, és először nem találod a </head> zárótaget. A lényeg az, hogy a head nyitótag <head> és a head zárótag </head> közé valahová illeszd be az alábbi kódot:

<script type="text/JavaScript">
<!--

function getStyle()
{
var temp = document.getElementById("VALTOZO_1").style.visibility;

return temp;
}

function switchMain()
{

var current = getStyle();

if( current == "visible" )
{
document.getElementById("VALTOZO_1").style.visibility = "hidden";
}
else
{
document.getElementById("VALTOZO_1").style.visibility = "visible";
}
}
//-->
</script>

Ne vegyél ki ebből semmit, még a comment részt sem, mert szükség van rá. Így nem jelenik meg valami randa hibaüzenet, ha egy régebbi böngészővel nézik az oldalad, amin valamiért a javascript nem működik normálisan. Ha nem tudod mi a comment rész, akkor meg főleg ne nyúlj hozzá. A "VÁLTOZÓ_1"-et természetesen írd át valamire, amire csak akarod, csak figyelj oda, hogy mindenhol, ahol "VALTOZO_1"-et látsz (a későbbiekben is), oda ugyanaz a szó kerüljön.

 

NEGYEDIK LÉPÉS: Keresd meg a BODY zárótaget a fájlban. Ez így néz ki: </body>. Tedd be elé a következő kódot:

<div id="VALTOZO_1" style="position:absolute; left:420px; top:40px; width:453px; height:525px; z-index:2; visibility: visible; background-image: url(VALTOZO_2); layer-background-image: url(VALTOZO_2);" align ="CENTER">

IDE JÖN AMIT A POP-UP ABLAKON MÉG FEL SZERETNÉL TŰNTETNI. HA NINCS SZÖVEG A HÁTTÉRKÉPEN, AKKOR IDE JÖN A SZÖVEG IS! PLUSZ IDE JÖHET A FELIRATKOZÓ ŰRLAP IS!

<a href="#"  onclick="switchMain()">bezár x</a>

</div>

Láthatod, hogy ebben a kódban is van egy VALTOZO_1 ennek meg kell egyeznie azzal, amit az előző kódban is használtál nem véletlenül ugyanaz. A VALTOZO_2 a pop-up ablakod képének az elérési útvonala lesz.

 

ÖTÖDIK LÉPÉS: Írd át a változókat, hogy stimmeljenek. Milyen értékeket vehetnek fel a változók?

VALTOZO_1: lehet bármilyen karaktersor. Például: csali, feliratkozo, tanulmany, ebook, stb. Mindegy milyen szót adsz meg, csak arra figyelj, hogy mindenhol, ahol VALTOZO_1 szerepel, ott ugyanaz a karaktersor szerepeljen! Tehát ha az egyik helyen átírod a VALTOZO_1-et mondjuk "bela"-ra, akkor az összes helyen írd át.

VALTOZO_2: ezt mindenképpen át kell írnod, mert itt kell megadnod a pop-up ablakot ábrázoló képnek az elérési útvonalát és nevét a szervereden. Például, ha a kép neve "popup.gif", és azt webes gyökérkönyvtárból számítva a "kepek" könyvtárba tetted, akkor ezt kell írnod a helyére: kepek/popup.gif.

A pop-up elhelyezkedését "left:420px; top:40px; width:453px; height:525px" az ebben a részben megadott értékek átírásával tudod megváltoztatni. Ez azt jelenti, hogy a tetőtől 40, a bal széltől pedig 420 pixelre jelenítse meg a popupot 453 pixel szélesen és 525 pixel magasan. Ez utóbbi kettő érték természetesen a pop-upod képének a szélessége és a magassága. Játssz velük! Írd át az értékeket, és nézd meg mi történik, aztán helyezd el oda a popupodat, ahová te szeretnéd!

Ha a bezár gomb helyére szeretnél egy képet tenni, ahelyett, hogy egyszerűen csak egy "bezár x" felirat legyen, írd be a következőket (nem tudom, hogy működik-e, ezt már én találtam ki az alapján, hogy más oldalakat is megnéztem):

<a href="#"  onclick="switchMain()"><img src="VALTOZO_3" width="15" height="15" alt="Bezár" border="0" style="vertical-align:middle; margin-left: 15px;"></a>

A VALTOZO_3 természetesen a bezárógomb képének lesz az elérési útvonala (pl.: kepek/bezar.gif). A width, és a height a kép szélességét és magasságát jelöli. Érdemes próbálgatni.

Tipp: Most, hogy látjátok a kód alapját, menjetek, és nézzétek meg, hogy ki hogyan csinálja a pop-up ablakot. Látogassatok el olyan oldalakra, ahol tudjátok, hogy van pop-up, és nézzétek meg a lap forráskódját. Firefox alatt CTRL+U, iExplorer esetén meg jobb gomb, és "View Source" forrás megtekintése (vagy hasonló, nekem nem magyarul van).

További olvasáshoz keressetek rá a "showModalDialog" módszerre.

Jó pop-up ablak generálást!
 

 

3 komment

Címkék: popup ablak

A bejegyzés trackback címe:

https://vallalkozobolcsesz.blog.hu/api/trackback/id/tr80579144

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

David 2008.07.23. 15:46:46

Hello,

köszi szépen az info-t, nekem csak egy gondom van vele, méghozzá az, hogy mikor rákattintok a bezárás gombra, akkor nem zárja be.

Azt írtad, hogy:
"NEGYEDIK LÉPÉS: Keresd meg a BODY zárótaget a fájlban. Ez így néz ki: . Tedd be elé a következő kódot:"
Nem működött, megnéztem a te oldaladat, és ott a body zárótag, sőt a html zárótag mögött van ez a kód, beraktam magamnak is, de úgy se jó.

Remélem tudsz majd segíteni!
Előre is köszi,
Üdv,
Dávid

isss 2008.08.27. 22:01:08

Szia! Nekem sem működik a bezár gomb az extra.hu - n. Előre is köszi.