Saturday 16 August 2014

Responsive Design Image Map Multi Screen Size

Thanks for the REF :

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

https://github.com/stowball/jQuery-rwdImageMaps

<!DOCTYPE html>
<!-- saved from url=(0072)http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Responsive Image Maps jQuery Plugin</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">

<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
<script src="./Responsive Image Maps jQuery Plugin_files/ios-orientationchange-fix.min.js"></script>
<script src="./Responsive Image Maps jQuery Plugin_files/jquery.min.js"></script>
<script src="./Responsive Image Maps jQuery Plugin_files/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();

$('area').on('click', function() {
alert($(this).attr('alt') + ' clicked');
});
});
</script>



<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 20px;
}
div {
width: 100%;
}
img[usemap] {    // No need if we use some other page.
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
</head>
<body>
<div>
<h1>Responsive Image Maps jQuery Plugin</h1>
<p>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.</p>
<p><a href="https://github.com/stowball/jQuery-rwdImageMaps">Download the plugin from github</a></p>
<p>This image map was created in minutes with Adobe Fireworks.</p>
<img src="./Responsive Image Maps jQuery Plugin_files/powerpuff-girls.fw.jpg" width="1024" height="768" usemap="#powerpuffgirls" alt="">
<map name="powerpuffgirls">
<area shape="poly" coords="122,36,281,36,285,37,287,39,289,42,289,46,289,48,278,77,276,81,274,84,271,84,218,84,218,90,210,90,208,95,207,99,204,100,72,100,26,87,23,84,20,81,19,75,35,40,37,37,43,34,62,34,65,30,68,25,72,25,115,25,119,27,121,30,122,36,122,36" href="http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls">
<area shape="poly" coords="864,667,912,649,922,667,971,667,973,718,981,721,985,729,988,730,1010,730,1010,742,833,742,833,730,865,730,865,721,874,721,874,718,864,667,864,667" href="http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#cn" title="Cartoon Network" alt="Cartoon Network">
<area shape="poly" coords="1010,297,995,281,979,267,962,255,944,248,927,242,909,237,876,236,857,237,838,240,817,246,797,255,,519,945,522,954,523,966,520,979,516,985,511,989,507,993,499,994,493,991,484,986,475,967,463,982,454,998,439,1013,424,1024,409,1024,329,1017,312,1010,297,1010,297" href="http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#buttercup" title="Buttercup" alt="Buttercup">
<area shape="poly" coords="51,706,221,694,215,683,213,677,213,670,215,664,219,656,231,645,215,652,206,657,198,660,190,662,181,660,169,655,157,648,150,638,142,617,130,596,120,582,112,571,100,571,100" href="http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#blossom" title="Blossom" alt="Blossom">
<area shape="poly" href="http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#bubbles" title="Bubbles" alt="Bubbles">
</map>
</div>

</body>
</html>


at

2 comments:

  1. Unknown18 November 2014 at 11:55

    The blog was really very useful and looks great to see.Thanks for sharing the information with us.
    Web Design Company in Coimbatore | Best IT Company in Coimbatore

    ReplyDelete
  2. Ancy merina28 February 2018 at 11:24

    This comment has been removed by the author.

    ReplyDelete

Subscribe to: Post Comments (Atom)