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. #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.

  3. Users who have thanked devnull69 for this post:

    WhatABoringName (11-06-2012)

  4. #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!

  5. #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]

  6. #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
  •