Ok, Let's add just one more thing and call it quits :
Instead of having links to my games in my footer, I'm just going to have the
game load on that page when the surfer mouses over the game name image in the
footer.
- I need a container for the game so I add an empty span tag :
<span id=gameholder style="position:fixed;top:100px;right:100px;z-index:1"></span>
I fixed the position and set the z-index to 1 so the game will show on top of the
other content on the page.
- I add a script called
loadgame and it will receive a parameter named
thisgame
whenever a game image is moused over.
- I will set the innerHTML of
gameholder to equal embed code, but will have the game name
replaced with the parameter named
thisgame.
this part sucks : your html will have to be concatenated for each line of code; meaning
you must put the + sign at the end of each line.
The entire html code must be enclosed in single quotes(can't conflict with double quotes)
Also the parameter named
thisgame must be outside of all quotes so that it is recognized
as a variable and will be replaced with the correct game name.
Example :
this code :
<tag something="something"></tag>
<tag another="thisgame"></tag>
Becomes this :
'<tag something="something"></tag>
' +
'<tag another="
' +
thisgame +
'"></tag>
'
* Note the tiny yellow single quotes in the interior!!!!!!!
- now add the mouseover code to each image in the footer like this
<img src=/pokerbut.jpg border=0 onmouseover="loadgame('poker.swf')">
- I want a button to close the game so I use my same close button and add this
code to the innerHTML for the
gameholder :
<img align=right src=/gfy/closebutton.gif border=0 onclick="gameout();">
DEMO : http://ooaz.com/gfy/gfytest003.html
Here's the new code : (board changed ":" and "D" to smile with glasses in classid)
<script type="text/javascript">
var thisgame = "";
function loadgame(thisgame) {
document.getElementById("gameholder").innerHTML =
'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '+
'id=test width=768 height=346 '+
'codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=7,0,0,0"> '+
'<param name="movie" value="/ooaz/' + thisgame + '"> '+
'<param name="quality" value="high"> '+
' <param name="play" value="true"> '+
' <param name="loop" value="true"> '+
' <param name="allowfullscreen" value="true"> '+
'<param name="bgcolor" value="#000000"> '+
'<embed src="/ooaz/' + thisgame + '" '+
'width=768 height=346 bgcolor="#000000" quality="high" loop="true" allowfullscreen="true" '+
'TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/"> '+
'</EMBED> '+
'</OBJECT> <img align=right src=/gfy/closebutton.gif border=0 onclick="gameout();">';
}
function gameout() {
document.getElementById("gameholder").innerHTML = "";
}
</script>
<div id=footer class="pos_fixed" style="width:100%;background-color:darkgreen;border:solid yellow 1px;">
<center>
<table width=100% bgcolor=orange border=0 cellspacing=0 cellpadding=0 style="border:solid silver 1px;">
<tr>
<td><a href=/><img src=/logo01.jpg border=0></a></td>
<td><a href=/ooaz/poker.html><img src=/pokerbut.jpg border=0 onmouseover="loadgame('poker.swf')"></td>
<td><img src=/blackjackbut.jpg border=0 onmouseover="loadgame('blackjack.swf')"></td>
<td><img src=/lucky7but.jpg border=0 onmouseover="loadgame('lucky7.swf')"></td>
<td><img src=/wheeloffbut.jpg border=0 onmouseover="loadgame('wheeloff.swf')"></td>
</tr>
</table>
</center>
</div>
<span id=gameholder style="position:fixed;top:100px;right:100px;z-index:1"></span>
<span id=footerbutton style="position:fixed;right:0px;bottom:0px;" onClick="footexpand();"></span>
<script type="text/javascript">
var mytog = 0;
var putback = document.getElementById("footer").innerHTML;
document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>";
function footexpand() {
if (mytog == 0) {
document.getElementById("footer").innerHTML = "";
document.getElementById("footerbutton").innerHTML = "<img src=/gfy/openbutton.gif border=0>";
mytog=1;
}
else {
document.getElementById("footer").innerHTML = putback;
document.getElementById("footerbutton").innerHTML = "<img src=/gfy/closebutton.gif border=0>";
mytog=0;
}
}
</script>
Well that was kind of fun; especially since I made that up as I went along.
This would have been better if I had planned it and made better graphics etc but
I hope it works for you.