Untitled

html

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


css

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


js

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