Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var leirasok = [
- 'Magyarorszagrol szoveg',
- 'Romaniarol szoveg',
- 'Bulgariarol szoveg',
- 'Macedoniarol szoveg',
- 'Albaniarol szoveg',
- 'Montenegrorol szoveg',
- 'Bosznia es herzegovinarol szoveg',
- 'Horvatorszagrol szoveg',
- 'Szerbiarol szoveg'
- ],
- himnuszok = [
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3')
- ],
- orszagnevek = document.getElementsByTagName('span'),
- zaszlok = document.getElementsByTagName('img'),
- currentHimnusz = 0;
- for (var i = 0; i < orszagnevek.length; i++) {
- orszagnevek[i].addEventListener('click', function(){
- showDetails(this.className.slice(-1)-1);
- });
- zaszlok[i].addEventListener('mouseover', function(){
- himnusz(this.className.slice(-1)-1);
- });
- }
- function showDetails(id) {
- popup_ize = window.open("","","asdf");
- popup_ize.document.write(leirasok[id]);
- }
- function himnusz(id) {
- himnuszok[currentHimnusz].pause();
- himnuszok[id].currentTime = 0;
- himnuszok[id].play();
- currentHimnusz = id;
- }
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Háziállatok</title>
- <link rel="stylesheet" href="styles/main.css" />
- </head>
- <body>
- <center><h1><u>Háziállatok</u></h1></center>
- <a href="#" class="active">Kezdooldal</a>
- <a href="aszerzorol.html">A szerzorol</a>
- <a href="utasitas.html">Használati utasítás</a>
- <div id="main">
- <br />
- A hang lejátszásának engedélyezéséhez felhasználói interakció szükséges az oldalon belül (pl. kattintás).
- <br />
- <br />
- <img src="images/dog.jpg" alt="dog" />
- <img src="images/rabbit.jpg" alt="rabbit" />
- <img src="images/parrot.jpg" alt="parrot" />
- <img src="images/cat.jpg" alt="cat" />
- <img src="images/hamster.jpg" alt="hamster" />
- </div>
- <script type="text/javascript" src="scripts/main.js"></script>
- </body>
- </html>
- * {
- margin: 0;
- padding: 0;
- }
- h1 {
- padding: 20px 0;
- }
- #main {
- width: 100%;
- min-height: 100vh;
- background: url('../images/background.jpg');
- background-repeat: no-repeat;
- background-size: 100% auto;
- background-attachment: fixed;
- }
- a {
- text-decoration: none;
- color: black;
- padding: 10px;
- float: left;
- background: rgba(255,255,255,0.8);
- cursor: pointer;
- border-right: 1px solid #999;
- }
- .active {
- text-decoration: underline;
- }
- #main {
- text-align: center;
- }
- #main > img {
- height: 300px;
- border: 1px solid black;
- }
- var images = container.getElementsByTagName('img');
- for (var i = 0; i < images.length; i++) {
- images[i].addEventListener('click', function() {
- changeTo(this);
- });
- }
- function changeTo(kep) {
- document.getElementById('cim').innerHTML = kep.alt;
- document.getElementById('fo_kep').src = kep.src;
- }
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Kezdooldal</title>
- <link rel="stylesheet" href="styles/css.css" />
- </head>
- <body>
- <center>
- <h1>Fényképgaléria</h1>
- <a href="index.html" class="active">Kezdooldal</a>
- <a href="szerzorol.html">A szerzorol</a>
- <a href="hasznalati.html">Használati utasítás</a>
- <br />
- <br />
- <br />
- <h3 id="cim">kép 1 címe</h3>
- <div id="main">
- <img src="images/kep1.jpg" id="fo_kep" width="320" height="200" />
- </div>
- <br />
- <div id="container">
- <img src="images/kep1.jpg" alt="kép 1 címe" />
- <img src="images/kep2.jpg" alt="kép 2 címe" />
- <img src="images/kep3.jpg" alt="kép 3 címe" />
- <img src="images/kep4.jpg" alt="kép 4 címe" />
- <img src="images/kep5.jpg" alt="kép 5 címe" />
- <img src="images/kep6.jpg" alt="kép 6 címe" />
- <img src="images/kep7.jpg" alt="kép 7 címe" />
- <img src="images/kep8.jpg" alt="kép 8 címe" />
- <img src="images/kep9.jpg" alt="kép 9 címe" />
- <img src="images/kep10.jpg" alt="kép 10 címe" />
- </div>
- <br /><br /><br />
- </center>
- <script type="text/javascript" src="scripts/js.js"></script>
- </body>
- </html>
- #container img {
- width: 64px;
- height: 40px;
- margin: 5px;
- cursor: pointer;
- }
- a {
- text-decoration: none;
- outline: 1px solid gray;
- padding: 5px;
- display: inline-block;
- color: black;
- }
- #main {
- width: 640px;
- height: 480px;
- background: rgba(100,100,100,0.5);
- display:table-cell;
- vertical-align:middle;
- text-align:center;
- }
- .active {
- text-decoration: underline;
- }
- var szelekt = document.getElementById('varos_valasztas');
- szelekt.addEventListener('change', function(){
- document.getElementById('linkecske').src = 'https://naslovi.net/vremenska-prognoza/' + szelekt.value;
- });
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Idojárás elorejelzés</title>
- <link rel="stylesheet" type="text/css" href="styles/main.css" />
- </head>
- <body>
- <center>
- <h1>Kezdooldal</h1>
- <a href="index.html" class="active">Kezdooldal</a>
- <a href="Szerzorol.html">A szerzorol</a>
- <a href="Utasitas.html">Használati utasítás</a>
- </center>
- <br><br>
- <form id="form">
- <select name="varos" id="varos_valasztas">
- <option value="subotica">Szabadka</option>
- <option value="beograd">Belgrad</option>
- <option value="smederevo">Smederevo</option>
- <option value="nis">Nis</option>
- <option value="topola">Topolya</option>
- <option value="sombor">Zombor</option>
- <option value="palic">Palics</option>
- <option value="novi-sad">Novi Sad</option>
- <option value="soko-banja">Soko Banja</option>
- <option value="kikinda">Kikinda</option>
- </select>
- </form>
- <br>
- <br>
- <iframe id="linkecske" src="https://naslovi.net/vremenska-prognoza/beograd" width="53%" height="800px"></iframe>
- <script type="text/javascript" src="scripts/js.js"></script>
- </body>
- </html>
- a {
- text-decoration: none;
- color: black;
- padding: 8px;
- border: 1px solid black;
- }
- .active {
- text-decoration: underline;
- }
- form {
- outline: 1px solid #aaa;
- padding: 10px;
- }
- var leirasok = [
- 'Magyarorszagrol szoveg',
- 'Romaniarol szoveg',
- 'Bulgariarol szoveg',
- 'Macedoniarol szoveg',
- 'Albaniarol szoveg',
- 'Montenegrorol szoveg',
- 'Bosznia es herzegovinarol szoveg',
- 'Horvatorszagrol szoveg',
- 'Szerbiarol szoveg'
- ],
- himnuszok = [
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3'),
- new Audio('sounds/hungary.mp3')
- ],
- orszagnevek = document.getElementsByTagName('span'),
- zaszlok = document.getElementsByTagName('img'),
- currentHimnusz = 0;
- for (var i = 0; i < orszagnevek.length; i++) {
- orszagnevek[i].addEventListener('click', function(){
- showDetails(this.className.slice(-1)-1);
- });
- zaszlok[i].addEventListener('mouseover', function(){
- himnusz(this.className.slice(-1)-1);
- });
- }
- function showDetails(id) {
- popup_ize = window.open("","","asdf");
- popup_ize.document.write(leirasok[id]);
- }
- function himnusz(id) {
- himnuszok[currentHimnusz].pause();
- himnuszok[id].currentTime = 0;
- himnuszok[id].play();
- currentHimnusz = id;
- }
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Kezdooldal</title>
- <link rel="stylesheet" href="styles/main.css" />
- </head>
- <body>
- <div>
- <center>
- <h1>Kezdooldal</h1>
- <a href="index.html" class="active">Kezdooldal</a>
- <a href="szerzorol.html">A szerzorol</a>
- <a href="utasitas.html">Használati utasítás</a>
- </center>
- <br><br>
- <div id="terkep">
- <span style="top:14px;left:225px;" class="span1"></span>
- <span style="top:132px;left:645px" class="span2"></span>
- <span style="top:496px;left:730px" class="span3"></span>
- <span style="top:615px;left:515px" class="span4"></span>
- <span style="top:590px;left:320px" class="span5"></span>
- <span style="top:470px;left:255px" class="span6"></span>
- <span style="top:275px;left:120px;height:2.5em" class="span7"></span>
- <span style="top:100px;left:70px" class="span8"></span>
- <span style="top:270px;left:370px" class="span9"></span>
- <img src="images/hungary.jpg" style="top:10px;left:140px" class="img1"/>
- <img src="images/romania.jpg" style="top:160px;left:645px" class="img2"/>
- <img src="images/bulgaria.jpg" style="top:420px;left:720px" class="img3"/>
- <img src="images/macedonia.jpg" style="top:550px;left:540px" class="img4"/>
- <img src="images/albania.jpg" style="top:530px;left:360px" class="img5"/>
- <img src="images/montenegro.jpg" style="top:510px;left:220px" class="img6"/>
- <img src="images/bosnia.jpg" style="top:320px;left:100px" class="img7"/>
- <img src="images/croatia.jpg" style="top:100px;left:170px" class="img8"/>
- <img src="images/serbia.jpg" style="top:300px;left:400px" class="img9"/>
- </div>
- </div>
- <script type="text/javascript" src="scripts/js.js"></script>
- </body>
- </html>
- h1 {
- padding: 20px 0;
- }
- a {
- text-decoration: none;
- color: black;
- padding: 8px;
- border: 1px solid black;
- }
- .active {
- text-decoration: underline;
- }
- #terkep {
- position: relative;
- background-image: url('../images/bg.jpg');
- background-repeat: no-repeat;
- background-size: auto 650px;
- background-position: 0 0;
- width: 100%;
- height: 650px;
- }
- span {
- display: block;
- height: 1.5em;
- width: 100px;
- position: absolute;
- cursor:pointer;
- }
- img {
- position: absolute;
- width: 90px;
- }
- var foglalasok = [],
- nagy = document.getElementById('nagy'),
- nev = document.getElementById('nev'),
- email = document.getElementById('email'),
- ules = document.getElementById('ules'),
- szabad_ulesek,
- foglalo_ules;
- if (_get('foglalasok') != undefined) {
- foglalasok = _get('foglalasok');
- }
- for (var i = 1; i < 52; i++) {
- var u = document.createElement('span');
- u.innerHTML = (i+1);
- u.className = (foglalasok.includes(i+1+'')) ? 'foglalt ules' : 'szabad ules';
- nagy.appendChild(u);
- if ((i+1) % 4 == 0) nagy.appendChild(document.createElement('br'));
- }
- szabad_ulesek = document.getElementsByClassName('szabad')
- for (var i = 0; i < szabad_ulesek.length; i++) {
- szabad_ulesek[i].addEventListener('click',function(){
- ules.value = this.innerHTML;
- foglalo_ules = this;
- });
- }
- document.getElementById('lefoglal').addEventListener('click',function() {
- if (ules.value == '' || nev.value == '' || email.value == '') {
- alert('Töltsön ki minden mezot!');
- return;
- }
- foglalasok.push(ules.value);
- ules.value = nev.value = email.value = '';
- _set('foglalasok', foglalasok);
- foglalo_ules.className = 'ules foglalt';
- location.reload();
- });
- function _set(name,value) { localStorage.setItem(name,JSON.stringify(value)); }
- function _get(name) { return JSON.parse(localStorage.getItem(name)); }
- body {
- font-family: Arial,sans;
- }
- form {line-height: 2em;}
- .ules {
- display: inline-block;
- padding: 10px;
- margin: 5px;
- width: 30px;
- text-align: center;
- cursor: pointer;
- }
- .szabad {
- background: lime
- }
- .foglalt {
- background: red;
- pointer-events: none;
- }
- #nagy {
- display: inline-block;
- outline: 2px solid gray;
- padding: 5px;
- }
- a {
- text-decoration: none;
- display: inline-block;
- float: right;
- color: black;
- padding: 8px;
- border: 1px solid black;
- margin: 0 2px;
- }
- .active {
- text-decoration: underline;
- }
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Kezdooldal</title>
- <link rel="stylesheet" href="styles/main.css" />
- </head>
- <body>
- <a href="utasitas.html">Használati utasítás</a>
- <a href="szerzorol.html">A szerzorol</a>
- <a href="index.html" class="active">Kezdooldal</a>
- <div id="nagy">
- <span class="ules" style="pointer-events: none;visibility: hidden;margin-right: 0;"></span>
- </div>
- <br /><br />
- <form>
- Ülés száma: <input type="text" id="ules" readonly="true" /><br />
- Név és vezetéknév: <input type="text" id="nev" /><br>
- E-mail: <input type="email" id="email" /><br>
- <input type="button" value="Lefoglalás" id="lefoglal" />
- </form>
- <script type="text/javascript" src="scripts/main.js"></script>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement