Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Daniel Hallford
Daniel Hallford
4,853 Points

Create a link of a "web format" image

I would like to create an image in Illustrator and have the exact outline of the image be the link, and no more. I don't want the rest of the canvas, which is blank (the checkered part during the save action), to become the link.

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

By image, do you mean a vector image that could be an SVG? Or an actual bitmap image in AI? I'm not even sure this is possible. I'll have to look around more.

It seems like if this can't be done, it wouldn't be the end of the world though. What's the reason for this? The UI pattern we are all use to are links that are generally blocks anway.

Daniel Hallford
Daniel Hallford
4,853 Points

Thanks Kevin. Yes a bitmap image from AI is what I'm going for. For example, could I save a circular image and have the hyperlink become active only when the mouse is over the circular image's area? Or is everything based around blocks, as you said? Do I need to find a way to make links work in a rectangular fashion?

Matt Greenfield
Matt Greenfield
1,799 Points

If it is just a simple shape you could have a look in to making CSS shapes. The div itself becomes shaped.

Circles for example are very easy to make using the border-radius property. Triangles can be made using the border property I believe.

There is then the option to set the image as the div background if that helps any further.