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
    Aug 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I believe it's CSS, need help Please!

    I am trying to replicate this funtction ( http://imaginecontrollers.com/shop/dyi-xbox-2/ ) It seemed simple enough. You click a color, then click the image and the image changes to the color you selected. I have searched google and I cannot find how to do this! can anyone link me to a tutorial or explain how this can be accomplished and implemented into a website please!?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Not just css, certainly some javascript going on there as well.

    There's a stack of javascript on that page, and I didn't look through it, but it's probably doing something like this:when the colour is clicked, javascript registers the event and stores the clicked colour. When a colourable element is clicked, javascript sets the colour, probably by setting a class on that element.

    Looking again at that page, the coloured elements are in an imagemap, so the colouring is probably being done by javascript rather than css, but the idea's the same.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    cdyremix (08-16-2013)

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    39
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Yes I agree too, the URL that you gave is not just a simple css, maybe combination of jquery with css...

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    wow. wordpress sites make me cry a little when I do view source.

  • #5
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you guys for your help, I have been looking further into the code and it is very overwhelming. I cannot seem to zero in on exactly what is going on. It looks like he is using a combination of plugins, css, and javascript for this.

    Here is the code that i think i need for the imagemap:

    Code:
    <div class="controller map"> <img src="http://imaginecontrollers.com/wp/wp-content/themes/bent/assets/images/dyi/xbox/none.gif" alt="image description" width="617" height="440" usemap="#map">
    <ul id="map-hover">
    <li id="area1"></li>
    <li id="area2"></li>
    <li id="area3"></li>
    <li id="area4"></li>
    <li id="area5"></li>
    <li id="area6"></li>
    <li id="area7"></li>
    <li id="area8"></li>
    <li id="area9"></li>
    <li id="area10"></li>
    <li id="area11"></li>
    <li id="area12"></li>
    <li id="area13"></li>
    <li id="area14"></li>
    </ul>
    <map name="map" id="map">
    <area alt="area2" shape="poly" coords="57,433,156,338,206,306,262,297,324,295,375,297,422,309,467,339,498,369,526,402,552,426,563,435,549,438,535,432,518,419,503,409,488,393,470,380,448,357,417,336,398,325,376,322,329,321,303,321,268,324,241,325,223,329,204,337,183,349,166,362,152,379,130,402,110,417,93,428,78,436,57,438" href="#">
    <area alt="area3" shape="circle" coords="219,196,58" href="#">
    <area alt="area4" shape="circle" coords="134,91,45" href="#">
    <area alt="area5" shape="circle" coords="400,193,48" href="#">
    <area alt="area6" shape="circle" coords="313,102,37" href="#">
    <area alt="area7" shape="circle" coords="443,98,23" href="#">
    <area alt="area8" shape="circle" coords="491,144,24" href="#">
    <area alt="area9" shape="circle" coords="535,100,23" href="#">
    <area alt="area10" shape="circle" coords="488,54,23" href="#">
    <area alt="area11" shape="circle" coords="378,101,18" href="#">
    <area alt="area12" shape="circle" coords="249,101,18" href="#">
    <area alt="area13" shape="poly" coords="85,28,105,15,127,7,148,2,165,1,179,4,190,6,179,-5,155,-6,125,2,112,5,97,13,88,21,92,18,84,24" href="#">
    <area alt="area14" shape="poly" coords="537,35,532,27,524,22,512,16,504,12,492,9,482,6,475,5,464,5,449,4,444,7,459,10,474,10,486,14,499,18,513,23,525,30,534,33" href="#">
    <area alt="area1" shape="poly" coords="131,9,114,14,92,25,76,45,52,99,30,163,15,225,4,296,5,393,13,414,25,433,39,437,51,438,59,430,76,410,95,393,125,366,154,340,179,320,216,300,243,295,269,293,301,294,340,293,370,296,405,301,431,312,454,327,473,347,495,363,521,392,534,408,554,426,568,436,580,436,594,431,606,411,611,387,615,369,614,342,613,320,614,300,611,275,607,253,601,220,598,194,591,167,585,141,578,117,570,99,560,76,550,54,544,43,539,36,534,33,520,29,507,24,486,17,477,12,460,11,445,6,435,10,416,17,398,27,380,33,356,37,325,36,301,36,268,35,247,32,236,29,226,23,212,15,197,9,188,8,175,5,164,3,150,3,136,6" href="#">
    </map>
    </div>
    <div class="carousel"> <a href="#" class="prev">previous</a> <a href="#" class="next">next</a>
    <div class="mask">
    <ul id="colors">
    <li><a href="#" class="red" data-original-title="red" data-tip="top" data-color="red"></a></li>
    <li><a href="#" class="orange" data-original-title="orange" data-tip="top" data-color="orange"></a></li>
    <li><a href="#" class="yellow" data-original-title="yellow" data-tip="top" data-color="yellow"></a></li>
    <li><a href="#" class="lightgreen" data-original-title="light green" data-tip="top" data-color="lightgreen"></a></li>
    <li><a href="#" class="darkgreen" data-original-title="dark green" data-tip="top" data-color="darkgreen"></a></li>
    <li><a href="#" class="aqua" data-original-title="aqua" data-tip="top" data-color="aqua"></a></li>
    <li><a href="#" class="blue" data-original-title="blue" data-tip="top" data-color="blue"></a></li>
    <li><a href="#" class="darkblue" data-original-title="dark blue" data-tip="top" data-color="darkblue"></a></li>
    <li><a href="#" class="purple" data-original-title="purple" data-tip="top" data-color="purple"></a></li>
    <li><a href="#" class="violet" data-original-title="violet" data-tip="top" data-color="violet"></a></li>
    <li><a href="#" class="mauve" data-original-title="mauve" data-tip="top" data-color="mauve"></a></li>
    <li><a href="#" class="black" data-original-title="black" data-tip="top" data-color="black"></a></li>
    <li><a href="#" class="grey" data-original-title="grey" data-tip="top" data-color="grey"></a></li>
    <li><a href="#" class="white" data-original-title="white" data-tip="top" data-color="white"></a></li>
    </ul>
    </div>
    </div>
    how can i recreate this with my own color swatch and image map?
    Last edited by VIPStephan; 08-17-2013 at 12:25 AM. Reason: added code BB tags


  •  

    Posting Permissions

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