How to create a Google's Doodle.

CodeProject

In this post we will see the basic development secret of most of the Google's Doodles.
Try rotating your cursor around the monster image.
That is nothing but a combination of Images , style sheets, and JQuery.

We will see step by step how to develop one.

Step 1: Get a Sprite Image. (Not a soft drink).
It is a technology of displaying multiple images using a single image. See the below image for example.

This is a single image file containing 18 different images. I am going to use only first nine on the left.



Step 2: Identify the Length and width of a single image. Its quite simple. Open the image in Visual studio and run the cursor and the coordinates will be shown by VS.


Step 3: Define different portions of the image in different css class.

<style type="text/css">
    .size{width:118px;height:118px;}
    
    .left-top{background:url('sprite.png') 0 0;}
    .left-center{background:url('Sprite.png') 0 -118px;}
    .left-bottom{background:url('Sprite.png') 0 -237px;}
    
    
    .middle-top{background:url('sprite.png') -118px 0;}
    .middle-center{background:url('Sprite.png') -118px -118px;}
    .middle-bottom{background:url('Sprite.png') -118px -237px;}
    
    .right-top{background:url('Sprite.png') -237px 0;}
    .right-center{background:url('Sprite.png') -237px -118px;}
    .right-bottom{background:url('Sprite.png') -237px -237px;}    
    
</style>

Step 4: Include Jquery.min.js files, as we will be using JQuery to do image transformations.
I will be capturing both cursor and Image coordinates. Now, i can compare both the coordinates and find out on what side it is to my image.

<script type="text/javascript">
     $(document).ready(function () {
         $(document).mousemove(function (e) {
             var x = $("a").offset().left;
             var y = $("a").offset().top;
             $('#spnCursor').html("X Axis : " + e.pageX + " Y Axis : " + e.pageY + " a x: " + x + " a y : " + y);
             if (e.pageX < x && e.pageY < y) {
                 $("#sprite").removeAttr('class');
                 $("#sprite").addClass("size");
                 $("#sprite").addClass("left-top");
             }
             else if (e.pageX < x && e.pageY > y && e.pageY < y + 118) {
                 $("#sprite").removeAttr('class');
                 $("#sprite").addClass("size");
                 $("#sprite").addClass("left-center");
             }
             else if (e.pageX < x && e.pageY > y + 118) {
                 $("#sprite").removeAttr('class');
                 $("#sprite").addClass("size");
                 $("#sprite").addClass("left-bottom");
             }
             else if (e.pageX > x && e.pageX < x + 114 && e.pageY < y) {
                 $("#sprite").removeAttr('class');
                 $("#sprite").addClass("size");
                 $("#sprite").addClass("middle-top");
             }
             else if (e.pageX > x && e.pageX < x + 114 && e.pageY > y && e.pageY < y + 118) {
                 $("#sprite").removeAttr('class');
                 $("#sprite").addClass("size");
                 $("#sprite").addClass("middle-center");
             }
             else if (e.pageX > x && e.pageX < x + 114 && e.pageY > y + 118) {
                 $("#sprite").removeAttr('class');
                 $("#sprite").addClass("size");
                 $("#sprite").addClass("middle-bottom");
             }
             else if (e.pageX > x + 114 && e.pageY < y) {
                 $("#sprite").removeAttr('class');
                 $("#sprite").addClass("size");
                 $("#sprite").addClass("right-top");
             }
             else if (e.pageX > x + 114 && e.pageY > y && e.pageY < y + 118) {
                 $("#sprite").removeAttr('class');
                 $("#sprite").addClass("size");
                 $("#sprite").addClass("right-center");
             }
             else if (e.pageX > x + 114 && e.pageY > y + 118) {
                 $("#sprite").removeAttr('class');
                 $("#sprite").addClass("size");
                 $("#sprite").addClass("right-bottom");
             }
         });
     });
 </script>

Step 5: Now, all i have to do is include a html element bearing the IDs described in the Jquery statements.
Here i have used a combination of List element and Hyperlink.

<body style="width:100%;height:100%">
    <form id="form1" runat="server">  
    <span id="spnCursor"></span>
        <table width="100%" >
            <tr style="height:100px"><td colspan="3"></td></tr>
            <tr>
            <td style="width:33%"></td>
            <td>
                <ul style="list-style:none;">
                <li id="sprite"><a id="A1" href="#" class="SIZE"></a></li>
                </ul>      
            </td>
            <td style="width:33%"></td>
            </tr>
            <tr style="height:100px"><td colspan="3"></td></tr>
        </table>   
    </form>
</body>

Step 6: This is very important step. Now, start enjoying the Doodle with out writing a single line of server side code.

This same Sprite Image technology has been used by most of the rich UI applications.

We will discuss the Pros and Cons of SPRITE image methodology in upcoming posts.
Code:
Click Here
Is it helpful for you? Kindly let me know your comments / Questions.