...

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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum