Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, October 10, 2014

Jquery Change div background on mouseover in asp.net

In Asp.net jquery-change div background Image on mouseover:



In this Post we will Try to change a background of a div when the user rollsovers it. We want to change font color of given div tag at run time when go to mouse on div and then again change when mouse left the div tag.

If you want to :

Change background image on mouse hover with jQuery:

Use this script function in head section.
<script type="text/javascript" language="javascript">

        $(document).ready(function () {

            $('div').hover(
         function () {
             $(this).css({ "background-image": "url('image2.jpg')" });
         },
         function () {
             $(this).css({ "background-image": "url('image1.jpg')" });
         }
     );

        });

    </script> 

jQuery background-image change on hover (css code):

<style>
        .div
        {
            margin: 10px;
            padding: 12px;
            border: 2px solid #666;
            width: 218px;
            font-size: large;
        }
        .style1
        {
            color: #990000;
            text-decoration: underline;
        }
        .style2
        {
            width: 874px;
        }
        .main
        {
        }
    </style>

Asp.net -Change background on hover :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="divExample.aspx.cs" Inherits="divExample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Jquery Change fount color</title>
    <%--<script type="text/javascript"
   src="https://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js"></script>--%>
    <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" language="javascript">

        $(document).ready(function () {

            $('div').hover(
         function () {
             $(this).css({ "background-image": "url('image2.jpg')" });
         },
         function () {
             $(this).css({ "background-image": "url('image1.jpg')" });
         }
     );

        });

    </script>
    <style>
        .div
        {
            margin: 10px;
            padding: 12px;
            border: 2px solid #666;
            width: 218px;
            font-size: large;
        }
        .style1
        {
            color: #990000;
            text-decoration: underline;
        }
        .style2
        {
            width: 874px;
        }
        .main
        {
        }
    </style>
</head>
<body>

<h1 class="style1">
                    Change bg Image of DIV using jQuery on move go to Image</h1>
                <p>
                    Move mouse on any square below to see the result:</p>
    <table>
        <tr>
            <td>
               
                <div class="div" style="color: blue; background-image: url('image1.jpg'); width: 200px;
                    height: 160px">
                </div>
            </td>
            <td>
                <div class="div" style="color: blue; background-image: url('image1.jpg'); width: 200px;
                    height: 160px;">
                </div>
            </td>
            <td>
                <div class="div" style="color: blue; background-image: url('image1.jpg'); width: 200px;
                    height: 160px">
                    &nbsp;</div>
            </td>
        </tr>
    </table>
   
</body>
</html>



Asp.net Related Other Post:




No comments:

Post a Comment