Zadatak: 

  • Napraviti web stranicu na temu "Ciculjka" - postaviti naslov i Zmaj Jovinu pesmicu ispod - ako je ne znate, potražite na Internetu 
  • Ispod pesmice postaviti sliku po želji
  • Izgled stranice podesiti pomoću posebnog css fajla:
    • žuta pozadina
    • sve da je na sredini
    • slika da ima zaobljene ivice ili da je potpuno okrugla
  • pomeranjem miša oko slike da iskoči poruka (alert) za sledeće događaje da se ispiše za:
    • klik na sliku  - "ovo je slike"
    • ulazak na područje slike - "dobro došli"
    • izlazak sa područja slike - "odoh ja odavde"

*****************************************************************************************************************

Rešavanje zadatka:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="stil.css">
    <script src="akcija.js"></script>
</head>
<body >
    <h1 >ciculjka</h1>
    <hr>
    <p>Nije pravo, sekobr <br>
        samo srčeš mleko,</p>
    <p>A sirota cica, <br>
        to joj glad golica,</p>
    <p>I ona bi htela <br>
        tog napitka bela.</p>
    <p>Tebi dade mati, <br>
        ti ćeš Cici dati,</p>   
    <p>Da budete siti <br>
        i Ciculjka i ti…</p>     
    <img src="https://clipart-library.com/images/5iRrxkaRT.gif" >
    </body>
</html>

Nastavak - CSS: Postaviti da je slika okrugla (ili oblik elipse) sa okvirom koji je neke druge boje (i možda isprekidan)

img {
    width: 50vw;
    border: 2px dashed red;
    border-radius: 50%;
}
 

body{
    text-align: center;
    background-color: yellow;
}

img{
    width:40vw;
    height: 40vw;
    border:3px solid red;
    border-radius: 50%;
}

 

Sledeći deo zadatka: Napraviti JavaScript fajl akcija.js u kojem treba da se nalaze tri promenljive koje ćemo da prikažemo kasnije

var poruka1 = "Ovo je slika";
let poruka2 = "Odoh ja odavde";
poruka3 = "Dobro došli";

Povezati JavaScript fajl u head delu fajla!
<script src="akcija.js"></script>
 

Nastavljamo da radimo sa našim HTML fajlom: Na način koji je rađen u drugom razredu (unutar html taga za sliku) prikazati sledeće:

  • klikom na sliku da se prikaže poruka1 
    •   <img  src="....."  onclick="alert(poruka1)">
  • kada se mišem izađe sa slike da se prikaže poruka2 
    • <img  src="....." onmouseleave="alert(poruka2)">
  • kada se mišem uđe na područje slike da se prikaže poruka3 
    • <img  src="....." onmouseenter="alert(poruka3)">

Rešenje:

Za poslednji deo, treba samo unutar img tag-a dodati deo sa akcijama:

<img src="https://clipart-library.com/images/5iRrxkaRT.gif" onclick="alert(poruka1)" onmouseenter="alert(poruka3)" onmouseleave="alert(poruka2)">

Poslednja izmena: среда, 1. октобар 2025, 19:30