PDA

View Full Version : Using location.pathname to influence an image source.



WhatABoringName
11-06-2012, 09:54 AM
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 (http://www.last.fm/music/King+Crimson/Red)) there's an image with the following HTML 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:


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):


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

devnull69
11-06-2012, 11:47 AM
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


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.

WhatABoringName
11-06-2012, 05:40 PM
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:


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!

devnull69
11-06-2012, 10:19 PM
But ahem ... this is exactly what I described in my previous post


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

Yes, there is


dictionary[location.pathname]
// or in your case
dictionary[currentLink]

WhatABoringName
11-06-2012, 10:56 PM
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!