Umeed Umeed - 5 months ago 7x
HTML Question

How to change an image on specific pages using jQuery?

Okay so I learned how to remove elements on specific pages and allow them to appear on others. I thought i might be able to apply the same principle for images.

I have a banner image that I'd like to have it different on multiple pages, now instead of having to build a whole new page wrapper (i am using a CMS called Luminate) for each page, or learning their own programming language that is confusing as hell...I thought let's just use jQuery.

So what I tried to do was this:

$(document).ready(function() {
if (window.location.href == "") {
//new banner
$('#bannerrmv').attr("src", "../images/content/pagebuilder/bikerunning.png");
} else {
//original banner
$('#bannerrmv').attr("src", "../images/content/pagebuilder/cancer_fighter_sweat_971_x_327103179.jpg")

But it doesn't work. If i were to use
it does work to hide the banner that I have.

This is the html for the banner:

<div class="banner-container" id="bannerrmv">
<img src="../images/content/pagebuilder/cancer_fighter_sweat_971_x_327103179.jpg" class="banner" width="100%" alt="Image Name" />

I've searched Stack and I've come across a bunch with similar questions but different scenarios.

I feel like I
is incorrect but I don't know what I would change it to.

also if I wanted to make it for multiple urls all I would need to do is add
and then the url right?

Any suggestions would be super appreciated! thank you for your time.


yup. target the image: $.('#bannerrmv img').attr("src","../images/content/pagebuilder/bikerunning.png")