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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Creating a color picker

    Hello there, looking to implement the color picker on this website onto mine ~ HTML Color Picker
    Just the hexagon with the input field, not interested in the darker/light shades part.

    I basically took the source code on the website and used that but unsure of what to change in the html code to make it work exactly like it is there.
    Mainly I'm having trouble with the onMouseOver and onClick functions aren't working like they are on that website, so wondering what I have to change over in the source code to make it work.

    Bit of a novice so any help is appreciated.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,720
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    Oh, man, that color picker is ANCIENT code!

    But why are you having a problem with it?

    I think you need to show it, as it is on YOUR website, before we could comment on what's wrong with your code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm just wondering how you make it interactive/functional like it is on that website

    First portion of the code is (It's really long)
    Code:
    <div id='selectedColor' style='visibility:hidden;position:relative;width:21px;height:21px;background-image:url("selectedcolor.gif")'></div><img style='margin-right:2px;' src='colormap.gif' usemap='#colormap' alt='colormap' /><map id='colormap' name='colormap' onmouseout='mouseOutMap()'><area style='cursor:pointer' shape='poly' coords='63,0,72,4,72,15,63,19,54,15,54,4' onclick='clickColor("#003366",20,54)' onmouseover='mouseOverColor("#003366")'

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,720
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    Helps to break the code into logical lines
    Code:
    <div id='selectedColor' style='visibility:hidden;position:relative;width:21px;height:21px;background-image:url("selectedcolor.gif")'></div>
    <img style='margin-right:2px;' src='colormap.gif' usemap='#colormap' alt='colormap' />
    <map id='colormap' name='colormap' onmouseout='mouseOutMap()'>
    <area style='cursor:pointer' shape='poly' coords='63,0,72,4,72,15,63,19,54,15,54,4' onclick='clickColor("#003366",20,54)' onmouseover='mouseOverColor("#003366")'
    Anyway, I still don't understand the question. Did you copy the JS code from that page to your own page???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,249
    Thanks
    15
    Thanked 254 Times in 254 Posts
    There is an inherent problem with making a webpage color picker. The actual color map is 3 or 4 dimensions, and the page is only two dimensions. That's why there are so many of them, none really completely works.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,720
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    True, but the one shown on that w3c page isn't bad. It's probably adequate for 98% of web usage.

    I really don't understand why he is having problems with it. i *suspect* that he didn't view the source code of the page and grab the needed JS code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't really know how to explain it better.
    You suspected wrong, I got that code from that page but its working like it is on that page.

    Does it work for you?

  • #8
    New Coder
    Join Date
    Aug 2014
    Location
    Thessaloniki,Greece
    Posts
    61
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Yes this is an ancient code.
    Why dont you try something more new, for example with jquery ???

    I found this link: 20 color pickers for your site!
    20+ Best jQuery Color Picker Plugin with Demo

    Just check it!

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,720
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    Yes. I got it to work. And with cleaner code than that stuff on w3cshhols.

    Look here:
    http://plopon.com/colorpicker.html

    There are only 3 files involved:
    plopon.com/colorpicker.html
    plopon.com/selectedcolor.gif
    plopon.com/colormap.gif

    So you can easily download all 3.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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