18 {{ upvoteCount | shortNum }}
18 {{ upvoteCount | shortNum }}

Linking on sections of a graphic

by Paul Myers
14 replies
I'm looking for a way to take a large graphic and add links to specific parts of it, without slicing it up into different images and using a web page.

As an example, consider an image of a flow chart. Let's say you wanted to have links on some of the elements, but not the graphic as a whole. Any tools for this?

Ideally it would be a PDF, but I'm not married to that idea.


Paul
#graphic #linking #sections
  • Profile picture of the author cldnails
    I did some brief research into doing this myself, but it's a bit bulky and unwieldy, but this is what I found. I'm not using it yet, but it works, at least in FF and Chrome, I have not tested IE yet.

    Image Map Tool - On-line Image Map Creator - HTML & CSS | Image-Maps.com
    {{ DiscussionBoard.errors[8960430].message }}
  • Profile picture of the author Paul Myers
    I'm really trying to avoid using HTML, but that would definitely make it easier than slicing an image up in Photoshop and linking to individual elements.

    Thanks. Much appreciated. It is at least a workable option, which is more than I had one post ago.


    Paul
    Signature
    .
    Stop by Paul's Pub - my little hangout on Facebook.

    {{ DiscussionBoard.errors[8960436].message }}
    • Profile picture of the author cldnails
      I'd love to hear if you find something better and a little less cumbersome. I specifically need it to generate links to parts from a parts breakdown on equipment. I'm not a programmer, so I need something spoon fed to me.

      Good luck.
      {{ DiscussionBoard.errors[8960445].message }}
  • Profile picture of the author phpg
    If i understand correctly what you need, you might also consider CSS sprites:
    CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks
    CSS Sprites: Image Slicing’s Kiss of Death · An A List Apart Article
    {{ DiscussionBoard.errors[8961020].message }}
  • Profile picture of the author Paul Myers
    phpg,

    Thanks. That looks like a way to create an image map in CSS, which would also work.

    I'd really like to avoid having to load the graphic in a browser, if possible. It looks like Acrobat may be able to do what I want, which would be idea for graphics that are small enough to properly display in a PDF document. I'd be working with some that would be cumbersome in it, at best. That's assuming they could be turned into PDFs without being shrunk too much.

    The one I want to use at the moment is a JPG that's 2314 x 6582. Cumbersome in a browser, and completely impractical in a standard PDF doc size.


    Paul
    Signature
    .
    Stop by Paul's Pub - my little hangout on Facebook.

    {{ DiscussionBoard.errors[8961052].message }}
  • Profile picture of the author sbucciarel
    Banned
    I think I'd give Open Office a try ... you can create hotspots on an image and then Open Office easily exports to pdf. Hopefully the hotspots convert with it.

    OpenOffice Impress - Creating an image map
    {{ DiscussionBoard.errors[8962471].message }}
  • Profile picture of the author webcosmo
    You can do that, by placing transparent layers with hyperlinks on top of the image, as in webdesign would be an absolute positioned div, exactly where you want it to be.
    Signature


    {{ DiscussionBoard.errors[8962588].message }}
    • Profile picture of the author Karen Blundell
      Originally Posted by webcosmo View Post

      You can do that, by placing transparent layers with hyperlinks on top of the image, as in webdesign would be an absolute positioned div, exactly where you want it to be.
      yes - again with CSS anything can be done - the large image could be the background image and then the transparent layers on top would use CSS positioning for the linked hotspots -
      css and html is the best way to achieve what you want, Paul - though image maps also work - you still generate html from an image map using whichever software you want to generate it with. Suzanne mentioned Open Office Impress - and it works great for a quick and dirty solution -
      Signature
      ---------------
      {{ DiscussionBoard.errors[8962642].message }}
  • Profile picture of the author travlinguy
    I've still got MSFT FrontPage. You can create hot spots on any image and "install" URLs with the WYSIWYG tools. "Select" the image and a tool bar appears. There's a rectangular and circular tool that you can stretch to size. As soon as you release it you get a popup with a field to enter the url. Then save your work and it's there. I thought most WYSIWYG editors had this, no?

    EDIT: The flaw in this method just occurred to me. Unless the image is associated with an actual Web page the link wouldn't be hot.
    {{ DiscussionBoard.errors[8962796].message }}
    • Profile picture of the author Jeffery
      Originally Posted by travlinguy View Post

      I've still got MSFT FrontPage. You can create hot spots on any image and "install" URLs with the WYSIWYG tools. "Select" the image and a tool bar appears. There's a rectangular and circular tool that you can stretch to size. As soon as you release it you get a popup with a field to enter the url. Then save your work and it's there. I thought most WYSIWYG editors had this, no?

      EDIT: The flaw in this method just occurred to me. Unless the image is associated with an actual Web page the link wouldn't be hot.
      Your still good. The image does not have to be associated with a web page for the link to work because the link can also be created and saved as a bookmark. The bookmark can then be linked to a different section of the image or a different page altogether. Perfect for flowcharts when images need to link to more text or even other images.

      I do exactly what you do in FrontPage and then import it into Open Office. After it is saved in Open Office I save it as a PDF document.

      Your method works really well and gives the viewers of the chart two options:

      1) View the PDF in a browser.
      2) View the PDF on a personal computer.

      @ Paul,

      You can also give your viewers both options if you create two downloads. Say, the first download is for viewing online in pdf format and the second download is for viewing on a personal computer in pdf format without being connected to the internet.
      Signature
      In the minute it took me to write this post.. someone died of Covid 19. RIP.
      {{ DiscussionBoard.errors[8963243].message }}
      • Profile picture of the author Paul Myers
        Some excellent suggestions here. Thank you, one and all.

        For what I want to do, Suzanne's recommendation of Impress sounds like the best overall option. It will take more attention to the image sizes, but that could end up being a good thing. Keeps the content in each section to a smaller and more digestible level.

        I probably need to avoid handing people bitmaps as large as that one anyway... :/


        Paul
        Signature
        .
        Stop by Paul's Pub - my little hangout on Facebook.

        {{ DiscussionBoard.errors[8963620].message }}
  • Profile picture of the author templar
    I am on a mac. Did a screen capture with quicktime. Saved to youtube. Got a video crisp as virgin snow. Has options for "4k video". wow.

    So, wondering, does adobe acrobat have savvy knowledge like that? Can it take a 2314 x 6582 jpeg, add it as "fit to page", open with open office Impress and generate a pdf that has the image on the page, with bits hyperlinked to what need be, and displaying beautifully for whatever display one can be found with?
    Signature
    Free Crypto Coin Empire
    {{ DiscussionBoard.errors[8963634].message }}
  • Profile picture of the author Paul Myers
    If you try to fit that particular image to any reasonable page size, the text is so small it's unreadable.

    Video is nice, but it wouldn't work for the application I have in mind. This is essentially a flattened image of a mindmap, to which I'd like to add links people can use who choose not to install mindmapping software.


    Paul
    Signature
    .
    Stop by Paul's Pub - my little hangout on Facebook.

    {{ DiscussionBoard.errors[8963646].message }}
    • Profile picture of the author savidge4
      I would use Microsoft Publisher. Kills 2 birds with one stone. Gives you the hotspots, AND creates the PDF. For me personally, it is the only way to go. Word has way to many limitations.
      Signature
      Success is an ACT not an idea
      {{ DiscussionBoard.errors[8963708].message }}

Trending Topics