CodingForums.com - Using location.pathname to influence an image source.

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Using location.pathname to influence an image source. (http://www.codingforums.com/showthread.php?t=281198)

Using location.pathname to influence an image source.

Greetings,

I've started looking into Javascript to solve an issue on image replacements, however I've yet to grasp the concept of programming a tad more for the piece of code to work.

On several webpages (Link) there's an image with the following HTML code:

Code:

<img src="http://static.last.fm/flatness/catalogue/noimage/noalbum_g3.png" width="220" height="220" class="album-cover"/>

Now the idea is to replace the source with a new source, found the following variable 'dictionary', depending on what the 'location.pathname' of the webpage is:

Code:

var albumCover = document.getElementsByClassName('album-cover') // Get the album cover

var currentLink = location.pathname

var dictionary = 

{ // location.pathname : image source for albumCover

'/music/King+Crimson/Red' : 'http://i1325.photobucket.com/albums/u622/last_fm_projeKct/Last%20FM%20covers/Red.jpg',

'/music/King+Crimson/Discipline' : 'http://i1325.photobucket.com/albums/u622/last_fm_projeKct/Last%20FM%20covers/Discipline.jpg'

}

The problem I'm having is referring to the dictionary within an if-else statement. What I think it should look like (but what hasn't worked for me):

Code:

var albumCover = document.getElementsByClassName('album-cover') // Get the album cover

var currentLink = location.pathname

var dictionary = 

{ // location.pathname : image source for albumCover

'/music/King+Crimson/Red' : 'http://i1325.photobucket.com/albums/u622/last_fm_projeKct/Last%20FM%20covers/Red.jpg',

'/music/King+Crimson/Discipline' : 'http://i1325.photobucket.com/albums/u622/last_fm_projeKct/Last%20FM%20covers/Discipline.jpg'

}



if (currentLink === ''//first part of the dictionary)

        {

                albumCover.src = ''//second part of the dictionary

        };

Thanks for taking the time to read this.

Cheers

So you want to use the location.pathname stored in currentLink as a key to the "dictionary" object literal to retrieve the new image src?

Try this

Code:

albumCover[0].src = dictionary[currentLink];

Explanation: You have to use an index (e.g. [0]) on albumCover because getElementsByClassName always returns a collection of elements with the same class even if there's only one such element on the page.

Thanks, that already helped a lot. However, if I may be so bold to ask for one small way of making the code a lot easier as the dictionary will grow bigger. Now my code is this:

Code:

var albumCover = document.getElementsByClassName('album-cover')[0] // Get the album cover

var currentLink = location.pathname

var dictionary = 

{ // location.pathname : image source for albumCover

'/music/King+Crimson/Red' : 'http://i1325.photobucket.com/albums/u622/last_fm_projeKct/Last%20FM%20covers/Red.jpg',

'/music/King+Crimson/Discipline' : 'http://i1325.photobucket.com/albums/u622/last_fm_projeKct/Last%20FM%20covers/Discipline.jpg'

}



if (currentLink === '/music/King+Crimson/Red')

        {

                albumCover.src = 'http://i1325.photobucket.com/albums/u622/last_fm_projeKct/Last%20FM%20covers/Red.jpg'

        };

Is there a way of adressing the dictionary instead of having an if-statement for each 'location.pathname'?

If not, no worries. This already got me what I needed.

Cheers!

But ahem ... this is exactly what I described in my previous post

Quote:

Is there a way of adressing the dictionary instead of having an if-statement for each 'location.pathname'?

Yes, there is

Code:

dictionary[location.pathname]

// or in your case

dictionary[currentLink]

There aren't enough facepalms in the universe to express the stupidity in my last post. Guess easy answers aren't meant for me.

That covered the problem, much appreciated.

Cheers!