Textpattern CMS

#1 2012-02-21 15:50:46

gavnosis

Member

From: Milton Keynes, UK

Registered: 2005-03-12

Posts: 151

Website

Best current CSS practice: linkable text over a background image

Now that Flash has sunk beneath the waves, what’s the best way to position several, different hyperlinks (Which are plain, editable text) so they are precisely positioned over a single, background graphic?

Is there anything more sophisticated than a series of absolutely positioned divs I should be aware of? (Once upon a time, I would just slice everything up – including text – in Fireworks and export, but I really want the links to be text)

(Not directly a Textpattern question, but the static page with the background image will have links to different txp articles)

Thank you in advance

#2 2012-02-21 16:10:29

philwareham

Core designer

From: Haslemere, Surrey, UK

Registered: 2009-06-11

Posts: 3,564

Website GitHub Mastodon

Re: Best current CSS practice: linkable text over a background image

Need to see the design really before we can comment on the best approach. Can you post a visual?

#3 2012-02-23 11:06:14

gavnosis

Member

From: Milton Keynes, UK

Registered: 2005-03-12

Posts: 151

Website

Re: Best current CSS practice: linkable text over a background image

Thanks Phil!

Graphic will probably have a background image, and toying with a jQuery powered pop-up like Colorbox for the actual links

My question is what to do with the links over the graphic itself – In Fireworks I can attach the links to a path (Not critical), and even have the segments change on hover etc. but I’m guessing having text is more powerful…

Anyway, here’s a lash-up circle graphic

#4 2012-02-25 21:24:24

CodeWalker

Member

From: Hampshire, UK

Registered: 2010-01-08

Posts: 110

Website

Re: Best current CSS practice: linkable text over a background image

Consider using SVG. (Try Inkscape, its free and its native format is SVG). I think you can then make the text linkable after saving as a plain SVG rather than Inkscape’s extended version.

The only other way is to place the image in a relatively positioned DIV and use z-indexes and absolute positioning to place the links on top.

reference: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

#5 2012-02-25 21:32:20

CodeWalker

Member

From: Hampshire, UK

Registered: 2010-01-08

Posts: 110

Website

Re: Best current CSS practice: linkable text over a background image

Thought of another way. Use an image map. Fireworks generate one for you using slices.