Umeed Umeed - 7 months ago 14
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 == "http://convio.cancer.ca/site/TR/Events/General?pg=informational&fr_id=21959&type=fr_informational&sid=10335") {
//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
.hide()
and
.show()
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" />
</div>


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

I feel like I
.href
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.

Answer

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