Pure Css image map with pop-up information boxes – Quick Guide
Pure Css image map with pop-up information boxes – Quick Guide
|
|
Using an unordered list, a couple of images, and a little CSS, we can create an accessible “image map” with pop-up tool tips that provide our readers more …
Similar Posts
Pure Css image map with pop-up information boxes – Quick Guide
Using an unordered list, a couple of images, and a little CSS, we can create an accessible “image map” with pop-up tool tips that provide our readers more …CSS Stylesheets Image Effects Tutorials
CSS Images Menu using transparency for your website … CSS tutorial it wil be explained how to create an awesome CSS … CSS Image Maps With Pop-Up Tool Tips …CSS Stylesheets Image Effects Tutorials
CSS Images Menu using transparency for your website … CSS tutorial it wil be explained how to create an awesome CSS … CSS Image Maps With Pop-Up Tool Tips …DHTML Site – 20 Free CSS Image Galleries + Slideshows
CSS. Page Effects. Tool Tips. Drag and Drop. Calendars. Window Effects. Image Galleries and Effects … create a JS/CSS/DHTML powered image gallery for you …DHTML Site – 20 Free CSS Image Galleries + Slideshows
CSS. Page Effects. Tool Tips. Drag and Drop. Calendars. Window Effects. Image Galleries and Effects … create a JS/CSS/DHTML powered image gallery for you …CSS Workshop: Horizontal Menu
Horizontal Menus Mission. I believe that the only appropriate HTML markup for a menu is a list, namely unordered list marked by the- tag. Styling such a list vertically is …
SlickMap CSS Lets You Create Beautiful Visual Site Maps Easily
Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.
Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.
SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”
The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.
What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.
It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.
In the README file:
SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.
The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.
It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!
Do You Want To Do That With CSS? – Multiple Column Lists
… Your Own Custom CMX CSS Course. Design Your Own Custom … CSS, list, lists, OL, UL, ordered list, unordered list, multiple column list, mulit-column list, …jQuery.popeye Inline Lightbox Alternative
jQuery.popeye transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state.
The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage).
This behaviour can be overriden in the plugin options.
Also available is a demo page which best shows the behavior of jQuery.popeye.
The nice thing about jQuery.popeye is that it degrades gracefully into a scrollable list of thumbnails which link to an enlarged version.
For more details, head over to the jQuery.popeye homepage. You can also go directly to the download page.
Firescope Firefox Add-on for Firebug
Fans of the swiss army knife of web development Firebug will be happy to hear that this wonderful Firefox add-on has added another blade to its arsenal. With the help of the Firescope add-on, it can now provide CSS and HTML reference in a snap. Just right-click on any tag and click on the context menu to perform a lookup. The tool appears to have been developed by the web gurus over at SitePoint, so tool has links to further information on the SitePoint Reference web site.
The tool is also searchable. You can:
… search for HTML elements, HTML attributes, or CSS properties (or any combination). The search happens live as you type, so usually you’ll only have to type one or two letters to get the results you want.
Check out the screenshots:
