how to change image src whene mouse move?

This really is a task that requires javascript, and it's not a complex task either and can be done without "in-depth" knowledge.

However, if you want a look-alike solution using pure css, try changing the img to a div, using css to set display: block and the width and height to the size of your picture. Then place the picture there with background-image, and modify that property on mouseover.

Solution

Use jQuery[^], which makes life easier.

Code

$(document).ready(function () {
    $('.imgh')
        .mouseover(function () {
        $(this).attr("src", "http://taditdash.files.wordpress.com/2014/01/tadit-dash.jpg");
    })
        .mouseout(function () {
        $(this).attr("src", "http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
    });
});

NOTE:

1. Mark that I have assigned the Image URLs to the source attribute.
2. To run jQuery, you have to include the jQuery file in the head section of your WebPage.
3. You can download from here[^].
   Else you can directly use the online latest version like...
   
   HTML

   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Demo

[Demo] Change Image Source on Mouse Hover[^]