Positioning a small gif file over another image - possible?

[long_way]

Hi there,

I've been working on the web site for budget travel to China
( www.yilongwei.com ) for quite some time now. Since that web site is
providing information only (it's not selling tours or anything like
that, there is no ads or banners on the web site) the web site is not
generating any income which forced me to reduce all costs to the
minimum. I've been using free (open source) stuff whenever possible,
one of those free tools I've been using is GreyBox ( http://www.orangoo.com/labs/GreyBox/
) which I like and find useful. With the GreyBox it is possible to
display pictures, web pages and videos in the pop-up window. I think
that's a pretty cool effect.

At this time I've been working on the section of the web site called
"PLACES" and in this section information on places of interest in
China will be provided. While writing content of that section I have
one assumption in mind: that most western people are not familiar with
the geography of China. When names of cities and areas of China are
mentioned chances are most people won't have even slightest idea where
that could be. That's why I decided to use GreyBox and display the map
in the popup box whenever possible. However there is one problem with
that: if I make reference to, for example, 50 different places on one
web page I would have to create 50 different jpg images with the same
map but marking different spots on the map indicating where that place
is located. That is waste of time and bandwidth.

Now we come to the essence of this post (sorry for the long
introduction): would it be possible to modify the code (JavaScript) of
the GreyBox so that the same map is displayed in the pop up box
however the marker (small gif file) would be displayed in a new layer
on different (precisely defined) spots above the main image (the map
of China)?

That way one would need only one main image (the map) and another
small image (the marker) and when the greybox function is called it
would contain also coordinates of the topmost gif file (the marker)
which would indicate the position of the city in question.

Needless to say I don't have absolutely any knowledge of JavaScript so
despite my attempts to understand the JavaScript code in Greybox js
files just by scanning through the code I could not figure out how to
practically do it.

The reason I am writing this post is because I hope that for someone
who is proficient in JavaScript this should not be a huge challenge. I
value your time as much as I value mine and I don't expect anyone to
spend hours and hours working on this problem (without being paid to
do so). I was hoping someone would be able to suggest the solution
without working on it for hours or days.

Here is how I understand this problem (again, forgive my ignorance if
I don't make sense):

I think the existing function (GB_showImage) should be modified into,
for example, GB_showImageNew, (the original functionGB_showImage would
still exist!) which will show the original image and the "marker"
image (small gif file) on top of it.

Fo example, if the html code for displaying one image is:

<a href="http://static.flickr.com/119/294309231_a3d2a339b9.jpg"
onclick="return GB_showImage('Flower', this.href)">A flower in my
hand</a>

then the html code with the new function (GB_showImageNew) would, I
guess, look something like this:

<a href="http://static.flickr.com/119/294309231_a3d2a339b9.jpg"
onclick="return GB_showImageNew('Flower', 80, 40, this.href)">A flower
in my hand</a>

and in this case 80 and 40 are coordinates (in pixels) of the top left
corner of the gif image relative to the top left corner of the main
picture in the bottom layer.

(If the transparency index of the gif file could be set to .7 the
would be super, but if it's to complicated to do that then just a
simple gif file will do fine).

Is that possible?

The file name of the "marker file" (gif file in the top layer) and
it's location can be defined in the js file itself or even better, as
an attribute of the GB_showImageNew function, however it is important
that the coordinates of the gif file are defined in the function call
because it's important to be able to use the same function several
times on the same page (with different coordinates of the gif file
each time).

In hope that someone will generously offer their help with this
problem I have created a test page where suggested solutions can be
tested. The test page can be found here:

http://www.yilongwei.com/test/gbnew/gbnew.htm



I also created two files that are needed for testing purposes:

The map image: http://www.yilongwei.com/test/gbnew/img/map.jpg and

the marker gif file: http://www.yilongwei.com/test/gbnew/img/marker.gif


All GreyBox files can be downloaded from here:

http://www.yilongwei.com/test/gbnew/greybox/AJS.js
http://www.yilongwei.com/test/gbnew/greybox/AJS_fx.js
http://www.yilongwei.com/test/gbnew/greybox/gb_scripts.js
http://www.yilongwei.com/test/gbnew/greybox/gb_styles.css



All the testing files with the same directory structure can be
downloaded with this zip file (if you want to do testing on your own
computer):


http://www.yilongwei.com/test/gbnew/gbnew.zip


I will be sincerely grateful to everyone who takes their time to make
suggestions how to solve this problem,

thank you in advance,

best regards,

m


PS. I use PHP Designer (Personal) for JavaScript code editing, which
is a free program, very small (around 2Mb) and in my opinion very
good. It can be downloaded from here:

http://www.download.com/PHP-Designe...=undefined&subj=dl&tag=button&cdlPid=10592128

I mentioned this program because it would help me if you use the same
program and tell me, for example: "this code should be inserted in
greybox.js after the line number 25 (which reads .....)", etc... but
if you use other editors that's fine too, I think I will figure out
which code block needs to be replaced/modified/amended...

 

[C. (http://symcbean.blogspot.com/)]

Hi there,

Hi,

Wouldn't it just be simpler to use Google maps?

I'm not overly familiar with greybox, but it should be fairly
straightforward to amend the code. You need to seperate the problem of
how to position the overlay with how to integrate it in greybox.

I'd steer clear of changing the code of greybox if possible - keeping
your changes inline with new functionality are likely to be a pain -
it would be easier to create a wrapper around GB_showImage(), however
greybox seems to work by creating a new frame - which you'd need to
the reference to position the marker. A simpler bet might be to open
an HTML page in greybox and embed the marker handling javascript
within it.

HTH

C.

 

[long_way]

Hi,

Wouldn't it just be simpler to use Google maps?

I'm not overly familiar with greybox, but it should be fairly
straightforward to amend the code. You need to seperate the problem of
how to position the overlay with how to integrate it in greybox.

I'd steer clear of changing the code of greybox if possible - keeping
your changes inline with new functionality are likely to be a pain -
it would be easier to create a wrapper around GB_showImage(), however
greybox seems to work by creating a new frame - which you'd need to
the reference to position the marker. A simpler bet might be to open
an HTML page in greybox and embed the marker handling javascript
within it.

HTH

C.

Hi C.,

thank you for the response and your suggestions (and I apologize for
the delayed reply).
I was also considering Google maps instead, which has many advantages
(one can zoom-in etc) however I was hoping that only a slight
modification of the GreyBox code would allow creating another layer
and positioning a gif file there. It appears it is not as simple as I
have thought.

The Google map option has one disadvantage: for each place I would
have to create a separate html file and then display that html file in
the GreyBox pop up window... creating multiple html files is similar
to creating multiple maps (with markers indicating different places);
(in case of modified GreyBox code I would use one map and one marker
only), without the GreyBox modification the maps would take up more
space on the server and html files will depend on the availability of
the Google map service.

I agree, probably the best solution is to open a html file and then
manipulate the position of the market with JS in that html file (as
opposed to making changes in the GreyBox js code), because the size of
such html files will be much smaller than the size of multiple map
image files...

Thank you for your suggestions again!

best regards,

m