Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-11-19.01 - Styczeń 2019 - Wersja #11
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
pies1.jpg
pies1-szary.jpg
pies2.jpg
pies2-szary.jpg
pies3.jpg
pies3-szary.jpg
kot1.jpg
kot1-szary.jpg
Plik index.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeria zdjęć</title>
<link rel="stylesheet" href="styl5.css">
</head>
<body>
<header>
<h1>Zdjęcia naszych pupilów</h1>
</header>
<div id="lewy">
<h2>Kategorie</h2>
<ul>
<li><a href="psy.html">Psy</a></li>
<li><a href="koty.html">Koty</a></li>
<li>Gryzonie</li>
<li>Jaszczurki</li>
<li>Inne zdjęcia</li>
</ul>
<h4><a href="index.html">Powrót do strony głównej</a></h4>
</div>
<div id="prawy1">
<h1>Zdjęcie tygodnia</h1>
<p>Azor, 4 miesiące</p>
</div>
<div id="prawy2">
<img src="pies2.jpg" alt="Azor">
</div>
<footer>
Galerię zdjęć opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a>
</footer>
</body>
</html> Plik psy.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeria zdjęć</title>
<link rel="stylesheet" href="styl5.css">
</head>
<body>
<header>
<h1>Zdjęcia psów</h1>
</header>
<div id="lewy">
<h2>Kategorie</h2>
<ul>
<li><a href="psy.html">Psy</a></li>
<li><a href="koty.html">Koty</a></li>
<li>Gryzonie</li>
<li>Jaszczurki</li>
<li>Inne zdjęcia</li>
</ul>
<h4><a href="index.html">Powrót do strony głównej</a></h4>
</div>
<div id="prawy1">
<h1>Wybierz zdjęcie</h1>
<img src="pies1.jpg" alt="pies1" id="pies1" onmouseover="najechanie('pies1', 'pies1-szary.jpg')" onmouseout="opuszczenie('pies1', 'pies1.jpg')" onclick="klikniecie('pies1', 'pies1.jpg')">
<img src="pies2.jpg" alt="pies2" id="pies2" onmouseover="najechanie('pies2', 'pies2-szary.jpg')" onmouseout="opuszczenie('pies2', 'pies2.jpg')" onclick="klikniecie('pies2', 'pies2.jpg')">
<img src="pies3.jpg" alt="pies3" id="pies3" onmouseover="najechanie('pies3', 'pies3-szary.jpg')" onmouseout="opuszczenie('pies3', 'pies3.jpg')" onclick="klikniecie('pies3', 'pies3.jpg')">
<script src="psy.js"></script>
</div>
<div id="prawy2">
<p><img src="pies1.jpg" alt="pies-duży"></p>
</div>
<footer>
Galerię zdjęć opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a>
</footer>
</body>
</html> Plik koty.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeria zdjęć</title>
<link rel="stylesheet" href="styl5.css">
</head>
<body>
<header>
<h1>Zdjęcia kotów</h1>
</header>
<div id="lewy">
<h2>Kategorie</h2>
<ul>
<li><a href="psy.html">Psy</a></li>
<li><a href="koty.html">Koty</a></li>
<li>Gryzonie</li>
<li>Jaszczurki</li>
<li>Inne zdjęcia</li>
</ul>
<h4><a href="index.html">Powrót do strony głównej</a></h4>
</div>
<div id="prawy1">
<h1>Wybierz zdjęcie</h1>
<img src="kot1.jpg" alt="kot1" id="kot1" onmouseover="najechanie('kot1', 'kot1-szary.jpg')" onmouseout="opuszczenie('kot1', 'kot1.jpg')" onclick="klikniecie('kot1', 'kot1.jpg')">
<script src="koty.js"></script>
</div>
<div id="prawy2">
<p><img src="kot1.jpg" alt="kot-duzy"></p>
</div>
<footer>
Galerię zdjęć opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;">EE-Informatyk.pl</a>
</footer>
</body>
</html> Plik psy.js
function najechanie(imgId, szaryImg) {
document.getElementById(imgId).src = szaryImg;
}
function opuszczenie(imgId, kolorImg) {
document.getElementById(imgId).src = kolorImg;
}
function klikniecie(imgId, kolorImg) {
document.getElementById(imgId).src = kolorImg;
document.getElementById("prawy2").innerHTML = `<p><img src="${kolorImg}" alt="pies-duży"></p>`;
} Plik koty.js
function najechanie(imgId, szaryImg) {
document.getElementById(imgId).src = szaryImg;
}
function opuszczenie(imgId, kolorImg) {
document.getElementById(imgId).src = kolorImg;
}
function klikniecie(imgId, kolorImg) {
document.getElementById(imgId).src = kolorImg;
document.getElementById("prawy2").innerHTML = `<p><img src="${kolorImg}" alt="kot-duży"></p>`;
} Plik styl5.css
body {
font-family: Verdana;
}
header {
background: #9692B1;
color: white;
text-align: center;
height: 80px;
}
#lewy {
background: #9692B1;
color: white;
width: 20%;
height: 750px;
float: left;
}
#prawy1 {
background: #FFF4CC;
width: 80%;
height: 300px;
text-align: center;
float: left;
}
#prawy2 {
background: #DBCC93;
width: 80%;
height: 450px;
text-align: center;
float: left;
}
footer {
background: #9692B1;
color: white;
text-align: right;
clear: both;
}
a {
color: white;
}
#prawy1 img {
width: 15%;
padding: 20px;
}
#prawy2 img {
border: 4px solid #9692B1;
}
#prawy2 img:hover {
border: 4px solid gray;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL