Research and create image map for filter widget about enviroatlas HOT 6 CLOSED

Ok, found it - the concept of grouping icons into a single image for download and then pulling them out on the page is called using css "sprites" and is discussed well in this article:
http://www.webdesigndev.com/display-icons-using-a-single-image-and-css-sprites/

So the first step would be stitching together the icons into a single PNG, and then creating a css scheme giving each icon a name and background position. Then the code just assigns css classes based on the config file. It's possible we might need 3 versions of each icon: regular, greyed out, and a slightly different color than regular for creating a hover effect. Sound like fun?

from enviroatlas.

Here's my first attempt - please let me know if there's enough distinction in colors. If it looks good I can define the coordinates of each little section accordingly for css. I didn't make a shade variation for BWs... thought we could use the darker color image for hover.

from enviroatlas.

Awesome, looks great to me!

On Tue, Dec 8, 2015 at 11:53 AM, brosenbaum [email protected]
wrote:

[image: all_bc]
https://cloud.githubusercontent.com/assets/6422486/11666470/840e00ce-9da1-11e5-8508-04f1c6a36172.png

Here's my first attempt - please let me know if there's enough distinction
in colors. If it looks good I can define the coordinates of each little
section accordingly for css. I didn't make a shade variation for BWs...
thought we could use the darker color image for hover.

—
Reply to this email directly or view it on GitHub
#61 (comment)
.

Torrin Hultgren
Senior Manager, Geospatial Solutions
Innovate!, Inc.
O: (703) 922-9090 x737

http://www.innovateteam.com

Innovate!, Inc. is a Virginia-based 8(a), Hispanic- and woman-owned
business delivering Geospatial, Information Technology, Security,
Business Consulting, Project Management and Executive Coaching
solutions to our government and private sector clients. Check us out
at www.innovateteam.com.

from enviroatlas.

Added People and Built Spaces (PBS) and Supplemental icons.

from enviroatlas.

here's the css style file assoicated with the image in a zipped folder to
add to the appropriate locations - Baohong - I'll let you place it where
you need. (add to an existing css?)

On Tue, Dec 8, 2015 at 12:29 PM, Torrin Hultgren [email protected]
wrote:

Awesome, looks great to me!

On Tue, Dec 8, 2015 at 11:53 AM, brosenbaum [email protected]
wrote:

[image: all_bc]
<
https://cloud.githubusercontent.com/assets/6422486/11666470/840e00ce-9da1-11e5-8508-04f1c6a36172.png

Here's my first attempt - please let me know if there's enough
distinction
in colors. If it looks good I can define the coordinates of each little
section accordingly for css. I didn't make a shade variation for BWs...
thought we could use the darker color image for hover.

—
Reply to this email directly or view it on GitHub
<
#61 (comment)

.

Torrin Hultgren
Senior Manager, Geospatial Solutions
Innovate!, Inc.
O: (703) 922-9090 x737

http://www.innovateteam.com

Innovate!, Inc. is a Virginia-based 8(a), Hispanic- and woman-owned
business delivering Geospatial, Information Technology, Security,
Business Consulting, Project Management and Executive Coaching
solutions to our government and private sector clients. Check us out
at www.innovateteam.com.

—
Reply to this email directly or view it on GitHub
#61 (comment)
.

Barbara Rosenbaum
Innovate!, Inc.
Office: (541) 929-6622
Message: (703) 922.9090 x 739
[email protected]

Innovate!, Inc. is a Virginia-based 8(a), Hispanic- and woman-owned
business delivering Geospatial, Information Technology, Security, Business
Consulting, Project Management and Executive Coaching solutions to our
government and private sector clients. Check us out at www.innovateteam.com.

from enviroatlas.

zip file would not load. Baohong has code and png for implementing into widgets.

from enviroatlas.