Editing Courses/Design & Technique-Essential Web Design/Q2/Example/Business-card

Example constantly change image:  http://publicationstation.wdka.hro.nl/go-student/examples/bussinesscard.html

Code:
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
    body{background: #CC92F5;
	}

  div#card { width: 500px;
  height: 300px;
  border: 2px solid #FED21B;
  background: white;
  display: block;
  margin-left:auto;
  margin-right:auto;
  margin-top:100px;
  }

  div * { text-align:center;
  color: #CC92F5;
  text-shadow: 1px 1px 1px #FED21B;

  }
  a, a:hover, a:visited { color: #CC92F5; 
  text-decoration: underline;
  }
  

</style>
  </head>
<body>

<div id="card">
  <h1>LSP</h1>
  <h3>Your highness Lumpy Space Princess </h3>
  <h3><a href="mailto:princess@lumpyspace.com">princess@lumpyspace.com</a></h3>
</div>


<script>
    var counter = 0; //counter starts at 0

lsp_imgs = ["http://i.giphy.com/EsYu229wwE9R6.gif", "http://i.giphy.com/CVHyjsVMGPqq4.gif", "http://i.giphy.com/9ZxHNOvMggGl2.gif", "http://i.giphy.com/VFzAK3xAaUCpW.gif", "http://i.giphy.com/scGSxIFxfOkSs.gif"]

$(document).ready(
    
    $('div#card').mouseover(
	function(){ 

            counter = counter + 1; //add 1 to counter every time mouseover  

	    if ( counter >= lsp_imgs.length ) { //if the counter value is large or equal ( >= ) to lsp_imgs list size. Then:
		counter = 0; //reset the counter
	    }

	    console.log(counter);
	    var img_url = "url( %img% )".replace('%img%', lsp_imgs[counter]); // using replace, create: "url('http://i.giphy.com/EsYu229wwE9R6.gif')"
	    $('div#card').css('background', img_url); 
            
	})    

)
</script>
</body>
</html>

</source>