Description
Responsive USA Map – HTML5
This map is built in HTML5 code and runs with javascript based on the new technique of Scalable Vector Graphics (SVG), So it can be scaled to any size without losing its quality.Features:
- It doesn’t require special plugins to work such as Flash player, So it works on different platforms including iPad and iPhone.
- Each state has its own parameters so you can change upcolor, hover color and click color of each state also you can enable/disable the state. You can also add HTML formatted data for each state i.e you can change the font color, size, style, underline….etc
- You can add clickable links such as websites or emails.
- The scroll bar appears only with long content, i.e It’s autohide with short text. So you can add information as much as you want.
- Responsive; it can fit in its available space without the need to scroll horizontally while preserving its quality.
- Compitable with all major browsers including Google Chrome, Firefox, IE9+, Safari and Opera.
- Easily integrated with WordPress using simple iFrame code.
Map Parameters:
- borderColor: inter-state borders.
- lakesColor: lakes color.
- shadowColor: shadow color below the map.
- shadowOpacity: shadow opacity, value, 0-100.
- namesColor: color of the abbreviations.
- namesShadowColor: tooltip shadow color.
- msgTitle: default title text (advanced version).
- msgData: default content text (advanced version).
Per State Parameters:
This is what you can modify for each state:- name: state name.
- data: HTML formatted data appears in the text box when a user clicks this state (advanced version).
- url: Goto URL (simple version).
- target: open link in new window:_blank, open in current window:_self (simple version).
- upcolor: state’s normal color.
- overcolor: state’s color when mouse hover.
- downcolor: state’s color when mouse clicks.
- enable: true/false to enable/disable this state.
Updates:
- 22 April 2013: Adding Washington DC
- 29 April 2013: Fixed IE bug
- 3 May 2013: Updating the documentation
Based on my old XML Interactive USA Map
Testimonials
“Responsive USA Map – HTML5 is awesome and Art101 is very helpful Thanks”
- Johnd21
“I like this responsive map alot. I had a little bit of trouble installing it and Art101 helped me through installing in a straightforward and easy to understand way. The map looks great across all devices. Thanks!”
- imaginex1
“I love it. I have already started tweaking it. I wanted the message panel to display below a larger map at larger resolutions than you had it set for and it was real easy to look at your CSS and figure it out.Also easy to edit colors and such. Nice work. Very easy to work with!”
- twintech
Category : Scripts, html5, media | Rating: