meni galerija matura

                Never    
HTML
        
Download Raw Clone Report Copy 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Pocetna.aspx.cs" Inherits="Galerija.Pocetna" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                $(".druga").click(function () {
                    var b = $(this).attr("src");
                    var ime = b.replace("Content/", " ").replace(".jpg", " ");
                    $("#ime").html(ime);
                    $(".trenutna").attr("src", b);
                });
            });

       </script>
    <style type="text/css">
        a{
            color: inherit;
            text-decoration: none;
        }
        #meni li{
            padding: 0px

        }
        #meni li a{
            margin:5px;
            display:block;
            width:100%;
            height:100%;
        }
        #meni{
            display:block;
            heigth:30px;
            width:100%;
            padding:0;
            margin-left:-10px;
            margin-top:-10px;
            position:absolute;
            left:330px;
        }
        #meni #jeste{
            display:inline-block;
            height:30px;
            width:17%;
            line-heigth:40px;
            text-align:center;
            background:#d2d4d8;
            border-right:1px solid #fff;
            font-family:Arial;
        }
    </style>
    <style>
        #ime{
            position:absolute;
            margin-top:1%;
            margin-left:26%;
            margin-rigth:9%;
            font-family:Arial;
            font-size:20px;
        }
        #jedan{
            border-style:ridge;
            height:480px;
            width:770px;
            margin:50px auto;
        }
        #dva{
            margin-top:-7px;
            margin-left:1px;
            margin-right:1px;
            margin-bottom:0px;
        }
        #img1{
            border-style:groove;
            width:320px;
            height:240px;
            margin-top:60px;
            margin-left:220px;
            margin-right:20px;
            margin-bottom:70px;
        }
        #size{
            height:40px;
            width:64px;
        }
        img2{
            display:table;
            margin:auto;
            padding:0;
        }
        #img2 #red{
            display:inline-block;
        }
        </style>
    
</head>
<body>
    <form id="form1" runat="server">
        </br>
        <ul id="meni">
                <li id="jeste" class="autor"><a href="Oautoru.aspx">O autor</a></li>
                <li id="jeste" class="pocetna"><a href="Pocetna.aspx">Pocetna</a></li>
                <li id="jeste" class="uputstvo"><a href="Uputstvo.aspx">Uputstvo</a></li>
           </ul>
        <div id="jedan">
            <p id="ime">slika1</p>
                    <img src="Content/slika1.jpg" id="img1" class="trenutna" />
            <div id="dva">
                <ul id="img2">
                    <li id="red"><img src="Content/slika1.jpg" id="size" class="druga"></li>
                    <li id="red"><img src="Content/slika2.jpg" id="size" class="druga"></li>
                    <li id="red"><img src="Content/slika3.jpg" id="size" class="druga"></li>
                    <li id="red"><img src="Content/slika4.jpg" id="size" class="druga"></li>
                    <li id="red"><img src="Content/slika5.jpg" id="size" class="druga"></li>
                    <li id="red"><img src="Content/slika6.jpg" id="size" class="druga"></li>
                    <li id="red"><img src="Content/slika7.jpg" id="size" class="druga"></li>
                    <li id="red"><img src="Content/slika8.jpg" id="size" class="druga"></li>
                    <li id="red"><img src="Content/slika9.jpg" id="size" class="druga"></li>
                    <li id="red"><img src="Content/slika10.jpg" id="size" class="druga"></li>
                </ul>
            </div>
        </div>
    </form>
</body>
</html>


funkcija zvuk i alert
<script>
    var audio = new Audio();
    function zvukstop(evt) {
        audio.pause();
    } 
	function zvukstart(evt) {

        audio.pause();

        var id = evt.id;
        if (id == "lav")
        	audio = new Audio('lav.mp3');
        else if(id == "slon")
		audio = new Audio('slon.mp3');
	else if(id == "tigar")
		audio = new Audio('tigar.mp3');
        audio.play();
    }
    function tekst(evt) {
        var id = evt.id;
    	if (id == "lav")
        	alert("lav kralj zivotinja");
	else if(id == "slon")
		alert("slon najsrtonosnija zivotinja na svetu");
	else if(id=="tigar")
		alert("najlepsa zivotinja do kej mala i ne zeli da te pojede");

}
</script>

poziv

            <img id="bubanj" src="bubanj.jpg" onclick="klikTekst(this)"/>
            <img id="gitara" src="gitara.jpg" onclick="klikTekst(this)"/>


            <img id="zvucnik1" src="zvucnik1.jpg" onmouseover="zvukFunction(this)" onmouseout="SoundStop(this)"/>
            <img id="zvucnik2" src="zvucnik2.jpg" onmouseover="zvukFunction(this)" onmouseout="soundStop(this)"/>
meni 
<ul id="meni">
            <li id="jeste"><a href="pocetna.aspx">pocetna</a></li>
            <li id="jeste"><a href="pocetna.aspx">autor</a></li>
            <li id="jeste"><a href="pocetna.aspx">uputstvo</a></li>
        </ul>
meni css

body {
}
a{
    text-decoration:none;
    color:inherit;
}
#meni li{
    padding:0px;
}
#meni li a{
    margin:5px;
    display:block;
    width:100%;
    height:100%;
}
#meni :hover{
    background:#f7afaf;
    margin:auto;
}
#meni{
    display:block;
    width:100%;
    height:30px;
    margin-top:2px;
    margin-left:330px;
}
    #meni #jeste {
        display: inline-block;
        height: 40px;
        width: 17%;
        line-height: 30px;
        background: #d2d4d8;
        text-align: center;
        font-family: Arial;
        border-right: 1px solid #fff
    }

Raw Text

Recent Public Pastes