Overlay in web design to create a tree like structure

[barryp92314258]

Hello Group,

Totally new to web design but proceeding slowly in right direction.

Can anyone help me with a sticking problem i have please?

I am designing a few dozen web pages for my family history and, attempting to use a TIFF of JPEG image of the family tree.

What i want to do is have a rectangle around every person on the tree which has a built in link to that

individuals web page.

Can't seem to find a way of placing a single 'cell' table anywhere other than to the outer edge of the TIFF image where i

need several separate individuals of them, all independent and re-positionable to produce the links.

Any help greatly appreciated

Regards

Barry

Tittle was edited by Moderator.

[HARSHIKA_VERMA]

Hi Barry,

Thank you for using Dreamweaver for designing web pages of your family history. I would say TIFF format is a great choice for print but isn't usable on the web, because web browsers are not able to show Tiff Files. To get a more clear idea, please check this article: How to create and open files in Dreamweaver

I like your idea of creating web pages of your family history in a tree-like structure, please see this page: How to Create A Beautiful Family History Website - Family Tree also to overlays in web design, would you mind checking this article as well? html - How do I get text to overlay on top of an image in Dreamweaver? - Stack Overflow and let us know if that helps.

Thanks,

Harshika

[pziecina]

https://forums.adobe.com/people/HARSHIKA+VERMA  wrote

Thank you for using Dreamweaver for designing web pages of your family history. I would say TIFF format is a great choice for print but isn't usable on the web, because web browsers are not able to show Tiff Files.

Just for info Harshika -

Of the major browsers in use, (Chrome, IE/Edge, Safari, Firefox) only Firefox does not offer native support for the TIFF image file format, but it does have a plug-in for tiff.

[HARSHIKA_VERMA]

Thank you Paula for letting me know, appreciate it.  I'll definitely check more about this.

Regards,

Harshika

[Nancy OShea · Accepted solution]

Hi Barry,

Welcome to the Dreamweaver forum.

Old fashioned image maps will not work in responsive web design because the hotspots invariably drift out of registration when images are rescaled to fit smaller devices (tablets & mobile phones).  You will therefore need a whole new approach that allows the image and hotspots to scale together and this is best done within a Scalable Vector Graphic (SVG file).   I have posted a working demo of one on JS Fiddle.

https://jsfiddle.net/NancyO/6k3v4ge1/13/

The vector shapes (ellipses & rectangle) represent hotspots that link out to other websites.  The placeholder image under the shapes can be any web optimized JPG or PNG you care to use.

Let me know if you have any questions.

[barryp92314258]

Thanks everyone for replies. TIFF not important but chose it for resolution over JPG. I'll take a look at these options offered.

Fully understand the registration problem, hadn't considered that.

Cheers

Barry

[rayek.elfin]

barryp92314258  wrote

Thanks everyone for replies. TIFF not important but chose it for resolution over JPG. I'll take a look at these options offered.

Fully understand the registration problem, hadn't considered that.

Cheers

Barry

Addendum: Between TIFF and JPG resolution is identical, or rather: an image saved with the same pixel resolution in both file formats share the identical resolution. The main difference between both is that TIFF is lossless, and jpg lossy. 

Anyway, if a non-lossy format is required, use PNG instead of TIFF.

I agree with Nancy's suggestion to use SVG format. And don't forget that SVG files may combine vector and bitmap images - which means you can include pictures/photos of persons as jpg files (jpg works best for these type of photos, and saves file size).