Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

Question

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

I would like to be able to change the background image of a <div> when hovering over a link. Initially, the <div> should not have a background image when the page loads for the first time.

This is my current setup:

<div class="background">
  <a href="#" data-bkgimg="link-1-bkg.jpg">Link 1</a>
  <a href="#" data-bkgimg="link-2-bkg.jpg">Link 2</a>
</div>

Here's what I want to achieve on hover:

<div class="background" style="background-image: url('link-1-bkg.jpg');">
  <a href="#" data-bkgimg="link-1-bkg.jpg" class="is-active">Link 1</a>
  <a href="#" data-bkgimg="link-2-bkg.jpg">Link 2</a>
</div>

I know this can be done with jQuery, but I prefer a vanilla JS solution if possible.

javascript html css hover background-image

Answer 1

Answer №1

Take a look at this codepen

var link1 = document.getElementById("link1");
var div1 = document.getElementById("div1");

link1.addEventListener("mouseover", function( event ) { 
    var bg = event.target.dataset.bkgimg;
    div1.style.backgroundImage = 'url('+bg+')';
});

link1.addEventListener("mouseleave", function( event ) { 
    div1.style.backgroundImage = '';
});

This example code serves to demonstrate how to achieve a certain functionality. If you are accustomed to using JQuery but want to switch to vanilla.js, check out this resource:

Update: There are various ways to accomplish the same goal, but the key concept is to store background image links in data attributes, like data-bkgimg="link-2-bkg.jpg", and manipulate them on specific mouse events using JavaScript, such as mouseover.

Answer 2

Take a look at this codepen

var link1 = document.getElementById("link1");
var div1 = document.getElementById("div1");

link1.addEventListener("mouseover", function( event ) { 
    var bg = event.target.dataset.bkgimg;
    div1.style.backgroundImage = 'url('+bg+')';
});

link1.addEventListener("mouseleave", function( event ) { 
    div1.style.backgroundImage = '';
});

This example code serves to demonstrate how to achieve a certain functionality. If you are accustomed to using JQuery but want to switch to vanilla.js, check out this resource:

Update: There are various ways to accomplish the same goal, but the key concept is to store background image links in data attributes, like data-bkgimg="link-2-bkg.jpg", and manipulate them on specific mouse events using JavaScript, such as mouseover.

Answer 3

Answer №2

If you want to accomplish this using vanilla JavaScript, you can simply select the element and add an event listener for the mouse event. Here's how you can do it:

var selectedElement = document.querySelector("#hoverItem");

selectedElement.addEventListener("mouseover", function(){
    selectedElement.style.backgroundImage = "url('http://lorempixel.com/output/nature-q-c-640-480-10.jpg')";
});

selectedElement.addEventListener("mouseout", function(){
    selectedElement.style.backgroundImage = "url('http://lorempixel.com/output/abstract-q-c-640-480-3.jpg')";
});

Check out a working example here:

https://jsbin.com/ceqiku/edit?html,js,output

Answer 4

If you want to accomplish this using vanilla JavaScript, you can simply select the element and add an event listener for the mouse event. Here's how you can do it:

var selectedElement = document.querySelector("#hoverItem");

selectedElement.addEventListener("mouseover", function(){
    selectedElement.style.backgroundImage = "url('http://lorempixel.com/output/nature-q-c-640-480-10.jpg')";
});

selectedElement.addEventListener("mouseout", function(){
    selectedElement.style.backgroundImage = "url('http://lorempixel.com/output/abstract-q-c-640-480-3.jpg')";
});

Check out a working example here:

https://jsbin.com/ceqiku/edit?html,js,output

Answer 5

Answer №3

To set or remove a background image, you can add the addEventListener directly to anchor tags or first add a class to the anchor tag and then add the event listener to it. Retrieve the value of data-bkgimg using getAttribute and manipulate the background-image accordingly.

var links = document.getElementsByTagName('a');

function setImage() {
  var bg = this.getAttribute('data-bkgimg');
  this.style.backgroundImage = "url(" + bg + ")";
}

function removeImage() {
  this.style.backgroundImage = "url('')";
}

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('mouseover', setImage, false);
  links[i].addEventListener('mouseout', removeImage, false);
}

a {
  padding: 30px;
  display: inline-block;
  background-size: cover;
}

<div class="background" style="background-image: url('link-1-bkg.jpg');">
  <a href="#" data-bkgimg="https://rlv.zcache.com/crash_test_dummy_marker_classic_round_sticker-r8b36e2d5c0f74a4c843565523094b867_v9wth_8byvr_324.jpg" class="is-active">Link 1</a>
  <a href="#" data-bkgimg="https://dummyimage.com/300.png/09f/fff">Link 2</a>
</div>

Answer 6

To set or remove a background image, you can add the addEventListener directly to anchor tags or first add a class to the anchor tag and then add the event listener to it. Retrieve the value of data-bkgimg using getAttribute and manipulate the background-image accordingly.

var links = document.getElementsByTagName('a');

function setImage() {
  var bg = this.getAttribute('data-bkgimg');
  this.style.backgroundImage = "url(" + bg + ")";
}

function removeImage() {
  this.style.backgroundImage = "url('')";
}

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('mouseover', setImage, false);
  links[i].addEventListener('mouseout', removeImage, false);
}

a {
  padding: 30px;
  display: inline-block;
  background-size: cover;
}

<div class="background" style="background-image: url('link-1-bkg.jpg');">
  <a href="#" data-bkgimg="https://rlv.zcache.com/crash_test_dummy_marker_classic_round_sticker-r8b36e2d5c0f74a4c843565523094b867_v9wth_8byvr_324.jpg" class="is-active">Link 1</a>
  <a href="#" data-bkgimg="https://dummyimage.com/300.png/09f/fff">Link 2</a>
</div>

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

Answer №1

Answer №2

Answer №3

Similar questions

Trouble with an external .js script

Sleek descending motion effect

How can we effectively transform an HTML opening and closing tag into a function?

Responsive on Mobile Devices

Is there a way to identify if a user originated from a Google ad and determine if this is their nth page during the session using JavaScript code?

Is there a way to load the right amount of images in advance, depending on the size of the

creating an interactive element that seamlessly integrates with a dynamic background image slideshow

JavaScript Recursive Function for Generating FancyTree JSON Structure

When I decide to incorporate both BootstrapVue and Vuetify CSS frameworks into a single project

Setting up Scss and purgeCss configuration in Next.js custom postCSS configuration: A step-by-step guide

Modifying the appearance of InputText through CSS encapsulation

What is the best way to adjust a horizontal list of inline elements to stack vertically when the div container is resized?

What are the steps to integrate Webpack into an EJS Reactjs Express MongoDb application?

Unable to locate module: '@material-ui/pickers' - Material UI React

When utilizing the "as" attribute, styled components do not inherit any styles

Manipulate a deeply nested JSON object in JavaScript by iterating through it and constructing a new data

Take action once the Promise outside of the then block has been successfully completed

Error message: "jQuery Ajax CORS request returning undefined value"

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

Having trouble retrieving the tag name, it seems to be giving me some difficulty