Do you like mosaic? Just try, its very interesting ;)
Here you can see example of creating mosaic game using MarqueeTool.
Try to drag marquees on each image and enjoy! Feel free to leave few lines of your thoughts or report bugs.
If you want to contact me by email please use contacts page.
For detailed information see documentation page.
Code used
<![CDATA[
<link rel="stylesheet" type="text/css" href="/css/marker.css" />
<script type="text/javascript" src="/js/prototype_reduced.js"></script>
<script type="text/javascript" src="/js/rectmarquee.js"></script>
<script type="text/javascript">
function onWindowLoad() {
var MarqueeTool1 = new Marquee('mosaic1', {
coords: {x1: 20, y1: 15, width: 170, height: 128},
preview: 'cell_1',
previewWidth: 170,
previewHeight: 128,
allowResize: false,
allowHotKeys: false,
hideEdges: true
});
MarqueeTool1.accessResize(false);
var MarqueeTool2 = new Marquee('mosaic2', {
coords: {x1: 130, y1: 85, width: 170, height: 128},
preview: 'cell_2',
previewWidth: 170,
previewHeight: 128,
allowResize: false,
allowHotKeys: false,
hideEdges: true
});
var MarqueeTool3 = new Marquee('mosaic3', {
coords: {x1: 80, y1: 25, width: 170, height: 127},
preview: 'cell_3',
previewWidth: 170,
previewHeight: 127,
allowResize: false,
allowHotKeys: false,
hideEdges: true
});
var MarqueeTool4 = new Marquee('mosaic4', {
coords: {x1: 20, y1: 76, width: 170, height: 127},
preview: 'cell_4',
previewWidth: 170,
previewHeight: 127,
allowResize: false,
allowHotKeys: false,
hideEdges: true
});
}
Event.observe(window, 'load', onWindowLoad);
</script>
...
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="/images/mosaic/mosaic1.jpg" id="mosaic1" alt="" /></td>
<td width="10"> </td>
<td><img src="/images/mosaic/mosaic2.jpg" id="mosaic2" alt="" /></td>
</tr>
<tr>
<td colspan="3" align="center">
<div> </div>
<table cellpadding="0" cellspacing="0" border="0" height="255">
<tr height="128">
<td height="128" align="right" valign="bottom"><div id="cell_1"></div></td>
<td height="128" align="left" valign="bottom"><div id="cell_2"></div></td>
</tr>
<tr height="127">
<td height="127" align="right" valign="top"><div id="cell_3"></div></td>
<td height="127" align="left" valign="top"><div id="cell_4"></div></td>
</tr>
</table>
<div> </div>
</td>
</tr>
<tr>
<td><img src="/images/mosaic/mosaic3.jpg" id="mosaic3" alt="" /></td>
<td> </td>
<td><img src="/images/mosaic/mosaic4.jpg" id="mosaic4" alt="" /></td>
</tr>
</table>
]]>
Leave your comment
del.icio.us
Digg
Google
Y! MyWeb
Blink
Simpy
FURL
Technorati
Ice Rocket
Ma.gnolia.com
Spurl
Newsvine
Reddit
Vigillar
