Мне нужна помощь для наложения разных видео в одном месте с css - PullRequest
0 голосов
/ 16 апреля 2020

При наведении на изображение видео, связанное с изображением, становится видимым. Эта же функция применяется к 4 различным изображениям. Все видео размещены в одном месте, но отображаются при наведении мыши. Проблема в том, что я могу воспроизводить только последнее видео, скорее всего потому, что оно размещено поверх других. Я попытался изменить z-index, но не могу заставить его работать. (Я знаю, что код плохой, но он основан на том, что я изучил в школе, и это нормально.)

Мне нужно простое решение моей проблемы, ничего слишком сложного. Спасибо заранее!

<!doctype html>
<html lang="no">
<head>
    <!-- kommentarer på nettside -->
    <meta charset="utf-8"/>
    <title> Arkfane</title>
</head>


    <style>
        #en{
        width: 1000px;
        height: 900px;
        background-color: #0483ca;
        border-color: black;
        border-style:solid;

        }

        h1{
        position: center;
        }

        h3{
        position: absolute;
        left: 100px;
        top: 100px;
        text-decoration: underline;

        }

        .bilder{
        height: 150px;
        padding-left:50px;

        }   

        #bildebox{
        position: absolute;
        left: 100px;
        top: 190px;

        }

        #bildebox{
        opacity:


        }   

        #bestill{
        position: absolute;
        left: 100px;
        top: 850px;


        }


        .uthevet{
        font-weight:bold;
        text-decoration:underline;
        }

        .filmer{
        position: absolute;
        left:500px;
        top:30px;
        }

        .traileren{
        position: absolute;
        left:500px;
        top:0px;
        font-weight:bold;
        }



        #infoA{
        position: absolute;
        left: 100px;
        top: 400px;
        opacity:0;
        }

        #infoB{
        position: absolute;
        left: 100px;
        top: 400px;
        opacity:0;
        }

        #infoF{
        position: absolute;
        left: 100px;
        top: 400px;
        opacity:0;
        }

        #infoI{
        position: absolute;
        left: 100px;
        top: 400px;
        opacity:0;
        }



        h2{
        position: absolute;
        left: 100px;
        top: 400px;
        opacity:1;
        }

        #boppsett{
        position: absolute;
        left: 100px;
        top: 200px;
        opacity:1;
        }






    </style>

        <body>
            <div id="hinfo"><center></center><h2>Hover over bildene for å få informasjon om filmene</h2></div>
            <div id="en">
            <center><h1>Velkommen til Oslo drive in kino </h1></center>

            <div id="presentasjon">
            <h3>Våre filmer:</h3>

                <div id="bildebox">
                <img src="Bilde_video/Avengers.PNG" class="bilder" id="ba">
                <img src="Bilde_video/batman.PNG" class="bilder" id="bb">
                <img src="Bilde_video/F&F.PNG" class="bilder" id="bf">
                <img src="Bilde_video/IronMan.PNG" class="bilder" id="bi">

                </div>

                <div id="infoA">
                <p class="traileren">Se traileren her:</p>

                <p class="uthevet">Tittel</p>
                <p>Avengers</p>


                <p class="uthevet">Aldersgrense</p>
                <p>15</p>

                <p class="uthevet">Visningstider</p> 
                <p>Denne filmen vises hver torsdag de neste tre ukene</p>

                <p class="uthevet">Handling</p>
                <p>Superskurken Loki (Tom Hiddleston) og en hær med romvesener er i ferd med å ta over verden ved hjelp av en energikube kalt «Tesseract»,<br> som skal åpne opp portalen mellom verdenene og få romvesenene til jorden. <br> Nick Fury (Samuel L. Jackson) og resten av spesialagentbyrået SHIELD ser ingen annen utvei enn å iverksette «Avengers-initiativet».<br> I tur og orden blir Iron Man (Robert Downey jr.), Captain America (Chris Evans),<br> Hulken (Mark Ruffalo) og Thor (Chris Hemsworth) rekruttert og slått sammen med superagentene Natasha Romanoff (Scarlett Johansson)<br> og Clint Barton (Jeremy Renner), som for øvrig har en forelskelse gående.<br>
                Det viser seg at når det som i utgangspunktet er fire individualister skal samarbeide og stole på hverandre for å gjøre en jobb,<br> blir det noen gnisninger innad i gruppa. Men de vet at om de skal stoppe Loki, må de finne en måte å samarbeide på raskt.<br> Kan The Avengers redde verden og ta «Tesseract» fra Lokis hender?</p>

                <video id="video1" class="filmer" width="300" height="200" src="Bilde_video/Avengers.mp4" controls></video>
                </div>


                <div id="infoB">
                <p class="traileren">Se traileren her:</p>

                <p class="uthevet">Tittel</p>
                <p>Batman</p>


                <p class="uthevet">Aldersgrense</p>
                <p>15</p>

                <p class="uthevet">Visningstider</p> 
                <p>Denne filmen vises hver Lørdag de neste tre ukene</p>

                <p class="uthevet">Handling</p>
                <p>Åtte år har gått siden oppgjøret med Jokeren og Harvey Dent. Bruce Wayne (Christian Bale) har trukket seg ut av rampelyset,<br> og Batman-kostymet er hengt opp for godt. Dessuten har kroppen begynt å forfalle. <br>Men han ser seg likevel nødt til å returnere for å hjelpe politiet når den onde superskurken Bane (Tom Hardy)<br> planlegger å ødelegge byen med en bombe han laget ut fra en energireaktor inne hos Wayne Enterprises.<br> På veien får Bruce en uventet alliert i politimannen John Blake (Joseph Gordon-Levitt), som vet hans sanne identitet, <br>en romanse med Wayne Enterprises' nye sjef Miranda Tate (Marion Cotillard),<br> samt at han møter på den mystiske Selina Kyle (Anne Hathaway).<br> Mange hemmeligheter senere oppdager Bruce at det hele stikker dypere enn noen kunne ane, og at han blir nødt til å gjenfinne sin innerste, <br>mest inderlige styrke for å stoppe ødeleggelsene av Gotham.</p>

                <video id="video2" class="filmer" width="300" height="200" src="Bilde_video/Batman.mp4" controls></video>           
                </div>

                <div id="infoF">
                <p class="traileren">Se traileren her:</p>

                <p class="uthevet">Tittel</p>
                <p>Fast and Furios </p>


                <p class="uthevet">Aldersgrense</p>
                <p>15</p>

                <p class="uthevet">Visningstider</p> 
                <p>Denne filmen starter vi å vise etter uke 19</p>

                <p class="uthevet">Handling</p>
                <p>Dominic Toretto (Vin Diesel) må starte et helt nytt liv i Latin America etter å ha rømt i Brian O'Connor (Paul Walker)<br> Toyota Supra i Los Angeles. Han lever av å reparere, tune og style biler og stjele store mengder bensin med gjengen sin.<br> Plutselig en dag får han en skrekkelig telefon fra søsteren Mia (Jordana Brewster) om at kjæresten hans Letty (Michelle Rodríguez) <br>er død etter et bilrace.<br> På åstedet ser Dom at hun ikke ble drept av crashet, men av han som hun kjørte mot, nemlig Fenix Calderon (Laz Alonso). <br>Her starter jakten på Fenix for Dominic.
                Samtidig som alt dette skjer møter vi igjen Brian O'Connor som jobber som politiagent<br> i området nær Mexico. Han er på en sak som involverer store penger og dop. I etterforskningen oppdager Brian at banden han jakter på <br>inneholder Fenix, mannen som drepte Letty, og dermed slår Brian og Dom seg sammen om å fakke banden.</p>     

                <video id="video3" class="filmer" width="300" height="200" src="Bilde_video/F&F.mp4" controls></video>
                </div>

                <div id="infoI">
                <p class="traileren">Se traileren her:</p>

                <p class="uthevet">Tittel</p>
                <p>Iron man</p>


                <p class="uthevet">Aldersgrense</p>
                <p>15</p>

                <p class="uthevet">Visningstider</p> 
                <p>Denne filmen starter vi å vise etter uke 19</p>

                <p class="uthevet">Handling</p>
                <p>Tony Stark. Geni, milliardær, playboy, filantrop. Sønn av den legendariske oppfinneren og våpenentreprenøren Howard Stark.<br> Når Tony Stark får beskjed om å holde en våpenpresentasjon til en irakisk enhet ledet av oberst James Rhodes,<br> får han en tur på fiendens linjer. Den turen ender dårlig når Starks Humvee som han sykler i blir angrepet av fiendens stridende.<br> Han overlever - knapt - med et bryst fullt av splitt og et bilbatteri festet til hjertet. <br>For å overleve kommer han på en måte å miniaturisere batteriet og finner ut at batteriet kan drive noe annet.<br> Dermed blir Iron Man født. Han bruker det primitive apparatet for å rømme fra hulen i Irak.<br> Når han er hjemme, begynner han deretter arbeidet med å perfeksjonere Iron Man-drakten.<br> Men mannen som ble ansvarlig for Stark Industries har egne planer om å overta Tonys teknologi for andre saker.</p>
    </p>

                <video id="video4" class="filmer" width="300" height="200" src="Bilde_video/IronMan.mp4" controls></video>
                </div>

            <button id="bestill">Bestill din kinoopplevelse her!</button>
            </div>

            <div id="ordreside">
            <h3>Registrer din bestilling:</h3>

            <div id="boppsett">
            <div id="liste">
                <p>For øyeblikket vises Avengers på torsdager og Batman på lørdager. <br> Filmene som vises endres i et intervall på tre uker.</p>
                    <select autofocus id="lstNedtrekk1">
                    <option  selected> Velg dag:</option>
                    </select>           
                    </div>

            Skriv inn antall biler: <input type="number" id="innEn" min="1" max="40"> <br>
            Skriv inn antall passasjerer: <input type="number" id="innTo"> <br>
            Skriv inn navn: <input type="text" id="innTre"> <br>
            Skriv inn telefonnummer: <input type="text" id="innFire"> <br>
            <button id="lagre">Lagre bestillingen</button><br><br>
            <button id="hjem">Hjem</button>
            <p id="ut2"></p>
            </div>
            </div>

            <script>

            var dager=["Torsdag (16.04)","Lørdag (18.04)","Torsdag (23.04)","Lørdag (18.04)","Torsdag (30.04)", "Lørdag (2.05)","Torsdag (7.05)","Lørdag (9.05)"];
            window.onload = oppstart; 
            var envalg=document.getElementById("lstNedtrekk1");
            var dagerIndeks;
            var abil=0;
            var apassasjer=0;
            var navn="";
            var tlf="";
            var totalpris=0;
            var vFilm="";
            var velgdager="";
            var vid1=document.getElementById("video1");
            var vid2=document.getElementById("video2");
            var vid3=document.getElementById("video3");
            var vid4=document.getElementById("video4");

            function oppstart(){
            document.getElementById("bestill").onclick=overgang;
            document.getElementById("hjem").onclick=tilbake;
            document.getElementById("ordreside").style.display="none";
            document.getElementById("lagre").onclick=lagreordre;
            document.getElementById("ba").onmouseover = function() {infoAv()};
            document.getElementById("bb").onmouseover = function() {infoBa()};
            document.getElementById("bf").onmouseover = function() {infoFa()};
            document.getElementById("bi").onmouseover = function() {infoIm()};

            for(var i=0; i<dager.length; i++){
                        var valg1 = document.createElement("option");
                        valg1.innerHTML=dager[i];
                        valg1.value=i;
                        document.getElementById("lstNedtrekk1").appendChild(valg1);             
                    }

                    envalg.onchange=function(){
                                dagerIndeks=lstNedtrekk1.selectedIndex; // index til valgt byIndeks
                                 velgdager = lstNedtrekk1[dagerIndeks].value;
                                console.log("Dager idenxen 1 er",dagerIndeks);
                                  velgdager=dager[velgdager];
                                console.log(dagerIndeks,velgdager);

                            }
            }

            function overgang(){
            document.getElementById("ordreside").style.display="block";
            document.getElementById("presentasjon").style.display="none";
            document.getElementById("bestill").disabled=true;
            document.getElementById("hinfo").style.opacity = 0;
            }   

            function tilbake(){
            document.getElementById("ordreside").style.display="none";
            document.getElementById("presentasjon").style.display="block";
            document.getElementById("bestill").disabled=false;



            }

            function lagreordre(){
            abil=document.getElementById("innEn").value;
            apassasjer=document.getElementById("innTo").value;
            navn=document.getElementById("innTre").value;
            tlf=document.getElementById("innFire").value;
            console.log("antall biler er",abil);
            console.log("antall passasjerer er",apassasjer);
            console.log("navnet er", navn);
            console.log("telefonnummeret er", tlf);

            if(abil==0|| apassasjer==0 || navn=="" || tlf==0 || velgdager=="" ){
            alert("Du må fylle ut alle feltene før du utfører en bestilling!")

            }
            if(abil/apassasjer<1/3){
            alert("Du kan ikke ha mer enn tre passasjerer per bil!")

            }


            // finner ut om nedtrekksinndeksen er et partall. Dette gjør jeg fordi jeg vet at den samme filmen vises på partallene fra nedtrekkslisten
            if (dagerIndeks%2 == 0){
            vFilm="Batman";
            }

            else{
            vFilm="Avengers";
            }




            totalpris=(abil*200)+(apassasjer*75);

            ut2.innerHTML="Filmen som er valgt er: "+vFilm+". Datoen som er valgt er "+velgdager+". Sluttsummen blir dermed kr "+totalpris;
            }

            function infoAv(){

                        vid2.pause();
                        vid3.pause();
                        vid4.pause();
                        document.getElementById("infoA").style.opacity = 1;
                        document.getElementById("infoB").style.opacity = 0;
                        document.getElementById("infoF").style.opacity = 0;
                        document.getElementById("infoI").style.opacity = 0;
                        document.getElementById("hinfo").style.opacity = 0;
                    }

                    function infoBa(){
                    vid1.pause();

                        vid3.pause();
                        vid4.pause();
                    document.getElementById("infoA").style.opacity = 0;
                        document.getElementById("infoB").style.opacity = 1;
                        document.getElementById("infoF").style.opacity = 0;
                        document.getElementById("infoI").style.opacity = 0;
                        document.getElementById("hinfo").style.opacity = 0;
                    }

                    function infoFa(){
                    vid1.pause();
                        vid2.pause();

                        vid4.pause();
                        document.getElementById("infoA").style.opacity = 0;
                        document.getElementById("infoB").style.opacity = 0;
                        document.getElementById("infoF").style.opacity = 1;
                        document.getElementById("infoI").style.opacity = 0;
                        document.getElementById("hinfo").style.opacity = 0;
                    }

                    function infoIm(){
                    vid1.pause();
                        vid2.pause();
                        vid3.pause();

                        document.getElementById("infoA").style.opacity = 0;
                        document.getElementById("infoB").style.opacity = 0;
                        document.getElementById("infoF").style.opacity = 0;
                        document.getElementById("infoI").style.opacity = 1;
                        document.getElementById("hinfo").style.opacity = 0;
                    }



        </script>
        </body>

    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...