Resize the image using Ajax Slider Extender

Introduction:

Here we resize the image width, height using Ajax slider extender

Description:

In an previous article I wrote about how to use of slider extender and how to apply css for slider extender..

http://www.dotnetcode.in/2011/10/using-ajax-slider-extender-with-css-in.html

http://www.dotnetcode.in/2011/11/using-ajax-multihandleslider-extender.html

By using simple code we can easily resize the image width and height using slider extender with java script. This type method can be use to zoom image.

Here it’s very interesting to work on JavaScript..i apply the script on textbox change event..

Here when we move the slider control the text box value has changed ,When the textbox value has changed the script can be called and apply size value to image control..

Code:

<div>         <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">         </asp:ToolkitScriptManager>         <table>         <tr>         <td>         Change image height:          <asp:TextBox ID="TextBox1" runat="server" onchange="hgh();" Text="100"></asp:TextBox>         </td>         <td>         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>         </td>         </tr>         <tr>         <td>         Change image width:         <asp:TextBox ID="TextBox3" runat="server" onchange="wdt();" Text="100"></asp:TextBox>         </td>         <td>         <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>         </td>         </tr>         </table>      </div>     <div>     <asp:SliderExtender ID="SliderExtender1" runat="server" TargetControlID ="TextBox1" BoundControlID ="TextBox2" Minimum ="0" Maximum ="300" RaiseChangeOnlyOnMouseUp ="false" >     </asp:SliderExtender>     </div>     <div>     <asp:SliderExtender ID="SliderExtender2" runat="server" TargetControlID ="TextBox3" BoundControlID ="TextBox4" Minimum ="0" Maximum ="300" RaiseChangeOnlyOnMouseUp ="false">     </asp:SliderExtender>     </div>     <div>         <asp:Image ID="Image1" runat="server" ImageUrl ="images/k1.jpg"/>     </div>

Add the JavaScript code 

<script type="text/javascript" >         function hgh() {             var ht;             ht = document.getElementById("TextBox1").value;             document.getElementById("Image1").height = ht;         }         function wdt() {             var wh;             wh = document.getElementById("TextBox3").value;             document.getElementById("Image1").width = wh;         }     </script>

Conclusion

In this article u learned about to apply image height and width using slider extender..

Post your valuable comments..