topical media & game development
lib-flow-example-overlay.htm / htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<!-- googleapis provide it fast and gzipped -->
<script src="lib-flow-example-files-jquery.js"></script>
<!-- include overlay script -->
<script src="lib-flow-example-files-jquery-002.js"></script>
<link rel="stylesheet" type="text/css" href="lib-flow-example-files-overlay-minimal.css">
<!-- make all links with rel attribute to open overlays -->
<script>
$(function() {
$("button[rel]").overlay();
});
</script>
<!-- a button that triggers overlay. rel- attribute is a jQuery selector to the overlay -->
</head>
<body>
<button type="button" rel="#overlay">Open overlay</button>
<!-- overlayed element, which is styled with external stylesheet -->
<div overlay="http://www.flowplayer.org/tools/img/overlay/white.png" style="background-image: none;" class="overlay" id="overlay"><div class="close"></div>
<!-- here is the content for overlay, can be anything -->
<h2 style="margin: 10px 0pt;">Here is my overlay</h2>
<p style="margin: 0px 20px 0pt 0pt; float: left;">
<img src="lib-flow-example-files-tools.png">
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis massa id metus.
</p>
</div>
<img style="border: 0px none ; position: absolute; width: 710px; display: none;" src="lib-flow-example-files-white.png"></body></html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.