При наведении на изображение видео, связанное с изображением, становится видимым. Эта же функция применяется к 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>