title: change background image when mouse over
body: <p>I have a requirement in HTML5.</p>
  
  <p><img src="https://i.stack.imgur.com/zUpFl.png" alt="enter image description here"></p>
  
  <p>News,Business,People and Branding are 4 images and i added all into the background image.
  When i mouse hover on the News image, Background image should change and mouseout should show old background image.
  I dont know what to writen on the mouseover function.</p>
  
  <p>please check the code and let me know where changes are required.
  
  
      <br>
           Intranet Application
       </p>
  
  <pre><code>&lt;style&gt;     
      html, body {
          margin: 0;
          padding: 0;
          height: 100%;
          padding-top: 0px;
          padding-bottom: 0px;
          }
  
      #BG {
          background-image: url('img/asianwoman.jpg');
          width: 100%;
          height: 100%;
          min-height: 100%;
          min-width: 100%;
          background-size: 100% 100%;                             
      }
  
  &lt;/style&gt;
  
  &lt;script type="text/JavaScript"&gt;
  
      function mouseOverFunction(){
  
      }
  
      function mouseOutFunction(){            
  
      }       
  &lt;/script&gt;   
  </code></pre>
  
  <p></p>
  
     
      
                      
        
              
          
        
              
          
        
              
          
      
    
  
  <p></p>