I have a site which is advertising different brands, so for each different brand I have a new page, as each brand has their own logo I want this to change based on the current page being viewed. Is this something I can achieve with JavaScript?
Logo example:
<a href="/home" class="logo"><img src="images/header/logo.png?" width="62" height="53" alt="" /></a>
On
Suppose you have HTML like this
<a href="/home" class="logo">
<img id="logo" src="images/header/logo.png?" width="62" height="53" alt="" />
</a>
In your javascript/jquery, first of all get current page
var urlParts = document.URL.split("/");
lastPart = urlParts[urlParts.length-1] == '' ? urlParts[urlParts.length-2] : urlParts[urlParts.length-1];
lastPat will contain last segment in url. For example, consider http://google.com/account and you will have account in lastPart.
This lastPart will contain current page/url part. You can use this to change logo path
if(lastPrt == 'some_page_or_url_name') {
$("#logo").attr('src', 'path_to_image');
}
Try something like this.
A simple CSS solution might work too. You could place a class in the body with the name of the brand and use CSS to serve up the logo image.
in css
Then in your HTML
or
Of course this would assume that you can dynamically put the brand name as a class into some tag before the logo (like the body tag or a container div) in which case you could also just dynamically name the image path in the code.