Real-time transparency slider

I need to take an existing image and set the transparency in real-time, with a slider.  Assistance is greatly appreciated.
frugalmuleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Ray PaseurCommented:
You can do this easily in Photoshop.  If that's not what you're looking for, please tell us a little more about the application needs, thanks.
0
 
frugalmuleAuthor Commented:
I'm trying to choose a background color for a webpage and need the code format that would work best for that.
0
 
Kyle HamiltonData ScientistCommented:
it's not clear what you are asking.

Are you building an application that allows people to pick colors from an image that they dynamically set transparency on? Javascript/CSS?

or,

Are you just trying to find a "good" background color for your website based on some image you have? Do you have photoshop? You can get the HEX code for the color by right clicking in the photoshop file.
0
 
RobOwner (Aidellio)Commented:
seeing as you posted this in the jquery and web topics:

http://jsbin.com/EGiwotir/1/

move the slider to change the opacity of the EE image.

Use the 3 sliders below that to change the background colour.
0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
RobOwner (Aidellio)Commented:
For reference, given the jsbin may not always be accessible:

html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
  <div style='background-color: blue' class="swatch">
  <img id='myimage' src="http://experts.cachefly.net/0/images/experts-exchange/experts-exchange-logo.png" alt="">
    </div>
  <p></p>
  <div id="slider"></div>
  
  <div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
 
<div id="swatch" class="swatch ui-widget-content ui-corner-all"></div>
  <div style="margin-top:30px;">
  <p><span>Opacity: </span><span id='opacity'>1</span></p>
  <p><span>Colour: #</span><span id='colour'></span></p>
    </div>
</body>
</html>

Open in new window


css:
#red, #green, #blue {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
  }
  #swatch {
    width: 120px;
    height: 100px;
    margin-top: 18px;
    margin-left: 350px;
    background-image: none;
  }
  #red .ui-slider-range { background: #ef2929; }
  #red .ui-slider-handle { border-color: #ef2929; }
  #green .ui-slider-range { background: #8ae234; }
  #green .ui-slider-handle { border-color: #8ae234; }
  #blue .ui-slider-range { background: #729fcf; }
  #blue .ui-slider-handle { border-color: #729fcf; }

Open in new window


javascript:
 $(function() {
   $( "#slider" ).slider({
     min: 0,
     max: 1,
     step: 0.1,
     slide: function( event, ui ) {
       var opc = 1-ui.value;
        $( "#myimage" ).css( "opacity",opc );
       $("#opacity").text(opc);
      }
   });
  });

function hexFromRGB(r, g, b) {
    var hex = [
      r.toString( 16 ),
      g.toString( 16 ),
      b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
      if ( val.length === 1 ) {
        hex[ nr ] = "0" + val;
      }
    });
    return hex.join( "" ).toUpperCase();
  }
  function refreshSwatch() {
    var red = $( "#red" ).slider( "value" ),
      green = $( "#green" ).slider( "value" ),
      blue = $( "#blue" ).slider( "value" ),
      hex = hexFromRGB( red, green, blue );
    $("#colour").text(hex);
    $( ".swatch" ).css( "background-color", "#" + hex );
  }
  $(function() {
    $( "#red, #green, #blue" ).slider({
      orientation: "horizontal",
      range: "min",
      max: 255,
      value: 127,
      slide: refreshSwatch,
      change: refreshSwatch
    });
    $( "#red" ).slider( "value", 255 );
    $( "#green" ).slider( "value", 140 );
    $( "#blue" ).slider( "value", 60 );
  });

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.