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

Utilize different versions of jQuery along with various plugins

Angular and Firefox are flagging the response from my OAuth call as incorrect, however, Fiddler is showing a different result

How is it possible for a local variable to be utilized outside of its original scope in code?

Progress bar displaying during Ajax request

A plethora of options for popup modals in jQuery, including stacked modals and various alternative modal

Tips for updating checked checkboxes in a php mysql database

Setting a default value in a dynamic dropdown using AngularJS

Detect changes in class properties using Node.js

Deactivate every checkbox in a row within an array

Guide to showing an uploaded image in a child component using Vue.js

Learn how to customize the path for express.cookieSession based on the req.url in your application

When populating data, two ID fields (_id and id) are generated as duplicates

What is the best way to progressively load sections of an HTML table?

Saving table sorting in Redux with Ant Design Table

Angular 6 - implementing a dynamic carousel with bootstrap styling

Looking to target an element using a cssSelector. What is the best way to achieve this?

Animating range tick movements as the range thumb moves

Receiving a 404 error when attempting to use the 'import' statement within a script tag labeled as a module

jQuery UI Datepicker extending beyond its bounds

Concealing overflow for text content through CSS styling