Tu znowu Julka.
Przepraszam za to, że nie dodałam wcześniejszej notki,
ale nie mogłam wejść na lapka :C
W dzisiejszej notce dam wam kod na "pozdrowionka".
Jest to bardziej gadżet niż przydatne cuś na bloga.
Na początku demonstracja:
No więc wchodzimy na bloga i widzimy
z boku taki znaczek.
Oczywiście jesteśmy Polakami, więc musimy sprawdzić co to jest.
Klikamy i ukazuje się przed nami coś takiego.
Dziwimy się i wpisujemy byle co.
A oto przed nami wyskakuje miła niespodzianka (chociaż znaczek mówił sam
za siebie).
Jakież to miłe ^^
To teraz nadszedł czas na instrukcję, mam nadzieję, że chociaż w połowie
coś z tego zrozumiecie.
Jest to kod javascript na coś w rodzaju
alertu, ale to nazywa się prompt,
czyli że można coś do tego okienka wpisać
(jest jeszcze okienko confirm, ale to już inna bajka).
Oprócz kodu javascript dam wam kod na css dla tego okienka,
ponieważ znając ludzi nie wszyscy by chcieli mieć zwyczajny napis zamiast
fajnego obrazka. Te wszystkie kody, które wam podam należy wpisać
w ramce HTML.
Instrukcja:
1. Skopiuj i wklej ten kod:
<input type="text" id="prompt" value="Pozdrowienia" />
<script type="text/javascript">
function oknoPrompt() {
var imie = prompt('Podaj swoje imię:', '');
if (imie != null) {
alert('Witaj ' + imie + '! Pozdrowienia od Infinity Projects ;*');
} else {
alert('Anulowałeś akcję');
}
}
document.getElementById('prompt').onclick = function() {
oknoPrompt()
}
</script>
2. Pozmieniaj kolorowy tekst na swój.
Pozdrowienia - jeśli nie chcesz użyć kodu css, aby
tym na co mamy kliknąć był obrazek możesz zostawić tekst.
Czyli zamiast obrazka będzie tekst taki jaki wpiszesz zamiast Pozdrowienia.
Podaj swoje imię: - (zobacz 2 obrazek w demonstracji) zamiast tego
możesz wpisać co chcesz.
Witaj - tekst przed imieniem, po jego wpisaniu należy zrobić spację,
aby nie połączył się z imieniem. Widać to tutaj: Witaj
! Pozdrowienia od Infinity Projects ;* - tekst po imieniu. Można go całego usunąć i mieć tylko
"Witaj ...". Ważne jest aby na początku zrobić spację lub dać jakiś znak interpunkcyjny.
Anulowałeś akcję - (zobacz 3 obrazek w demonstracji) jeśli nie chcemy wpisywać swojego imienia
możemy kliknąć po prostu Anuluj. Wtedy ukaże nam się napis taki,
jaki napiszemy zamiast Anulowałeś akcję.
To już cały kod javascript, teraz przechodzimy do css, w którym
usuniemy zbędną ramkę, ustalimy szerokość i wysokość oraz
dodamy obrazek zamiast tekstu.
Ten kod podam wam stopniowo, abyście sami
ustalili co chcecie w nim zawrzeć.
Nadal pracujemy w ramce HTML.
1. Wpisz początek kodu:
<style>#prompt {
2. Ustal znaczek czyli tło:
background: url("WKLEJ SWÓJ LINK DO OBRAZKA");
3. Ustal powtarzalność tła (więcej o powtarzalności tła znajdziesz
TUTAJ):
background-repeat: no-repeat;
4. Wybierz kolor czcionki, lub ustaw ją na przeźroczystą:
color: transparent;
5. Wpisz szerokość i wysokość znaczka (musi być taka sama lub trochę większa od
jego wymiarów):
width: 200px; height: 100px;
6. Usuń obramowanie:
border: none;
7. Zakończ kod wpisując:
}</style>
8. Gotowy kod wygląda tak:
<style>#prompt {background: url("WKLEJ SWÓJ LINK DO OBRAZKA"); background-repeat: no-repeat; color: transparent; width: 200px; height: 100px; border: none;}</style>
Oczywiście można dodać własne ustawienia, jak cień, lub zmienić kolor obramowania zamiast
je usunąć, itp. itd.
To tyle C: jak macie jakieś pytania to proszę o napisanie w komentarzu.
PS: Przyjmę 2 zamówienia na szablon wykonane moim nowym stylem,
który znajdziecie w poprzednich postach.
