Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • Users who have thanked devnull69 for this post:

    WhatABoringName (11-06-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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
    Code:
    dictionary[location.pathname]
    // or in your case
    dictionary[currentLink]

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •