• Stars
    star
    1,556
  • Rank 30,075 (Top 0.6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 12 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Responsive Image Maps jQuery Plugin

jQuery RWD Image Maps

CDNJS

Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize


Usage:

  • If possible, add correct, unitless width and height attributes to your image map images. You can override these in CSS to make them responsive.
  • Add a link to jQuery in your page, preferably at the bottom just before the closing </body>
  • After jQuery, either in a <script> block or a separate file, call:
$('img[usemap]').rwdImageMaps();

You may also want to wrap it inside a $(document).ready() function, like so:

$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

Demo:

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html


Copyright (c) 2016 Matt Stow
Licensed under the MIT license (see LICENSE for details)
Minified version created with Online YUI Compressor: http://www.refresh-sf.com/yui/

More Repositories

1

eqio

A simple, tiny alternative to element/container queries
JavaScript
429
star
2

dummys-guide-to-redux-and-thunk-react

Tutorial post
JavaScript
321
star
3

react-native-svg-icon

A simple, but flexible SVG icon component for React Native
JavaScript
177
star
4

rwd.images.js

Yet another lightweight, customisable responsive image solution
JavaScript
115
star
5

RWD-Retrofit

Allows an existing desktop site to co-exist with a responsive site, while also able to serve the desktop site to a different breakpoint on "mobile"
JavaScript
104
star
6

Suzi

A mature, feature-rich, responsive Sass and Grunt UI framework
CSS
102
star
7

Layout-Engine

Adds the rendering engine name as a class on the html tag and returns a JavaScript object containing the vendor, version and browser name (where appropriate)
JavaScript
96
star
8

mqGenie

Adjusts CSS media queries in browsers that include the scrollbar width in the viewport width so they fire at the intended size
JavaScript
89
star
9

hucssley

Hucssley - a full-featured, consistent, atomic utility class library for rapidly building performant UI
SCSS
78
star
10

quench-vue

Simple, client-side hydration of pre-rendered Vue.js apps
JavaScript
75
star
11

elf

Elf is a simple & magical Eleventy starter kit to help you create a project using standard technologies like webpack, Babel and Sass, while also considering ease of use, performance and browser compatibility.
JavaScript
51
star
12

jQuery-rwdImages

Allows responsive content images using the redux spacer technique (http://mattstow.com/experiment/responsive-images-redux/responsive-images-redux-jquery-plugin.html) to be shared and saved
JavaScript
43
star
13

Viewport-Genie

Adds the real viewport width and height (in px and em) as an element on the body to help with obtaining values for responsive breakpoints
JavaScript
37
star
14

Class-Query

A simple method to help manage responsive content (and an alternative to element queries as an added bonus)
JavaScript
31
star
15

keyboard-focus

A rudimentary way to detect users that navigate with the Tab key
JavaScript
25
star
16

react-accessible-tabs

An accessible React tabs component
JavaScript
24
star
17

Adobe-Blank

Reduced/subset version to "English"-only characters
CSS
12
star
18

webpack-svg-icon-system

A loader and plugin for webpack that converts all your SVGs into symbols and merges them into a SVG sprite.
JavaScript
10
star
19

ikuno

A simple, Grunt image and SVG optimiser
JavaScript
10
star
20

react-native-bem

A tiny, fast, BEM-inspired method to styling React Native components
JavaScript
9
star
21

swinch.js

A lightweight, customisable, horizontal touch detection script
JavaScript
4
star
22

hucssley-hireup-demo

JavaScript
1
star
23

Suzi-Code-Hints

Adds code hint support for all of Suzi's mixins and functions: https://github.com/izilla/Suzi#mixins-and-functions
1
star
24

littlelink-blossoming

CSS
1
star
25

hireup-assets

1
star
26

github-pr-approvals

A Greasemonkey script to require approvals in GitHub PRs before merging is allowed
JavaScript
1
star
27

brackets-legibility

Increase the legibility of Brackets' UI. Useful for High DPI screens
CSS
1
star
28

hucssley-hireup-demo-vue

Vue
1
star
29

Not-Required

Removes all required field attributes to test form submissions
JavaScript
1
star
30

color-flashcards

A simple web app (in under 10kb gzipped) to help teach your children colors with both visual and audio cues.
JavaScript
1
star
31

simple-social-media

A simple, mock-social media, client-side Angular application
JavaScript
1
star
32

suzi.grid.js

A JavaScript implementation of Suzi's grid system for rapid development
JavaScript
1
star