Menu
Hello All.
I’m trying to make a “media display” web page. This page has a button fixed-positioned in the bottom-right corner. When the button is clicked, the main content of the page is darkened, and a 300x300px media file is shown in the middle of the browser window.
When the media is shown, the button’s value and onclick must change. When the media is shown, the button must say “Hide Media” with an onclick of “hideMedia()”. When the media is hidden, the button must return to “Show Media” with an onclick of “showMedia()”.
Here’s the problem. When I originally click “Show Media”, everything appears to happen as it should. The page is shaded, the media appears, and the button’s text changes. However, when I click on the “Hide Media” button (the one that was formerly “Show Media”), nothing happens. With further investigation, it became clear the the onclick value of the button had not been changed. The source code’s below…does anyone know why this is happening?
[code=html]<html>
<head>
<title>Media Shade</title>
<style type=”text/css”>
html,body{
margin: 0; padding: 0;}
#normal{
position: absolute; margin: 0; padding: 10px;
width: 100%; height: 100%;
z-index: 0; opacity: 1;}
#shade{
background-color: #000000; position: absolute;
margin: 0; padding: 0;
width: 100%; height: 100%;
z-index: 1; opacity: .90; display: none;}
#media{
position: fixed; padding: 0;
top: 50%; left: 50%;
margin: -150px 0 0 -150px;
width: 300px; height: 300px;
z-index: 2; display: none;}
#toggle{
position: fixed; right: 10px; bottom: 10px;
z-index: 10;}
</style>
<script type=”text/javascript”>
function showMedia(){
document.getElementById(“shade”).style.display=”block”;
document.getElementById(“media”).style.display=”block”;
document.getElementById(“toggle”).value=”Hide Media”;
document.getElementById(“toggle”).onclick=”hideMedia()”;
return false;
}
function hideMedia(){
document.getElementById(“shade”).style.display=”none”;
document.getElementById(“media”).style.display=”none”;
document.getElementById(“toggle”).value=”Show Media”;
document.getElementById(“toggle”).onclick=”showMedia()”;
return false;
}
</script>
</head>
<body>
<!–The following div should show up when the page is first loaded–>
<div id=”normal”>
Text
</div>
<!–The next div is activated and a “shade” appears over the normal content–>
<div id=”shade”>
</div>
<!–The media appears in the center of the screen–>
<div id=”media”>
<img src=”file:///Users/J/Pictures/media.jpg” width=”300px” height=”300px” />
</div>
<!–The value and onclick should change when the media is shown/hidden–>
<input type=”button” name=”toggle” id=”toggle” onclick=”showMedia()” value=”Show Media” />
</body>
</html>
Thanks for the help,
Andrew S