Rozwiązanie - Egzamin Praktyczny E.14
Arkusz E.14-12-19.01 - Styczeń 2019 - Wersja #12
Skrypt: JavaScript
Baza Danych:
Powiązana zawartość
Przykładowe rozwiązanie
Wymagane zdjęcia
pies1.jpg
pies1-odbicie.jpg
pies2.jpg
pies2-odbicie.jpg
pies3.jpg
pies3-odbicie.jpg
kot1.jpg
kot1-odbicie.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>Nasze zdjęcia</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<header>
<h2>Fotografie zwierząt</h2>
</header>
<div id="lewy">
<h1>Wybierz</h1>
<ul>
<li><a href="pies.html">Psy</a></li>
<li><a href="kot.html">Koty</a></li>
<li>Konie</li>
<li>Rybki</li>
<li>Inne zdjęcia</li>
</ul>
<h5><a href="index.html">Do strony głównej</a></h5>
</div>
<div id="prawy1">
<h2>Zdjęcie miesiąca</h2>
<p>Fafik, 1 rok</p>
</div>
<div id="prawy2">
<p><img src="pies3.jpg" alt="Fafik"></p>
</div>
<footer>
Galerię zdjęć opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;"><b>EE-Informatyk.pl</b></a>
</footer>
</body>
</html> Plik kot.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>Nasze zdjęcia</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<header>
<h2>Nasze koty</h2>
</header>
<div id="lewy">
<h1>Wybierz</h1>
<ul>
<li><a href="pies.html">Psy</a></li>
<li><a href="kot.html">Koty</a></li>
<li>Konie</li>
<li>Rybki</li>
<li>Inne zdjęcia</li>
</ul>
<h5><a href="index.html">Do strony głównej</a></h5>
</div>
<div id="prawy1">
<h2>Kliknij na zdjęcie</h2>
<img src="kot1.jpg" alt="koty" id="kot1" onmouseover="najechanie('kot1', 'kot1-odbicie.jpg')" onmouseout="opuszczenie('kot1', 'kot1.jpg')" onclick="klikniecie('kot1', 'kot1.jpg')">
<script src="kot.js"></script>
</div>
<div id="prawy2">
<p><img src="kot1.jpg" alt="Wybrany kot"></p>
</div>
<footer>
Galerię zdjęć opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;"><b>EE-Informatyk.pl</b></a>
</footer>
</body>
</html> Plik pies.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>Nasze zdjęcia</title>
<link rel="stylesheet" href="styl6.css">
</head>
<body>
<header>
<h2>Nasze psy</h2>
</header>
<div id="lewy">
<h1>Wybierz</h1>
<ul>
<li><a href="pies.html">Psy</a></li>
<li><a href="kot.html">Koty</a></li>
<li>Konie</li>
<li>Rybki</li>
<li>Inne zdjęcia</li>
</ul>
<h5><a href="index.html">Do strony głównej</a></h5>
</div>
<div id="prawy1">
<h2>Kliknij na zdjęcie</h2>
<img src="pies1.jpg" alt="psy" id="pies1" onmouseover="najechanie('pies1', 'pies1-odbicie.jpg')" onmouseout="opuszczenie('pies1', 'pies1.jpg')" onclick="klikniecie('pies1', 'pies1.jpg')">
<img src="pies2.jpg" alt="psy" id="pies2" onmouseover="najechanie('pies2', 'pies2-odbicie.jpg')" onmouseout="opuszczenie('pies2', 'pies2.jpg')" onclick="klikniecie('pies2', 'pies2.jpg')">
<img src="pies3.jpg" alt="psy" id="pies3" onmouseover="najechanie('pies3', 'pies3-odbicie.jpg')" onmouseout="opuszczenie('pies3', 'pies3.jpg')" onclick="klikniecie('pies3', 'pies3.jpg')">
<script src="pies.js"></script>
</div>
<div id="prawy2">
<p><img src="pies1.jpg" alt="Wybrany pies"></p>
</div>
<footer>
Galerię zdjęć opracował: <a href="https://ee-informatyk.pl/" target="_blank" style="color: unset;text-decoration: none;"><b>EE-Informatyk.pl</b></a>
</footer>
</body>
</html> Plik kot.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="Wybrany kot"></p>`;
} Plik pies.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="Wybrany pies"></p>`;
} Plik styl6.css
body {
font-family: Garamond;
font-size: 110%;
}
header {
background: #965873;
color: white;
text-align: center;
height: 100px;
}
#lewy {
background: #965873;
color: white;
width: 30%;
height: 750px;
float: left;
}
#prawy1 {
background: #AAC28A;
width: 70%;
height: 250px;
text-align: right;
float: left;
}
#prawy2 {
background: #86A25F;
width: 70%;
height: 500px;
text-align: center;
float: left;
}
footer {
background: #965873;
color: white;
clear: both;
}
a {
color: white;
}
#prawy1 img {
width: 18%;
padding: 10px;
}
#prawy2 img {
border: 6px dotted #965873;
}
#prawy2 img:hover {
border: 6px dotted green;
}Powiązana zawartość
Autorem arkusza jest CKE.GOV.PL