Exporting Illustrator documents to web

Posted on 2009-04-23
Last Modified: 2013-12-02
I am trying to output an adobe document to HTML. The problem is it renders each slice as an individual image and creates a basic HTML document to join them.

I am trying to make it put the anchors in for the links on my pages. I select an object that is grouped with and surrounded by a rectangle and in the attributes panel I enter 'rectangle' as the type of bounds for the hotspot and the URL that the hotspot links to. I also added a note which I assume is a reference to an action.

All I get is the three images - banner, main and tail frames - with no hotspots. I checked the source and could not find any anchor link attributes.

I have also tried binding each option in my banner menu with javascript onclick events with no sign of onclick elelments.

I think there is something missing that I do not know of.


Question by:andru
    1 Comment
    LVL 26

    Accepted Solution

    The answer that you are looking for is that you cannot assign a hot-spot to a grouped object. Instead, draw an invisible object on top of your object group and assign your URL to it.

    If there is any possible way to avoid using Illustrator to create your HTML, I would certainly do so. The HTML feature of Illustrator was tacked on almost a decade ago and was not very good, even then. It has not be improved much since.

    Illustrator will not let you create "roll overs" or assign links to slices. The only way to assign links is to create image maps, which are pretty much outdated in today's web world.

    Also, Adobe warns not to mix image maps with slices because of unpredictable results.

    If you must use Illustrator, a slightly better option is to create slices using CSS layers instead of an HTML table. (The option is in the Save For Web dialog box) then hand code the proper div to create your link.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    In this tutorial viewers will learn how to apply a non-rasterized, vector-scalable texture to a vector using opacity texture masks in Illustrator Open a vector in Illustrator. Black and white vectors work best, but this effect can also be used to ad…

    731 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now