Assign Internal Page Banner Swap

Question

The section is foo.com/agriculture. It has a banner image corresponding to the name in the javascript. I need the internal page foo.com/agriculture/harvest to have a separate banner than the foo.com/agriculture. The script I am working with for the banner swap for each page is as follows:

<script type="text/javascript"> 
var dir = location.pathname.split("/")[1]; 
//var dir2 = location.pathname;
if (dir == "agriculture")        
document.write('<IMG SRC="/images/ib_agriculture.jpg" WIDTH=1024 HEIGHT=91 BORDER=0>')  
else if (dir == "showcase")
document.write('<IMG SRC="/images/ib_show.jpg" WIDTH=1024 HEIGHT=91 BORDER=0>')  
else if (dir == "contact")      
document.write('<IMG SRC="/images/ib_contact.jpg" WIDTH=1024 HEIGHT=91 BORDER=0>')   
else if (dir == "distribution")     
</script>

I tried the following different codes to try and assign the internal page foo.com/agriculture/harvest a separate banner.

var dir = location.pathname.split("/")[1]; 
//var dir2 = location.pathname;
if (dir == "agriculture/harvest")        
document.write('<IMG SRC="/images/ib_agriculture_harvest.jpg" WIDTH=1024 HEIGHT=91 BORDER=0>')  
else if (dir == "showcase") 

var dir = location.pathname.split("/")[1]; 
//var dir2 = location.pathname;
if (dir == "harvest")        
document.write('<IMG SRC="/images/ib_agriculture_harvest.jpg" WIDTH=1024 HEIGHT=91 BORDER=0>')  
else if (dir == "showcase")

Both of the scripts above continue to grab the foo.com/agriculture banner (ib_agriculture.jpg) instead of the called foo.com/agriculture/harvest (ib_agriculture_harvest.jpg). I am not sure how to get the script to call the appropriate banner per page.

This is a bit too ambiguous. Also you should really be using `===` instead of `==`. http://stackoverflow.com/a/359509/1538708 — adamb, Nov 13 '12 at 18:08
Sorry and thank you for the mechanics error. I have edited my post to clearly clarify the issue. Thanks — ac12, Nov 13 '12 at 18:27

score 0 · Answer 1 · answered Nov 13 '12 at 22:22

First thing you should know is:

var segments = "/agriculture/harvest".split('/');
console.log(segments);  // ["", "agriculture", "harvest"]

There's a lot of ways to do this that will work, but here is a way that will let you keep most of your code the same:

var dirs = location.pathname.split('/');

if (dirs[1] == 'agriculture') {
    if (dirs[2] == 'harvest')
        ; // set harvest banner
    else
        ; // set agriculture banner
} else if (dirs[1] == 'showcase')
    ; // set showcase banner
else if (dirs[1] == 'contact')
    ; // set contact banner
// etc..

There is another way, somewhat more declarative. You can build an object containing pathname patterns and image names. Then you loop through it and take the first match. This way, you can add as many as you like without writing more code:

var banners = {
    "^/agriculture/harvest": "ib_agriculture_harvest.jpg",
    "^/agriculture": "ib_agriculture.jpg",
    "^/showcase": "ib_showcase.jpg",
    "^/contact": "ib_contact.jpg"
    // as many more as you need
};

for( var pattern in banners ) {
    var regex = new RegExp(pattern);
    if (regex.test(location.pathname)) {
        document.write('<IMG SRC="/images/'+banners[pattern]+'" WIDTH=1024 HEIGHT=91 BORDER=0>');
        break;
    }
}

Assign Internal Page Banner Swap

1 Answers1