Changing Background Image using JS

Views: 23

document.getElementsByClassName("seo-program-01")[0].addEventListener("mouseover", function() {
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://smr-sandbox.com/wp-content/uploads/2021/04/search-marketing-services-slider-home.png)";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundRepeat = "no-repeat";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundPosition = "160% 50%"; 
}, false);

document.getElementsByClassName("seo-program-02")[0].addEventListener("mouseover", function() {
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://smr-sandbox.com/wp-content/uploads/2021/04/seo-program-success-analytics-slider-home.png)";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundRepeat = "no-repeat";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundPosition = "160% 50%"; 
}, false);

document.getElementsByClassName("seo-program-03")[0].addEventListener("mouseover", function() {
  document.getElementsByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://smr-sandbox.com/wp-content/uploads/2021/04/optimized-press-release-services-slider-home.png)";
  document.getElementsByClassName("seo-programs-section")[0].style.backgroundRepeat = "no-repeat";
  document.getElementsByClassName("seo-programs-section")[0].style.backgroundPosition = "160% 50%"; 
}, false);

document.getElementsByClassName("seo-program-04")[0].addEventListener("mouseover", function() {
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://smr-sandbox.com/wp-content/uploads/2021/04/social-media-managememnt-services-slider-home.png)";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundRepeat = "no-repeat";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundPosition = "160% 50%"; 
}, false);

Author:

Leave a Reply