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
    68

    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?
    Looking for a best Web Design Training in New York? Briomatrix is the best institute.

  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
    68
    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
    Looking for a best Web Design Training in New York? Briomatrix is the best institute.

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