Untitled

var images = [].slice.call(document.getElementsByTagName('img')),
    data = {
        desc: {
            dog: 'Ez egy kutyuli leirasa.',
            cat: 'Ez egy cica leirasa.',
            parrot: 'Ez egy papagaj leirasa.',
            hamster: 'Ez egy csinos patkany leirasa.',
            rabbit: 'Ez egy nyul leirasa.'
        },
        sounds: {
            dog: new Audio('sounds/dog.wav'),
            cat: new Audio('sounds/cat.wav'),
            parrot: new Audio('sounds/parrot.wav'),
            hamster: new Audio('sounds/hamster.wav'),
            rabbit: new Audio('sounds/rabbit.wav')
        }
    },
    current_sound = '';

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', function() {
        showPopup(data.desc[this.alt]);
    });
    images[i].addEventListener('mouseover', function() {
        if (current_sound != '') data.sounds[current_sound].pause();
        data.sounds[this.alt].currentTime = 0;
        data.sounds[this.alt].play();
        current_sound = this.alt;
    });
}
function showPopup(s) {
    popup = window.open("", "", "asdf");
    popup.document.write(s);
}


<!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>