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>
]]>
"Users Comments"*
Leave your comment
Огромное спасибо, за классную библиотеку.
Подумывал сам о подобной функциональности, но теперь вопрос отпал.