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)?
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, 2014
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, 2014
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, 2014 [1 favorite]
'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, 2014 [1 favorite]
« Older Facebook: a mystery wrapped in an engima wrapped... | Places to work remotely in and around Sausalito Newer »
This thread is closed to new comments.
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, 2014 [1 favorite]