img divide in links

[chechu]

I have one big image that contains other images that I would like tu use as links. I know you have to create maps with coordinates, but where can I find a program to make these coordinates ?

[jscheuer1]

Photoshop and PaintShop both have this as a part of their programs. I use PaintShop Pro 7, in it you do a:

File > Export > Image Mapper...

But, you need to have a previously saved image already loaded into PaintShop to have those options.

Also, there are stand alone programs, here is one that's free:

http://www.stockholm.bonet.se/meracl/mimg.htm

Someone mentioned an online utility for this. I'm not sure of the address though.

[jlhaslip]

google on geohtml. An Image mapping freeware that works.

[chechu]

Thanks, guys !

[chechu]

But, you need to have a previously saved image already loaded into PaintShop to have those options.

How do I do that ?

[BLiZZaRD]

Someone mentioned an online utility for this. I'm not sure of the address though.

It was me... and the addy is: http://www.pcoward.com/imagemapper/

[jscheuer1]

But, you need to have a previously saved image already loaded into PaintShop to have those options.
How do I do that ?

That's the easy part, loading an image you have into your paint program. I only know for sure in PaintShop Pro 7, I'm sure it is similar in other PaintShops that support this and probably in Photoshop too.

I assume you already have the image, just load it into PaintShop and do:

File > Export > Image Mapper...

It will take some getting used to the interface but what you will be doing is defining shapes and assigning urls and optionally targets and other attributes to them. Once you are finished you can save the HTML file or copy the code to clipboard. The resulting map will work with your image.

[chechu]

http://www.pcoward.com/imagemapper/

This one is great and so easy to use. Surely to recommend !

[chechu]

It all worked great with the image mapper,
but how do I mix that with the lightbox viewer ?
This doesn't work:

<AREA SHAPE=rect COORDS="18,11,61,58" HREF="http://www.cecicasariego.com/img/imggroot/PAQdepp.gif" rel="lightbox" title="<font color='#666666'>&nbspJohnny Depp (35 x 45 cm)<br>&nbspaquarel on paper<p></font>">

[BLiZZaRD]

This one is great and so easy to use. Surely to recommend !

Note (unless they have updated) it doesn't work online with FireFox.. BUT you can download the files and run it from your desktop (this is what I do) and when you do that it just uses your default browser, so it can then work with FireFox :)

Glad you like it, I have been using it for a couple years

[boxxertrumps]

<AREA SHAPE=rect COORDS="18,11,61,58" HREF="http://www.cecicasariego.com/img/imggroot/PAQdepp.gif" rel="lightbox" title="<font color='#666666'>&nbspJohnny Depp (35 x 45 cm)<br>&nbspaquarel on paper<p></font>">
Umm... No. you cant have html tags within html tags...
<AREA SHAPE=rect COORDS="18,11,61,58" HREF="http://www.cecicasariego.com/img/imggroot/PAQdepp.gif" rel="lightbox" title=" Johnny Depp (35 x 45 cm) aquarel on paper">

On top of having invalid characters. &nbsp; not &nbsp
You'll have to change the CSS file to style the text. add this to the css...
#caption {
color:#666666;
}

looked in the lightbox JS file, and the script only looks for anchors.
Made a change, its about 1/4 down the page, line 164.

// initialize()
// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
if (!document.getAttribute){ return; }
var anchors = document.getAttribute("href");

DISCLAIMER: im a complete noob at JS. id wait for twey or another experienced member to verify what ive done...

[chechu]

I adapted your changes, but no result ...

[jscheuer1]

What lightbox version are you using?

[boxxertrumps]

i changed V2. also, I'm not surprised it didn't work, as per my disclaimer.

and im not sure if i used the correct function either...

[jscheuer1]

What lightbox version are you using?


i changed V2. also, I'm not surprised it didn't work, as per my disclaimer.

and im not sure if i used the correct function either...

My question was for chechu.

[chechu]

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
This one. You helped me out with it, and now I'd like to take it a step further.

[boxxertrumps]

i know, jscheuer, i just thought that v1 and v2 were significantly different enough to have a change done to v2 not apply to v1.

but chechu, if all else fails you could use this for having transparent divs above the pic...

a.block{
display:block;
position:absolute;
border:0;
}

then have the links inside a div with the pic in the background...

[chechu]

I wish to stick to the lightbox-effect.
If possible with the image map, of course.

[jscheuer1]

See:

http://www.dynamicdrive.com/forums/showthread.php?p=78127&posted=1#post78127