CSS Image Maps - Flickr-like Technique?
Below is a sample image map that's built entirely using CSS and XHTML. While I've added support for Javascript (item titles are simply displayed beneath the image), I've disabled it in this example -- I've run into a bit of a problem when JS is enabled and CSS is disabled (more details below).
The initial idea for this came from a
blog posting I read over at Gina Trappini's blog, Scribbling.net. Her example was well done, but I wanted to attempt the same (or similar) using only CSS.
I then found a link to
The Daily Kryogenix site (via Gina's post) that led to an image map that made use of ligher DHTML, and made use of the
tag to display notes about a hotspot. Still, somewhat dependant on Javascript/DHTML.
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Posted by
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='https://www.blogger.com/profile/02030306382801319097' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/02030306382801319097' rel='author' title='author profile'>
<span itemprop='name'>Unknown</span>
</a>
</span>
</span>
<span class='post-timestamp'>
at
<meta content='http://amicusamoranthus.blogspot.com/2005/10/css-image-maps-flickr-like-technique.html' itemprop='url'/>
<a class='timestamp-link' href='https://amicusamoranthus.blogspot.com/2005/10/css-image-maps-flickr-like-technique.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2005-10-06T16:43:00+10:00'>4:43 PM</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-action'>
<a href='https://www.blogger.com/email-post/14641483/112858100698143320' title='Email Post'>
<img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
<span class='item-control blog-admin pid-45767874'>
<a href='https://www.blogger.com/post-edit.g?blogID=14641483&postID=112858100698143320&from=pencil' title='Edit Post'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>No comments:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<a href='https://www.blogger.com/comment/fullpage/post/14641483/112858100698143320' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=640,height=500"); return false;'>Post a Comment</a>
</p>
</div>
</div>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://amicusamoranthus.blogspot.com/2005/10/blogwise-blog-directory.html' id='Blog1_blog-pager-newer-link' title='Newer Post'>Newer Post</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://amicusamoranthus.blogspot.com/2005/10/xmlcom-very-dynamic-web-interfaces.html' id='Blog1_blog-pager-older-link' title='Older Post'>Older Post</a>
</span>
<a class='home-link' href='https://amicusamoranthus.blogspot.com/'>Home</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
Subscribe to:
<a class='feed-link' href='https://amicusamoranthus.blogspot.com/feeds/112858100698143320/comments/default' target='_blank' type='application/atom+xml'>Post Comments (Atom)</a>
</div>
</div>
</div></div>
</div>
<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML1'>
<h2 class='title'>Technorati</h2>
<div class='widget-content'>
<a href="http://technorati.com/faves?sub=addfavbtn&add=http://amicusamoranthus.blogspot.com"><img alt="Add to Technorati Favorites" src="http://static.technorati.com/pix/fave/btn-fave2.png"/></a>
</div>
<div class='clear'></div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Blog Archive</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2008/'>
2008
</a>
<span class='post-count' dir='ltr'>(1)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2008/04/'>
April
</a>
<span class='post-count' dir='ltr'>(1)</span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2006/'>
2006
</a>
<span class='post-count' dir='ltr'>(3)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2006/08/'>
August
</a>
<span class='post-count' dir='ltr'>(1)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2006/03/'>
March
</a>
<span class='post-count' dir='ltr'>(2)</span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2005/'>
2005
</a>
<span class='post-count' dir='ltr'>(453)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2005/11/'>
November
</a>
<span class='post-count' dir='ltr'>(56)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2005/10/'>
October
</a>
<span class='post-count' dir='ltr'>(192)</span>
<ul class='posts'>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/yahoo-360-help.html'>Yahoo! 360° Help</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/elance-buy-services-online.html'>Elance - Buy Services Online</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/080029jpg-jpeg-image-300x400-pixels.html'>080.029.jpg (JPEG Image, 300x400 pixels)</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/portrait-of-architect-rational.html'>The Portrait of the Architect Rational</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/knowplace-free-weekend-workshop.html'>KnowPlace: Free Weekend Workshop</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/following-is-list-of-news-aggregators.html'>
The following is a list of news aggregators.
An ...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/think-6-for-consultants.html'>Think 6 – For Consultants</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/business2blog-startup-watch-turning.html'>business2blog: Startup Watch: Turning Worm Poop in...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/internet-workshop-10-steps-to-basic.html'>Internet Workshop: 10 steps to basic web pages - S...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/church-of-customer-blog-small.html'>Church of the Customer Blog: Small businesses and ...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/imedia-connection-creating-customer.html'>iMedia Connection: Creating Customer Evangelists</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/irfanview-one-of-most-popular-viewers.html'>IrfanView - one of the most popular viewers worldwide</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/sound-recording-tools-total-recorder.html'>Sound recording tools: Total Recorder - captures a...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/workz-welcome.html'>WorkZ : Welcome</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/compued-conference-room.html'>CompuEd Conference Room</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/forbes-special-sections.html'>Forbes Special Sections</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/feed-validator-for-atom-and-rss.html'>Feed Validator for Atom and RSS</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/filext-file-extension-source.html'>FILExt - The File Extension Source</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/grtr-team-building-showcase-111705.html'>GRTR Team Building Showcase 11.17.05</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/new-matilda.html'>New Matilda</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/roland-piquepailles-technology-trends.html'>Roland Piquepaille's Technology Trends</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/ddn-communities-digitaldivide-list_18.html'>DDN Communities: The DIGITALDIVIDE List</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/digital-inspiration-convert-pdf.html'>Digital Inspiration: Convert PDF without Adobe Acr...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/ddn-communities-digitaldivide-list.html'>DDN Communities: The DIGITALDIVIDE List</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/cellphedia.html'>!Cellphedia</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/mauro-cherubinis-weblog-blog-archive.html'>Mauro Cherubini’s weblog » Blog Archive » Articles...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/world-around-webheads.html'>World around Webheads</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/firstgovgov-us-governments-official.html'>FirstGov.gov: The U.S. Government's Official Web P...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/digital-inspiration-software-reviews.html'>Digital Inspiration - Software Reviews, Downloads,...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/tool-sheets.html'>Tool Sheets</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/cascading-style-sheets-css-tech.html'>Cascading Style Sheets (CSS) Tech Support</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/microsoft-office-clip-art-and-media.html'>Microsoft Office Clip Art and Media</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/citeulike-free-online-service-to.html'>CiteULike: A free online service to organise your ...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/bellingers-musings.html'>Bellinger's Musings</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/developing-course-syllabus.html'>DEVELOPING A COURSE SYLLABUS</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/odyssey-learning-systems-redefining-e.html'>Odyssey Learning Systems - Redefining e-Learning</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/keywords-for-web-20.html'>Keywords for Web 2.0</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/cluetrain-manifesto.html'>the cluetrain manifesto</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/aggregators.html'>Aggregators</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/welcome-creative-commons.html'>Welcome | Creative Commons</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/edgames.html'>EdGames</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/wired-news-quit-your-job-to-blog-blog_15.html'>Wired News: Quit Your Job to Blog, Blog, Blog</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/paidcontentorg.html'>PaidContent.org</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/daring-fireball.html'>Daring Fireball</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/wired-news-quit-your-job-to-blog-blog.html'>Wired News: Quit Your Job to Blog, Blog, Blog</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/learning-technology_15.html'>Learning, Technology</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/learning-technology.html'>Learning, Technology</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/aemeritus-relevant-training.html'>AEmeritus Relevant Training</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/all-blogs.html'>All blogs</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/broadband-australia.html'>Broadband - Australia</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/broadband-broadband.html'>Broadband - Broadband</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/plugging-in.html'>Plugging In</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/dreamweaver-exchange.html'>Dreamweaver Exchange</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/pcfontscom-top-free-font-sites.html'>PCFonts.com - Top Free Font Sites</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/css-vault-webs-css-site.html'>CSS Vault » The Web's CSS Site</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/keyworddiscoverycom-keyword-research.html'>KeywordDiscovery.com - Keyword Research Tool</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/guide-to-grammar-and-writing.html'>Guide to Grammar and Writing</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/plain-english-campaign-free-guides_12.html'>Plain English Campaign: Free guides</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/plain-english-campaign-free-guides.html'>Plain English Campaign: Free guides: The plain Eng...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/10-big-myths-about-copyright-explained.html'>10 Big Myths about copyright explained</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/us-copyright-office-frequently-asked.html'>U.S. Copyright Office - Frequently Asked Questions</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/fair-use-make-easy-money-with-google.html'>Fair Use | Make Easy Money with Google</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/welcome-to-adwords.html'>Welcome to AdWords</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/view-bids.html'>View Bids</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/dogpile-searchspy.html'>Dogpile - SearchSpy</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/css-weblog-cssweblogsinccom.html'>The CSS Weblog - css.weblogsinc.com</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/nvu-complete-web-authoring-system-for.html'>Nvu - The Complete Web Authoring System for Linux,...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/tinstaafl.html'>TINSTAAFL</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/googlerankingscom-check-google-page.html'>GoogleRankings.com - Check Google™ page ranking</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/internet-usage-world-stats-big-picture_11.html'>Internet Usage World Stats - The Big Picture - Pop...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/internet-usage-world-stats-big-picture.html'>Internet Usage World Stats - The Big Picture - Pop...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/about-daa-democrats-abroad-australia.html'>About DAA | Democrats Abroad Australia</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/how-to-boost-your-adsense-revenue.html'>How to Boost Your AdSense Revenue</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/3-tips-to-increase-websites-revenue.html'> 3 Tips to Increase a Website's Revenue From Googl...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/welcome-to-msdn-library.html'>Welcome to the MSDN Library</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/australian-flexible-learning-framework.html'>Australian Flexible Learning Framework</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/web-style-sheets.html'>Web Style Sheets</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/microsoft-excel-12.html'>Microsoft Excel 12</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/veoh-networks-internet-television_09.html'>Veoh Networks - Internet Television Peercasting Ne...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/veoh-networks-internet-television.html'>Veoh Networks - Internet Television Peercasting Ne...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/educational-weblogs-alias-ships-maya.html'>Educational Weblogs: Alias ships Maya, MotionBuild...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/overview.html'>Overview</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/inqscribe-simplifying-transcription.html'>InqScribe: Simplifying Transcription</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/jotspot-live.html'>JotSpot Live</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/rollyo.html'>ROLLYO</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/moodlethemes-more-css-charts.html'>MoodleThemes - More CSS Charts</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/moodlethemes-css-chart.html'>MoodleThemes - CSS Chart</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/here-are-couple-of-good-sites.html'>Here are a couple of good sites...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/tip-theories.html'>TIP: The Theories</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/tip-learning-concepts.html'>TIP: Learning Concepts</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/criterion-referenced-instruction.html'>Criterion-referenced instruction</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/knowledge-management-organizational.html'>Knowledge Management, Organizational Learning and ...</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/skinning-cats-more-than-one-mode-for-e.html'>Skinning Cats: More than One mode for e-learning</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/benefits-and-drawbacks-of-e-learning.html'>The Benefits and Drawbacks of e-Learning</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/e-learning-project-team-roles-and.html'>e-Learning Project Team: Roles and Responsibilities</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/addie-design-phase-of-e-learning.html'>ADDIE - The Design Phase of an e-Learning Project</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/analysis-phase-of-e-learning-project.html'>The Analysis Phase of an e-Learning Project</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/e-learning-and-addie-model.html'>e-Learning and the ADDIE Model</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/rapid-prototypes-for-e-learning.html'>Rapid Prototypes for e-Learning</a></li>
<li><a href='https://amicusamoranthus.blogspot.com/2005/10/information-is-not-instruction-wise.html'>Information is Not Instruction: The Wise Remarks o...</a></li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2005/09/'>
September
</a>
<span class='post-count' dir='ltr'>(203)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='https://amicusamoranthus.blogspot.com/2005/07/'>
July
</a>
<span class='post-count' dir='ltr'>(2)</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget LinkList' data-version='1' id='LinkList2'>
<h2>Local Sponsors</h2>
<div class='widget-content'>
<ul>
<li><a href='http://www.comput101.com.au/'>101 Computer Consultants</a></li>
<li><a href='http://www.aemeritus.com.au/'>AEmeritus in Australia</a></li>
<li><a href='http://www.aemeritus.com/'>AEmeritus Relevant Training</a></li>
</ul>
<div class='clear'></div>
</div>
</div><div class='widget LinkList' data-version='1' id='LinkList1'>
<h2>Links</h2>
<div class='widget-content'>
<ul>
<li><a href='http://news.google.com/'>Google News</a></li>
<li><a href='http://safari.oreilly.com/'>Oreilly Safari</a></li>
<li><a href='http://enterprisedev.oreilly.com/'>Linux Enterprise Development on Oreilly</a></li>
<li><a href='http://feedshark.brainbliss.com'><font
size="1" face="Verdana">Feed Shark</font></a></li>
<li><a href='http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/AmoranthusEmeritus'><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif" alt="" style="border:0"/></a></li>
</ul>
<div class='clear'></div>
</div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>About Me</h2>
<div class='widget-content'>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/02030306382801319097' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
Unknown
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/02030306382801319097' rel='author'>View my complete profile</a>
<div class='clear'></div>
</div>
</div></div>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div>
<!-- end content-wrapper -->
<div id='footer-wrapper'>
<div class='footer no-items section' id='footer'></div>
</div>
</div></div>
<!-- end outer-wrapper -->
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2275200714-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5_xmU0byhBhn9IgWWFSGE5k1_v2A:1737561849422';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d14641483','//amicusamoranthus.blogspot.com/2005/10/css-image-maps-flickr-like-technique.html','14641483');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '14641483', 'title': 'Amoranthus Emeritus', 'url': 'https://amicusamoranthus.blogspot.com/2005/10/css-image-maps-flickr-like-technique.html', 'canonicalUrl': 'http://amicusamoranthus.blogspot.com/2005/10/css-image-maps-flickr-like-technique.html', 'homepageUrl': 'https://amicusamoranthus.blogspot.com/', 'searchUrl': 'https://amicusamoranthus.blogspot.com/search', 'canonicalHomepageUrl': 'http://amicusamoranthus.blogspot.com/', 'blogspotFaviconUrl': 'https://amicusamoranthus.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en-US', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Amoranthus Emeritus - Atom\x22 href\x3d\x22https://amicusamoranthus.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Amoranthus Emeritus - RSS\x22 href\x3d\x22https://amicusamoranthus.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Amoranthus Emeritus - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/14641483/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Amoranthus Emeritus - Atom\x22 href\x3d\x22https://amicusamoranthus.blogspot.com/feeds/112858100698143320/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/c8f12f73e8f3b106', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '112858100698143320', 'pageName': 'CSS Image Maps - Flickr-like Technique?', 'pageTitle': 'Amoranthus Emeritus: CSS Image Maps - Flickr-like Technique?'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'CSS Image Maps - Flickr-like Technique?', 'description': 'CSS Image Maps - Flickr-like Technique? \r \r Below is a sample image map that\x27s built entirely using CSS and XHTML. While I\x27ve added support ...', 'url': 'https://amicusamoranthus.blogspot.com/2005/10/css-image-maps-flickr-like-technique.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 112858100698143320}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2015241814-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList2', 'sidebar', document.getElementById('LinkList2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'sidebar', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', document.getElementById('Profile1'), {}, 'displayModeFull'));
</script>
</body>
</html>