Change Image Opacity on MouseOver using jQuery

This short article demonstrates how to change the opacity of an image when the user hovers the mouse over an image. This article is a sample chapter from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls. The chapter has been modified a little to publish it as an article.

Note that for demonstration purposes, I have included jQuery and CSS code in the same page. Ideally, these resources should be created in separate folders for maintainability.

Let us quickly jump to the solution and see how we can change the opacity of an image.

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Change Image Opacity on Hovertitle>

<style type="text/css">

.imgOpa

{

height:250px;

width:250px;

opacity:0.3;

filter:alpha(opacity=30);

}

<style>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

<script>

<script type="text/javascript">

$(function() {

$('.imgOpa').each(function() {

$(this).hover(

function() {

$(this).stop().animate({ opacity: 1.0 }, 800);

},

function() {

$(this).stop().animate({ opacity: 0.3 }, 800);

})

});

});

<script>

<head>

<body>

<form id="form1" runat="server">

<div>

<h2>Hover over an Image to change its Transparency level<h2>

<br />

<asp:Image ID="Image1" runat="server"

ImageUrl="../images/1.jpg" class="imgOpa" />

<asp:Image ID="Image2" runat="server"

ImageUrl="../images/2.jpg" class="imgOpa" />

<asp:Image ID="Image3" runat="server"

ImageUrl="../images/3.jpg" class="imgOpa" />

<asp:Image ID="Image4" runat="server"

ImageUrl="../images/4.jpg" class="imgOpa" />

<div>

<form>

<body>

<html>

In this example, observe that the images have a class attribute ‘imgOpa’. The definition of the CSS class is as shown here:

.imgOpa

{

height:250px;

width:250px;

opacity:0.3;

filter:alpha(opacity=30);

}

When the images are loaded, they are in a semitransparent state. In Firefox, Chrome and Safari, we use the opacity:n property for transparency. The opacity value can be from 0.0 - 1.0, where a lower value makes the element more transparent.

In IE 7 and later, we use filter:alpha(opacity=n) property for transparency, where the opacity value can be from 0-100.

When the user hovers the mouse over a semitransparent image, we use the jQuery hover() method to animate the opacity property from 0.3 to 1.0, thereby creating a cool effect on the images. The code to achieve this effect is shown below:

$(this).hover(

function() {

$(this).stop().animate({ opacity: 1.0 }, 800);

},

function() {

$(this).stop().animate({ opacity: 0.3 }, 800);

})

});

Retrieve Images from fatabase

This is a sample code to retrieve images from data base in a gridview as to upload images to database.

use fileupload control to upload images and on upload button click retrieve image from fileupload control(named as fulimage)by writing

StreamimgStream = fuImage.PostedFile.InputStream;

and insert it into database along with other parameters.

to retrieve image from database in a gridview use generic handler. place a template in gridview and place itemtemplate in it.now add a image here like this.

and in the ImageHandler.ashx get image id from query string and retrive image from database in a datareader then return that image by this code

context.Response.BinaryWrite((Byte[])dr[0]);

here dr[0] means that image is in first field of the database.

Download the complete code here

Click here for source code

Upload Image to database in Binary formate

This is a sample code for uploading images in database.

protected void Button1_Click(object sender, EventArgs e)

{

byte[] image = FileUpload1.FileBytes;

String name = TextBox1.Text;

String qryString = "INSERT INTO [Table] VALUES ( '" + name + "' , '" + image + "' )";

using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))

{

using (SqlCommand command = new SqlCommand(qryString, connection))

{

connection.Open();

command.ExecuteNonQuery();

}

}

}

for more details download code from here

Click here for source code

Resize Image in asp.net in C#

This is a code in C# to resize an image. it takes two inputs as target image size and the image in byte format and it'll will return target sized image.

Some terms used in the code:-
Format24bppRgb - It specifies that formate is 24 bit per pixel and for each colour that is red, green and blue 8 bits are used



using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;

public class ImageClass
{

private static byte[] ResizeImageFile(byte[] imageFile, int targetSize)
{
using (System.Drawing.Image oldImage = System.Drawing.Image.FromStream(new MemoryStream(imageFile)))
{
Size newSize = CalculateDimensions(oldImage.Size, targetSize);//User defined function to calculate image dimensions
using (Bitmap newImage = new Bitmap(newSize.Width, newSize.Height, PixelFormat.Format24bppRgb))
{
using (Graphics canvas = Graphics.FromImage(newImage))
{
canvas.SmoothingMode = SmoothingMode.AntiAlias;//set rendering quality of canvas
canvas.InterpolationMode = InterpolationMode.HighQualityBicubic;//set interpolation mode to HighQualityBiubic
canvas.PixelOffsetMode = PixelOffsetMode.HighQuality;
canvas.DrawImage(oldImage, new Rectangle(new Point(0, 0), newSize));//drow image in canvas with new size and with specific starting location
MemoryStream m = new MemoryStream();
newImage.Save(m, ImageFormat.Jpeg);//define image formate in which it is to be shown
return m.GetBuffer();//return image as byte array
}
}
}
}

private static Size CalculateDimensions(Size oldSize, int targetSize)
{
Size newSize = new Size();

//change the size according to the widh and height
if (oldSize.Height > oldSize.Width)
{
newSize.Width = (int)(oldSize.Width * ((float)targetSize / (float)oldSize.Height));
newSize.Height = targetSize;
}
else
{
newSize.Width = targetSize;
newSize.Height = (int)(oldSize.Height * ((float)targetSize / (float)oldSize.Width));
}
return newSize;
}
}

Embedding the image with an Email

We have to discuss about how to Embed an image to Email Previous Article we are discussed passing image URL directly to body tag of Email.

So , now we Embed a Image directly to Email

See the example...

try

        {

            MailMessage mail = new MailMessage();

            mail.To.Add("user@gmail.com");

            mail.From = new MailAddress("admin@support.com");

            mail.Subject = "Test with Image";

            string Body = "<b> Welcome to Embed image!</b><br><BR>Online resource for .net articles.<BR><img alt=\"\" hspace=0 src=\"cid:imageId\" align=baseline border=0 >";
            

            AlternateView htmlView = AlternateView.CreateAlternateViewFromString(Body, null, "text/html");

            LinkedResource imagelink = new LinkedResource(Server.MapPath(".") + @"\images\sample.jpg", "image/jpg");
 

            imagelink.ContentId = "imageId";

            imagelink.TransferEncoding = System.Net.Mime.TransferEncoding.Base64;

            htmlView.LinkedResources.Add(imagelink);

            mail.AlternateViews.Add(htmlView);

            SmtpClient smtp = new SmtpClient();

            smtp.Host = "smtp.gmail.com";

            //specify your smtp server name/ip here
            smtp.EnableSsl = true;

            //enable this if your smtp server needs SSL to communicate
            smtp.Credentials = new NetworkCredential("username", "password");

           // smtp.DeliveryMethod = SmtpDeliveryMethod.PickupDirectoryFromIis;

            smtp.Send(mail);

        }

        catch (Exception ex)

        {

            Response.Write(ex.Message);

        }