Skip to main content
B
barryp92314258
Participant
May 14, 2019
Answered

Overlay in web design to create a tree like structure

  • May 14, 2019
  • 2 replies
  • 886 views

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.

This topic has been closed for replies.
Correct answer Nancy OShea

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.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
May 14, 2019

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.

Nancy O'Shea— Product User & Community Expert
    B
    barryp92314258Author
    Participant
    May 15, 2019

    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
    rayek.elfin
    Legend
    May 16, 2019

    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).

    HARSHIKA_VERMA
    Community Manager
    HARSHIKA_VERMACommunity Manager
    Community Manager
    May 14, 2019

    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
    pziecina
    Legend
    May 14, 2019

    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
    Community Manager
    HARSHIKA_VERMACommunity Manager
    Community Manager
    May 14, 2019

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

    Regards,

    Harshika

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices