Skip to content

Instantly share code, notes, and snippets.

@safranck
Last active August 29, 2015 14:16
Show Gist options
  • Save safranck/7295a148c6b1714d011d to your computer and use it in GitHub Desktop.
Save safranck/7295a148c6b1714d011d to your computer and use it in GitHub Desktop.
Using JavaScript to Add Interactions to Images
<div id="wrapper">
<div id="header">
<h1>Using JavaScript to Add Interactions to Images</h1>
</div>
<div id="main">
<img src="http://wilt.xyz/wp-content/uploads/2015/03/turtle.jpg" id="turtlePic" alt="Turtle">
</div>
<div id="footer">
</div>
</div>
var imgTurtle = document.getElementById('turtlePic');
var oldSrc = imgTurtle.src;
imgTurtle.onmouseover = function () {
this.src = 'http://wilt.xyz/wp-content/uploads/2015/03/zebra.jpg';
this.alt = 'ZEBRA!';
}
imgTurtle.onmouseout = function () {
this.src = oldSrc;
this.alt = 'TURTLE!';
}
var targetPic = document.getElementById('turtlePic');
targetPic.onclick = function () {
var leftMarginValue = 0;
function increaseMargin() {
leftMarginValue++ // update parameter each time
targetPic.style.marginLeft = leftMarginValue + 'px' //set left margin
if (leftMarginValue === 940) { // check finish condition
clearInterval(movePic);
}
}
var movePic = setInterval(function(){increaseMargin()}, 1) // update every 10ms
}
/*Overall Design*/
body {
background-color: pink;
font-family: Sans-Serif;
}
#wrapper {
width: 75em;
margin: 2em auto;
background-color: #fff;
}
#header {
background-color: deepPink;
margin: 0;
padding: 1em;
color: #fff;
}
#main {
background-color: #fff;
padding: 1em;
}
#footer {
background-color: deepPink;
margin: 0;
padding: 1em;
color: #fff;
clear: both;
}
div#footer a {
color: #fff;
}
img {
border: 10px solid deeppink;
border-radius: 100%;
display: block;
width: 200px;
height: 200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment