www.webdeveloper.com
Results 1 to 3 of 3

Thread: Change Image on mouse over using jquery or css?

  1. #1
    Join Date
    Nov 2013
    Location
    new york
    Posts
    62

    Thumbs up Change Image on mouse over using jquery or css?

    Can any one having the css or jquery code to get the option like "change your profile pic" (like in facebook profile we will see)?
    Please write your views?
    Responsive Web Design Companies in New York web design company briomatrix in new york.

  2. #2
    Join Date
    Dec 2013
    Posts
    1
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <style>
    li{
    display: block;
    }
    </style>
    </head>

    <body>
    <div id='wrap'>
    <div id="clickable_div">MENU</div>
    <div id="nav_menu">
    <ul class="dropDown">
    <li id="li_1"><img src="images/ori_12.png"></li>
    <li id="li_2"><img src="images/ori_14.png"></li>
    <li id="li_3"><img src="images/ori_15.png"></li>
    <li id="li_4"><img src="images/ori_16.png"></li>
    </ul>
    </div>
    </div>
    </div>

    </body>
    <script>
    $("#li_1").mouseover(function () {
    $(this).attr("src", "images/hover_12.png");
    }, function () {
    $(this).attr("src", "images/ori_12.png");
    });

    $('#wrap').mouseover( function(){
    $('#nav_menu').slideDown();
    });
    $('#wrap').mouseleave( function(){
    $('#nav_menu').slideUp();
    });

    </script>
    </html>

  3. #3
    Join Date
    Nov 2013
    Location
    new york
    Posts
    62
    Quote Originally Posted by baig123 View Post
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <style>
    li{
    display: block;
    }
    </style>
    </head>

    <body>
    <div id='wrap'>
    <div id="clickable_div">MENU</div>
    <div id="nav_menu">
    <ul class="dropDown">
    <li id="li_1"><img src="images/ori_12.png"></li>
    <li id="li_2"><img src="images/ori_14.png"></li>
    <li id="li_3"><img src="images/ori_15.png"></li>
    <li id="li_4"><img src="images/ori_16.png"></li>
    </ul>
    </div>
    </div>
    </div>

    </body>
    <script>
    $("#li_1").mouseover(function () {
    $(this).attr("src", "images/hover_12.png");
    }, function () {
    $(this).attr("src", "images/ori_12.png");
    });

    $('#wrap').mouseover( function(){
    $('#nav_menu').slideDown();
    });
    $('#wrap').mouseleave( function(){
    $('#nav_menu').slideUp();
    });

    </script>
    </html>

    thank you let me... go through it once
    Responsive Web Design Companies in New York web design company briomatrix in new york.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles