Join 3,494 readers in helping fund MetaFilter (Hide)


Venn Diagram with Links?
January 30, 2014 9:53 AM   Subscribe

On a WordPress site I'd like to add a simple, two-overlapping-circle Venn diagram -- though I'd like the text within to be various links. How would you recommend best implementing this (with a basic to intermediate understanding of HTML and CSS)?
posted by asranixon to Computers & Internet (3 answers total) 2 users marked this as a favorite
 
I'm sure someone else who knows how to do it properly will come along shortly with a better answer for you, but as a lazy shortcut for my low-skills self, I used to do this by making an image, then defining clickable areas with the HTML area tag. You can make the Venn diagram in whatever program you want, and pretty much any image editor will be able to tell you the coordinates so you can define your linkable area.

This isn't really making linkable text, just the image of text...but it might serve your needs.
posted by spelunkingplato at 10:02 AM on January 30 [1 favorite]


Google found me this.

Edit: ...and it looks like the example doesn't render properly in Chrome, but maybe this'll get you started.
posted by destructive cactus at 10:10 AM on January 30


Fun challenge! Here's a take: http://jsfiddle.net/artlung/AQjU4/ - source code in upper corner, and it should display bottom right, open that frame wider to see it all.

'm using the Google Venn Diagram API to create the image. The url to the Google can be modified to change colors for example. I think you can change overlap but this seems to be close.

Then I use CSS to create three rectangles and stuff the links in there. You can change the background-color: to a color to see how big the rectangles actually are.

Let me know if you have any questions about how it works or what you might want to modify.
posted by artlung at 1:02 PM on January 30 [1 favorite]


« Older For developers working with Fa...   |  I'm visiting the Bay Area next... Newer »

You are not logged in, either login or create an account to post comments