2

I need to change background image on mouseover on the logo image. I was able to do it, but the transition between images in not smooth.

Could you please help me in getting a smooth transition between the images ?

Here is the code:

<HEAD>
    <link rel="stylesheet" href="zenota.css">
    <SCRIPT language="javascript">
    function MouseOver(){
        document.body.style.backgroundImage="url('picture2.jpg')";
    }

    function MouseOut(){
        document.body.style.backgroundImage="url('picture1.png')";
    }
    </SCRIPT> 
</HEAD>
<BODY>
    <a href="#" onMouseOver="MouseOver()" onMouseOut="MouseOut()">
    <img name="picture" src="zenota3.png" alt="My Image" width="300" height="150"/>
    </a>
</BODY>
Johan
  • 1,016
  • 7
  • 13
Sana
  • 21
  • 2

1 Answers1

0

Transitions provide the look of animation by changing CSS values smoothly over a specific duration of time. Check this...
http://www.developerdrive.com/2012/05/how-to-make-smooth-transitions-with-css3/

Jinesh
  • 1,480
  • 2
  • 25
  • 52
  • But applying that to the background image work won't. It isn't animatable. No, you can't: http://www.w3.org/TR/css3-transitions/#animatable-css – Quentin Mar 11 '14 at 07:54
  • Please [avoid link only answers](http://meta.stackoverflow.com/tags/link-only-answers/info). Answers that are "barely more than a link to an external site” [may be deleted](http://stackoverflow.com/help/deleted-answers). – Quentin Mar 11 '14 at 07:55
  • Thank you for your reply. I can see that the transition applied is for width of the square. I need transition to be applied to background image. As I have already mentioned I am new to web designing. Could you please take a look at the page and let me know what code needs to be applied. – Sana Mar 11 '14 at 10:41
  • @Sana please check this...http://stackoverflow.com/questions/9483364/css3-background-image-transition.... – Jinesh Mar 11 '14 at 10:56