SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: JavaScript help

  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript help

    Good Morning:

    I'm trying to create a event that I saw on another website for a website that I am currently developing . The link is below: http://www.ralphlauren.com/family/in..._men_cs1_polos

    As you can see, when you click a colored swatch below, the image above changes to match the color. How is this done? What "event" is this in JavaScript? Is there an easier way to do this in J-Query? Any information you have or a solution, would be greatly appreciated.

    Thanks.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi Robby,

    Welcome to Sitepoint.
    You want to listen to a click event on the colors and change some state on the image to make it change, the src of the image or a class if you are using background images in css.

    Here's a pretty crude example using jQuery.
    Code html5:
    <img id="shirt" src="white.jpg">
    <ul id="colors">
      <li>red</li>
      <li>green</li>
      <li>blue</li>
    </ul>
    Code javascript:
    var shirts = {
      red: 'red.jpg',
      green: 'green.jpg',
      blue: 'blue.jpg'
    }
    var shirt = $('#shirt')[0];
    $('#colors li').click(function() {
      var color = $(this).html();
      shirt.src = shirts[color];
    })

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The image should change right within the page...correct? On the click function?

    Thanks a million, I'm going to try this solution out.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Yes, you want to update something on the image when you click a color.

    Have a go, if you get stuck post a link to your page and we'll take a look.


Bookmarks

Posting Permissions

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