Strona interaktywna?

Temat: Strona interaktywna?

  1. dynamiczny HTML (DHTML),
  2. tworzenie elementów interaktywnych,
  3. 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&nbsp;&nbsp;D u ż a </div>
<div class="przycisk"> O l a&nbsp;&nbsp;M a ł a </div>
<div class="przycisk"> J a n&nbsp;&nbsp;Ś 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;
}

 

Skip to content