Jquery - Image Swap on hover (you can use it menu also)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Example - Image Swap Preload - Design Chemical Bangkok</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

      <script type="text/JavaScript">
        // prepare the form when the DOM is ready
        $(document).ready(function() {
            $(".img-swap-1").hover(
          function() {
              this.src = this.src.replace("_off", "_on");
              this.style.marginTop = "-25px";
          },
          function() {
              this.src = this.src.replace("_on", "_off");
              this.style.marginTop = "0px";
          });
        });
        $.fn.preload = function() {
            this.each(function() {
                $('<img/>')[0].src = this;
            });
        }
    </script>

    <style type="text/css">
        .onehalf
        {
            margin-bottom: 15px;
        }
        .onehalf h3
        {
            margin-bottom: 15px;
        }
        .onehalf ul li
        {
            margin-bottom: 5px;
        }
        .onehalf ul li img
        {
            cursor: pointer;
        }
        .dvOutPlan
        {
            float: left;
            cursor: pointer;
            width: 245px;
        }
    </style>
</head>
<body>
    <div style="background-color: #fafafa; width: 100%; padding-bottom: 10px; border-left: solid 1px #666666;
        border-right: solid 1px #666666; float: left; padding-top: 32px;" align="center">
        <div class="onehalf float-left">
            <div id="dvPremium" class="dvOutPlan">
                <img src="images/Premium_off.jpg" alt="1" class="img-swap-1" />
            </div>
            <div id="dvPlus" class="dvOutPlan">
                <img src="images/Premium_off.jpg" alt="2" class="img-swap-1" />
            </div>
            <div id="dvBasic" class="dvOutPlan">
                <img src="images/Premium_off.jpg" alt="3" class="img-swap-1" />
            </div>
            <div id="dvLite" class="dvOutPlan">
                <img src="images/Premium_off.jpg" alt="3" class="img-swap-1" />
            </div>
        </div>
    </div>
</body>
</html>
3:52 AM | Category: | 0 comments

Comments (0)

Post a Comment