1.4 Strona interaktywna?
Temat: Strona interaktywna?
- dynamiczny HTML (DHTML),
- tworzenie elementów interaktywnych,
- budowanie galerii zdjęć z wykorzystaniem elementów interaktywnych.
INTERAKTYWNE ELEMENTY – CSS
Kaskadowe arkusze stylów dają twórcom dokumentów HTML wiele możliwości wpływania na wygląd tekstu. W celu uzyskania interakcji najczęściej stosuje się pseudoklasę :hover, która powoduje zmianę wskazanych w kodzie parametrów elementu po najechaniu na ten element kursorem myszy.
Struktura
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="mojstyl.css" type="text/css">
<title>Tytuł strony...</title>
</head>
<body>
Główna treść dokumentu
</body>
</html>
Zapis w sekcji body dokumentu:
<p> Podkomorzy zgadując, na co się zanosi, <br> Zadzwonił w tabakierę złotą, o głos prosi. </p>
Zapis w deklaracji stylu:
p {
font-size: 16px;
color: black;
}
p:hover {
background-color: black;
color: white;
}
Podświetlenie przycisku (zmiana kolorów przycisku i tekstu).
Zapis w sekcji body dokumentu:
<div class="przycisk"> A l a D u ż a </div> <div class="przycisk"> O l a M a ł a </div> <div class="przycisk"> J a n Ś r e d n i </div>
Zapis w deklaracji stylu
div.przycisk {
background-color: #C6C3C4;
color: black;
width: 220px;
height: 34px;
padding: 6px;
font-size: 34px;
margin: 3px;
text-align: center;
}
div.przycisk:hover {
background-color: #918C8C;
color: red;
cursor: pointer;
}
Zmiana grafiki w tle.
Zapis w sekcji body dokumentu:
<div class="fotka"> </div>
Zapis w deklaracji stylu:
div.fotka {
background-image: url('kot1.jpg');
background-repeat: no-repeat;
background-position: center;
width: 150px;
height: 200px;
display: block;
border: 1px solid black;
position: absolute
top: 0;
left: 0;
}
div.fotka:hover {
cursor: pointer;
border: 1px solid black;
background: url('kot2.jpg');
background-repeat: no-repeat;
background-position: center;
}
Zmiana przezroczystości obrazu i wyświetlenie etykietki z opisem.
Zapis w sekcji body dokumentu:
<img class="foto2" src="plywak.jpg" title="opacity: 0.50;">
Zapis w deklaracji stylu
img.foto2:hover {
opacity: 0.50;
}
