I have created it using CSS and Javascript. Please Copy the following code to an Html page and check it out. I have added inline comments in the code so you can get little idea on how the code is executing to generate the controll and how it is working to resize the image.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Controller By Abinash</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
//Initializing the values you can change these as your need
var control_width = '300';//in px
var eachdivwidth = (control_width/100)-1;
var bar_div_width = eachdivwidth+5;
//else show color
var barcolor = '#2AAAFF';
var changeimage = 1;
var imw ='';
var imh = '';
function CreateController()
{
var control_sting ="";
control_sting = control_sting+"<div style='height:10px;cursor:pointer; width:"+control_width+"px; float:left; position:absolute; top:0px;left:0px;' onmousedown=\"rsvalue('1')\" onmouseup=\"rsvalue('0')\">";
//creating the smalldiv inside
for(var i = 100 ;i>=1; i--)
{
control_sting = control_sting+"<div id='tde"+i+"' onmouseover=\"setcolor('"+i+"')\" ";
if(i==100)
{
control_sting = control_sting+" style='background-color:"+barcolor+"; height:10px; float:left; width:"+bar_div_width+"px;'";
}
<html>
<head>
<title>New Controller By Abinash</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
//Initializing the values you can change these as your need
var control_width = '300';//in px
var eachdivwidth = (control_width/100)-1;
var bar_div_width = eachdivwidth+5;
//else show color
var barcolor = '#2AAAFF';
var changeimage = 1;
var imw ='';
var imh = '';
function CreateController()
{
var control_sting ="";
control_sting = control_sting+"<div style='height:10px;cursor:pointer; width:"+control_width+"px; float:left; position:absolute; top:0px;left:0px;' onmousedown=\"rsvalue('1')\" onmouseup=\"rsvalue('0')\">";
//creating the smalldiv inside
for(var i = 100 ;i>=1; i--)
{
control_sting = control_sting+"<div id='tde"+i+"' onmouseover=\"setcolor('"+i+"')\" ";
if(i==100)
{
control_sting = control_sting+" style='background-color:"+barcolor+"; height:10px; float:left; width:"+bar_div_width+"px;'";
}
http://www.mindfiresolutions.com/A-slider-control-with-Javascript-and-CSS-to-Resize-Image-632.php
03/28/2010 - 05:31
HI
I copied it but it didn't work
thanks
11/12/2010 - 21:03
it doesnt work :(