JavaScript Modification to the "Nice Web Page"
Page 1 of 1

Author:  aeracryon [ Fri Feb 24, 2006 6:28 pm ]
Post subject:  JavaScript Modification to the "Nice Web Page"

I added a JavaScript function to the output generated by AndreaMosaic when it created the HTML webpage. It zooms in on the image that the mouse is currently hovering over. The code is a little specific to my settings for Photomosaic, but it can be easily modified. It would also be extremely easy to add this feature to the actually AndreaMosaic program, if you wanted to.

I have a sample online at

Here is what I added:

<title>W:\Desktop\Copy of mother and daughter created by AndreaMosaic</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--BEGIN MODIFICATION:  New function-->
<script language="javascript">
function UpdateZoom(FileName, Coords)
   var Z = document.getElementById("MyZoom");
   Z.src =  F ; = '';
   var C = new String(Coords);
   C = C.split(",");
   var Left   = C[0];
   var Top    = C[1];
   var Right  = C[2]
   var Bottom = C[3]; = Right;  = Bottom;


<!--BEGIN MODIFICATION: No margin on page-->
<body style="margin: 0px;">

<!--BEGIN MODIFICATION:  New Zoom image used to showcase the larger versions of the individaul cells-->
<img style="position: absolute; left: 0px; top: 0px; height: 128px; width: 128px; border: 1px solid black; display: none" id= "MyZoom" src="" height="128" width="128" />
<img src="mother and daughter Mosaic.JPG" border=0 width=750 usemap="#Map">
<map name="Map">

<!--BEGIN MODIFICATION:  Function call to the UpdateZoom function on the "onmouseover" event in all the area tags.-->
  <area onmouseover ="UpdateZoom(this.href, this.coords);" shape="rect" coords="0,0,14,14" href="sq (2054).jpg" target="_blank">
  <area onmouseover ="UpdateZoom(this.href, this.coords);" shape="rect" coords="0,14,14,28" href="sq (1282).jpg" target="_blank">
  <area onmouseover ="UpdateZoom(this.href, this.coords);" shape="rect" coords="0,28,14,43" href="sq (263).jpg" target="_blank">
  <area onmouseover ="UpdateZoom(this.href, this.coords);" shape="rect" coords="0,43,14,57" href="sq (561).jpg" target="_blank">

Author:  Andrea [ Wed Mar 01, 2006 12:05 pm ]
Post subject:  Re: JavaScript Modification to the "Nice Web Page"

Thank you!
It is a nice feature :)

Author:  ...Lord Zarcon [ Fri Sep 08, 2006 4:38 am ]
Post subject: 

Great! :D

Author:  Andrea [ Thu Sep 14, 2006 12:12 am ]
Post subject: 

Note: I added it in the latest release of AndreaMosaic 3.20

Author:  aeracryon [ Wed Nov 08, 2006 6:37 pm ]
Post subject: 


Author:  carapalida [ Tue Dec 19, 2006 12:11 am ]
Post subject:  i have a question about this... i am sorta new in this...

i wan to be able to create an image of my family just like the portrait that you showed here aeracryon. but... i don't want the program to add the images automatically.

i want to ad the images manually, one by one, placing them on certain spots. so in time, once all the spots get filled, the image of the person is revield.

i want to start with a big white background and a question mark right in the middle of it. then, i'll start adding images by images, manually, so the question mark and the white background starts goign away and the main big mosaic image starts reveling itself.

can this software do this? if not, does anyone know of a software that can do this? i don't mind buying the software. or can this be done with photoshop?

i also want to keep the feature that you have, which is, once you click on each tiny image it opens up on a differnet window.

i would appreciate if any of you know anything in regards of my questions above. i thank you in advance for reading this :) :arrow:

Author:  Andrea [ Tue Dec 19, 2006 4:35 pm ]
Post subject:  Re: i have a question about this... i am sorta new in this..

Hello carapalida,

In other words you want to create manually a photomosaic, not with an automatic software. Of course manually you can do that with any graphic program like photoshop. But it takes time to move, cut, insert the images.

An easy solution is to create several tile images all of the same size, like 300x200 pixels. Then create a big white image like 2000x1500 and insert one by one the tiles into the big image.

I don't know if there exist a specific program that help you doing that. Maybe a particular filter for photoshop.


Author:  aeracryon [ Tue Dec 19, 2006 9:22 pm ]
Post subject: 

I wouldn't recommend ever creating a mosaic by placing the pictures by yourself one by one. Talk about tedious.

Now if what you mean is that you want the webpage to look like it is "building" the mosaic by "turning on" little images with the bigger overall image one by one, that could be achievable with some minor javascript modifications to the webpage that AndreaMosaic makes.

I could probably write that in about an hour or so, though I don't know how efficiently the web browser could handle that. It could be very laggy...

Author:  carapalida [ Tue Dec 26, 2006 3:04 am ]
Post subject:  thank you andrea and aeracry... and HAPPY HOLIDAYS :)

hi... and thank you andrea and aeracryon very much for replying. sorry for the delay on my part but the holidays was a little hectic here. you know whwat i mean? anyhow, how was your holidays? hope all went well.

aeracryon, yes, i think you have the right idea. what i would like to do is this; for sure i want the mosaic to be able to go online, on a website, but i would love to be able to show the mosaic being "built". just like a puzzle! every time you add a little image, the more of the mosaic (main image) shows up.

please if you have a chance look at this link/image here... ... estion.gif

ok... so... that image for instance is a silhouette and there is a question mark in the midle. once you start adding the tiny images, the face of the person would start showing up, but the rest would still be the layer that is black with the question mark.

i was also hoping that there would be away that the tiny images would only stay inside the silhouette being used, for instance in this case, the tiny images that are creating the mosaic would only go inside the black silhouette. and you could have different silhouettes of course... people's faces, animal shapes, objects etc.

is this really hard to accomplish? would any of you be able to help me a bit? i promisse i would put all my effort in this. i would really appreciate this. not to mention that this would be a neat idea for this program. and andrea, if you are reading this... THANK YOU! your program is AWESOME!

thank you both/all for taking the time in reading this.

Author:  carapalida [ Wed Dec 27, 2006 5:46 pm ]
Post subject:  following up...

hi, you both still here?
just wondering ;)

Author:  carapalida [ Thu Dec 28, 2006 8:48 pm ]
Post subject:  ???

you both must be on a vacation or something... :)
well, have a nice and save new years if i don't see you both :)

Author:  carapalida [ Sun Jan 07, 2007 4:15 am ]
Post subject:  are you guys still reading this thread???

pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee HELP :)

Author:  Andrea [ Sun Jan 07, 2007 5:57 am ]
Post subject:  Re: thank you andrea and aeracry... and HAPPY HOLIDAYS :)


In few words you want:

1. everytime you have a new image/tike it should be added to the final mosaic (that piece by piece will be build up)
- To realize this just set the duplication count parameter to 1, in other words every image can be used only once. And whenever you have a new image/tile then you will create the mosaic again. So some areas will contain the tiles the rest will be black.

2. the final mosaic should be into a silhouette.
- unfortunately the program doesnt support this. You must use a graphic program to cut out the silhouette. This can be easily down with Photoshop and a saved action. The only drawback is that if one of the tiles land into the white area it will be cut off.

Happy New Year to all!!!


Page 1 of 1 All times are UTC - 6 hours
Powered by phpBB® Forum Software © phpBB Group