Untitled

html

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

css

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;
}


js

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;
}