Courses/Design & Technique-Essential Web Design/Q2/Example/Business-card
From Publication Station
Example constantly change image: http://publicationstation.wdka.hro.nl/go-student/examples/bussinesscard.html
Code:
<!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>
