I want the background of my body div to change to a different image as each link is hovered over. Here is my code with the link section removed beside the first one as an example:
JAVASCRIPT:
var i = 0,
anchors = document.querySelectorAll("zoom"),
background = document.getElementById("body");
function backgroundChange() {
"use strict";
window.console.log("hey");
if (event.target.id === "4Mo3We2Days") {
background.style.background = "url('../Images/movies/4Mo3We2Days.png')";
...
other specific ids
...
}
}
function backgroundRemove() {
"use strict";
background.style.backgroundImage = "none";
}
for (i = 0; i < anchors.length; i += 1) {
anchors[i].addEventListener("mouseover", backgroundChange, false);
anchors[i].addEventListener("mouseout", backgroundRemove, false);
window.console.log("yo");
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "../CSS/JMWStyles.css">
<title>Archives</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<img id = "logo" src = "../Images/logo.png" alt = "logo" href = "../JMW.htm"></img>
<ul id = "navMenu">
<li class = "nav"><a id = "button5" class = "navItem" href = "../JMW_Store.htm">Store</a></li>
<li class = "nav"><a id = "button4" class = "navItem" href = "../JMW_Archives.htm">Archives</a></li>
<li class = "nav"><a id = "button3" class = "navItem" href = "../JMW_About.htm">About</a></li>
<li class = "nav"><a id = "button2" class = "navItem" href = "../JMW_Blog.htm">Blog</a></li>
<li class = "nav"><a id = "button1" class = "navItem" href = "../JMW.htm">Home</a></li>
</ul>
</header>
<hr>
<div>
** Please Note that these were written for the radio and were meant to be read aloud. There are many typos as
well as odd things to read. If you would like, leave a comment so I can fix it! <br>
  - Jake Winters
</div>
<hr>
<div id = "body">
<ul class = "centered">
<li><a class = "zoom" id = "4Mo3We2Days" href = "MovieReviews/4Mo3We2Days.htm">4 Months 3 Weeks and 2 Days</a></li>
<li><a class = "zoom" id = "aMostViolentYear" href = "MovieReviews/aMostViolentYear.htm">A Most Violent year</a></li>
<li><a class = "zoom" id = "pigeon" href =
"MovieReviews/A%20Pigeon%20Sat%20on%20a%20Branch%20Reflecting%20on%20Existence.htm">A Pidgeon Sat
on a Branch Reflecting on Existence</a></li>
<li><a class = "zoom" id = "akira" href = "MovieReviews/akira.htm">Akira</a></li>
<li><a class = "zoom" id = "amadeus" href = "MovieReviews/Amadeus.htm">Amadeus</a></li>
<li><a class = "zoom" id = "borgman" href = "MovieReviews/Borgman.htm">Borgman</a></li>
<li><a class = "zoom" id = "briefInterviews" href = "MovieReviews/briefInterviewsWithHideousMen.htm">Brief Interviews with Hideous Men</a></li>
<li><a class = "zoom" id = "bronson" href = "MovieReviews/bronson.htm">Bronson</a></li>
<li><a class = "zoom" id = "catchMeDaddy" href = "MovieReviews/catchMeDaddy.htm">Catch Me Daddy</a></li>
<li><a class = "zoom" id = "copCar" href = "MovieReviews/copCar.htm">Cop Car</a></li>
<li><a class = "zoom" id = "gangsOfNY" href = "MovieReviews/gangsOfNewYork.htm">Gangs of New York</a></li>
<li><a class = "zoom" id = "gattaca" href = "MovieReviews/gattaca.htm">Gattaca</a></li>
<li><a class = "zoom" id = "hailCeaser" href = "MovieReviews/hailCeaser.htm">Hail Ceaser</a></li>
<li><a class = "zoom" id = "hidden" href = "MovieReviews/hidden.htm">Hidden</a></li>
<li><a class = "zoom" id = "hudsucker" href = "MovieReviews/theHudsuckerProxy.htm">The Hudsucker Proxy</a></li>
<li><a class = "zoom" id = "inBruges" href = "MovieReviews/inBruges.htm">In Bruges</a></li>
<li><a class = "zoom" id = "koyscatsi" href = "MovieReviews/koyaanisqatsi.htm">Koyaanisqatsi</a></li>
<li><a class = "zoom" id = "leviathan" href = "MovieReviews/leviathan.htm">Leviathan</a></li>
<li><a class = "zoom" id = "libre" href = "MovieReviews/libreEtAssoupi.htm">Libre et Assoupi</a></li>
<li><a class = "zoom" id = "moon" href = "MovieReviews/moon.htm">Moon</a></li>
<li><a class = "zoom" id = "mustang" href = "MovieRevies/mustang.htm">Mustang</a></li>
<li><a class = "zoom" id = "niceGuys" href = "MovieReviews/niceGuys.htm">Nice Guys</a></li>
<li><a class = "zoom" id = "onlyGodForgives" href = "MovieReviews/onlyGodForgives.htm">Only God Forgives</a></li>
<li><a class = "zoom" id = "pansLab" href = "MovieReviews/pansLabyrinth.htm">Pans Labyrinth</a></li>
<li><a class = "zoom" id = "planesTrains" href = "MovieReviews/planesTrainsAndAutomobiles.htm">Planes, Trains, and Automobiles</a></li>
<li><a class = "zoom" id = "psycho" href = "MovieReviews/psycho.htm">Psycho</a></li>
<li><a class = "zoom" id = "repoman" href = "MovieReviews/repoman.htm">Repoman</a></li>
<li><a class = "zoom" id = "revenant" href = "MovieReviews/revenant.htm">Revenant</a></li>
<li><a class = "zoom" id = "sevenPsycho" href = "MovieReviews/sevenPsychopaths.htm">Seven Psychopaths</a></li>
<li><a class = "zoom" id = "seven" href = "MovieReviews/seven.htm">Seven</a></li>
<li><a class = "zoom" id = "stillWalking" href = "MovieReviews/stillWalking.htm">Still Walking</a></li>
<li><a class = "zoom" id = "theFifthElement" href = "MovieReviews/theFifthElement.htm">The Fifth Element</a></li>
<li><a class = "zoom" id = "theIllusionist" href = "MovieReviews/theIllusionist.htm">The Illusionist</a></li>
<li><a class = "zoom" id = "thePast" href = "MovieReviews/thePast.htm">The Past</a></li>
<li><a class = "zoom" id = "theSurvivalist" href = "MovieReviews/theSurvivalist.htm">The Survivalist</a></li>
<li><a class = "zoom" id = "theUsualSuspects" href = "MovieReviews/theUsualSuspects.htm">The Usual Suspects</a></li>
<li><a class = "zoom" id = "theyLive" href = "MovieReviews/theyLive.htm">They Live</a></li>
<li><a class = "zoom" id = "thisIsNotAFilm" href = "MovieReviews/thisIsNotAFilm.htm">This is not a Film</a></li>
<li><a class = "zoom" id = "turboKid" href = "MovieReviews/turboKid.htm">Turbo Kid</a></li>
<li><a class = "zoom" id = "weirdScience" href = "MovieReviews/weirdScience.htm">Weird Science</a></li>
<li><a class = "zoom" id = "whatWeDoInShadows" href = "MovieReviews/whatWeDoInTheShadows.htm">What We do in the Shadows</a></li>
<li><a class = "zoom" id = "waltzWithB" href = "MovieReviews/waltzWithBashir.htm">Waltz With Bashir</a></li>
<li><a class = "zoom" id = "garp" href = "MovieReviews/worldAccordingToGarp.htm">World According to Garp</a></li>
<li><a class = "zoom" id = "worldsGreatestDad" href = "MovieReviews/worldsGreatestDad.htm">World's Greatest Dad </a></li>
</ul>
</div>
<footer>
<hr id = "footerHr">
<ul id = "socialMenu">
<li class = "social"><a href = "spotify:user:1256028498"><img class = "footerImg" id = "spotify" src = "../Images/spotify.png" alt = "spotify"></a></img></li>
<li class = "social"><a href = "https://www.instagram.com/jake_m_winters/"><img class = "footerImg" id = "insta" src = "../Images/insta.png" alt = "insta"></img></a></li>
<li class = "social"><a href = "https://www.linkedin.com/in/JacobMWinters"><img class = "footerImg" id = "linkedIn" src = "../Images/linkedin.png" alt = "linkedIn"></img></a></li>
<li class = "social"><a href = "https://soundcloud.com/user-311952172"><img class = "footerImg" id = "soundCloud" src ="../Images/soundcloud.png"></img></a></li>
</ul>
</footer>
</body>
<script src = "../JS/JMW.js"></script>
<script src = "../JS/archive.js"></script>
</html>
CSS:
#body {
background-image: none;
background-repeat: no-repeat;
background-position: center;
}
am I adding the listeners right? How do I know from within the functions I have defined what the element that made the event happen is? is event.target.id right?
I have tried a few methods but have found many ways of doing so. I don't want to use jQuery as I am trying to learn base javascript. If you feel like this is really better suited to jQuery please let me know why. Any help is very appreciated. Thanks!
Another side question that I only want an answer to if you know of the top of your head: I want to style the background images I use to all have a white rounded vignette so the belend into the background. I also want the alpha of all of the images changed. Once again this isn't my main question and can be ignored
