Javascript – Event Handler

This evening I researched Javascript Event Handlers and managed to construct a piece of script that successfully ‘reveals’ an image when a completely separate image, link, button or div is clicked.  This means that I can now apply this method to the project website so that the animated gif file is ‘revealed’ on the ‘screen’ once a projector icon is clicked.  I have no idea at this stage whether a) the gif will start at the beginning of the sequence once revealed, or b) whether the soundtrack will only be audible once the gif has been ‘revealed’ – as it is imperitive that the animation and soundtrack sequences only start once ‘revealed’ (i.e. display changed through javascript from ‘none’ to ‘block’).

The small bit of script I developed to achieve this is as follows. In this example, clicking on the button, image or div reveals an image:

The resulting demo can be viewed at http://www.onebigegg.com/college/reel.html

 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test example - javascript event handler</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
document.getElementById("button_chris").onclick=function(){display_image()};
function display_image()
{
document.getElementById("image_chris").style.display = 'block';
}
</script>


<style>
 #projector {
 float:left;
 cursor:pointer;
 }
 #my_image_container img{
 display:none;
 }
 
</style>

</head>

<body>

<div id = "projector">
 <img src = "images/projector.png" onclick = "display_image()"/> </a>
 <button id = "button_chris" onclick = "display_image()"> Click for Film </button>
</div>
<div id = "my_image_container">
 <img src = "images/Chris_Simon2.gif" id = "image_chris" alt = "short film" />
</div>

</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s