I am currently grappling with a JavaScript mouse over event and encountering some difficulties

Question

I am currently grappling with a JavaScript mouse over event and encountering some difficulties

I am looking to dynamically change the background image of my body div whenever a link is hovered over. Here is a snippet of my code:

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>
                ...
                other nav items
                ...
            </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>
            &emsp; - 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>
                ...
                other movie links
                ...
            </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>
                ...
                other social media links
                ...
            </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;
}

I am uncertain if I am attaching the event listeners correctly. How can I determine the element that triggered the event within my defined functions? Is event.target.id the right approach?

I am trying to avoid using jQuery as I want to improve my understanding of basic JavaScript. However, if jQuery would be more suitable for this task, please explain why. Any guidance would be greatly appreciated. Thank you!

Additionally, I am considering styling the background images with a white rounded vignette and adjusting the alpha for consistency, but this is a secondary concern.

javascript html css

Answer 1

Answer №1

Your anchor selections were not made correctly. When targeting a class, make sure to include a dot before zoom:

anchors = document.querySelectorAll(".zoom"),

Additionally, remember to include the event argument for compatibility with browsers other than IE:

function modifyBackground(event) {

Answer 2

Your anchor selections were not made correctly. When targeting a class, make sure to include a dot before zoom:

anchors = document.querySelectorAll(".zoom"),

Additionally, remember to include the event argument for compatibility with browsers other than IE:

function modifyBackground(event) {

Answer 3

Answer №2

The main issue that needed to be corrected was your use of querySelectorAll("zoom"). It should have been querySelectorAll(".zoom") since you were targeting classes. This was causing a failure to access the desired links for event handling.

Additionally, there were some instances of invalid HTML code, such as not closing <img> elements.

It's best practice to utilize the event object that is automatically passed as the first argument to event handling functions. Accessing it directly as a global variable (event) is specific to old versions of Internet Explorer and may not work in all browsers. Using this to reference the DOM object that triggered the event is also recommended, for example this.id is equivalent to event.target.id.

Lastly, consider changing some of your variable names. For instance, using body as an id for anything other than the <body> element can lead to confusion.

I also included instructions to change the color of a section when the mouse hovers over it as a demonstration in the code below:

var i = 0,
anchors = document.querySelectorAll(".zoom"),
body = document.getElementById("main");

function backgroundChange(evt) {
  "use strict";
    // Event handling function
}

function backgroundRemove() {
    "use strict";
    // Function to remove background changes
}

for (i = 0; i < anchors.length; i += 1) {
    anchors[i].addEventListener("mouseover", backgroundChange);
    anchors[i].addEventListener("mouseout", backgroundRemove);
}

#main {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
}

<header>
   <img id="logo" src = "../Images/logo.png" alt = "logo" href = "../JMW.htm">

   <!-- Menu links -->
   <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>
     ...
   </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>
    &emsp; - Jake Winters
</div>
...
</footer>

Answer 4

The main issue that needed to be corrected was your use of querySelectorAll("zoom"). It should have been querySelectorAll(".zoom") since you were targeting classes. This was causing a failure to access the desired links for event handling.

Additionally, there were some instances of invalid HTML code, such as not closing <img> elements.

It's best practice to utilize the event object that is automatically passed as the first argument to event handling functions. Accessing it directly as a global variable (event) is specific to old versions of Internet Explorer and may not work in all browsers. Using this to reference the DOM object that triggered the event is also recommended, for example this.id is equivalent to event.target.id.

Lastly, consider changing some of your variable names. For instance, using body as an id for anything other than the <body> element can lead to confusion.

I also included instructions to change the color of a section when the mouse hovers over it as a demonstration in the code below:

var i = 0,
anchors = document.querySelectorAll(".zoom"),
body = document.getElementById("main");

function backgroundChange(evt) {
  "use strict";
    // Event handling function
}

function backgroundRemove() {
    "use strict";
    // Function to remove background changes
}

for (i = 0; i < anchors.length; i += 1) {
    anchors[i].addEventListener("mouseover", backgroundChange);
    anchors[i].addEventListener("mouseout", backgroundRemove);
}

#main {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
}

<header>
   <img id="logo" src = "../Images/logo.png" alt = "logo" href = "../JMW.htm">

   <!-- Menu links -->
   <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>
     ...
   </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>
    &emsp; - Jake Winters
</div>
...
</footer>

I am currently grappling with a JavaScript mouse over event and encountering some difficulties

Answer №1

Answer №2

Similar questions

Arrange images in a fluid manner around other images

What is the best way to utilize eslint in Vue components?

PHP: Bootstrap CSS for Carousels

Silky animations in kinetic.js (html5 canvas)

Are "Color Scheme" and "Color Palette" distinct from each other?

What is the best way to set up jest to generate coverage reports for Selenium tests?

What is causing the duplication of leaves when using this DFS implementation?

Having trouble with submitting a form through Ajax on Rails 4

Problem with transitions not working properly in Vue.js.The issue

Error in Javascript, exception was not handled

Placing a v-model within a Vue.js component

Line up with miniature stature

JavaScript JCrop feature that allows users to resize images without cropping

Unexpected behavior is being encountered with the else statement, and there are compatibility issues with IE and Mozilla Browser in the overall script

Modifying language in Kendo UI

Exploring nested JSON through recursive iteration in JavaScript

What could be causing the Bootstrap icon to remain the same size without changing?

The challenge with using Telerik Rad Textboxes in conjunction with JavaScript

Responsive design is achieved through the use of CSS media queries targeting the

Determine whether the response from a jQuery AJAX call is in JSON format or binary. If it is found to be binary, proceed