Skip to content
Free Image Mapping Tool
JavaScript PHP CSS
Branch: master
Clone or download
Latest commit 5d07aec Jan 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Quick Image Mapping Tool Free Uploaded Dec 11, 2016
images Add files via upload Dec 11, 2016
js Quick Image Mapping Tool Free Uploaded Dec 11, 2016
quickmap Quick Image Mapping Tool Free Uploaded Dec 11, 2016
README.md
config.php Quick Image Mapping Tool Free Uploaded Dec 11, 2016
favicon.ico Quick Image Mapping Tool Free Uploaded Dec 11, 2016
import.php Quick Image Mapping Tool Free Uploaded Dec 11, 2016
index.php
log_url.txt Quick Image Mapping Tool Free Uploaded Dec 11, 2016
upload.php Quick Image Mapping Tool Free Uploaded Dec 11, 2016
upload_ident.php Quick Image Mapping Tool Free Uploaded Dec 11, 2016

README.md

ImageMap Free Image Mapping Tool With CSS


Quick ImageMap is an advance image mapping tool for web developer,
it will helps in easy image mapping with coordinates also create custom CSS.
Upload your image and click on clickable areas, Image mapping tool will perform ton of your task for FREE !!

##Ever you read e-paper ?
When you read e-paper you can see the actual effect of image mapping, a single image with many links with coordinates mapping!!

or
##or Tried these things in your development ?


##You did lot's of CSS or Codes for same ?
Now it's over, you can do ton of task quick and free !
Just upload and Image, Start Mapping with CSS and copy Generated code, watch below video for more info:

Advanced Image Map Tool
--File uploaded on server saved for next 16 hrs.
#How it Works ?
By using this script user can select image path along with coordinates. Script generate perfect coordinates HTML and required codes for you. You can also add custom css for styling your marked area.

Uses:

Copy generated code and use in following way (without CSS)

<img src="Your_Image_URL" alt="QuickMap" class="QuickMap" usemap="#QuickMap" />
<map name="QuickMap" id="QuickMap">
    <area alt="" title="" href="#" shape="poly" coords="121,252,129,224,121,189,136,156,172,143,217,156,255,145,301,169,340,210,316,234,327,268,332,304,328,318,326,364,326,382,332,387,332,402,337,415,339,443,338,477,340,494,345,508,342,510,342,524,341,538,329,542,313,542,297,528,300,505,294,513,282,518,271,523,266,530,275,535,276,543,280,547,157,550,164,520,155,515,139,508,132,505,131,511,139,521,136,531,126,540,110,538,103,536,99,522,97,501,104,483,102,408,105,401,109,373,111,303,106,283" />
    <area alt="" title="" href="#" shape="poly" coords="406,174,417,133,445,103,464,88,497,75,538,77,580,92,605,110,617,139,620,149,622,168,627,180,633,190,633,198,625,215,628,245,627,284,628,319,625,350,626,387,627,399,637,406,638,415,640,422,641,434,640,440,638,448,637,474,635,494,645,500,642,514,636,535,607,542,589,520,577,521,582,534,592,547,459,547,439,516,441,535,411,540,391,518,404,391,411,366,411,218" />
    <area../>
</map>

#With CSS (You should use ajax) Ex-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<img src="Your_Image_URL.jpg" alt="QuickMap" class="QuickMap" usemap="#QuickMap" />
<map name="QuickMap" id="QuickMap">
    <area alt="" title="" href="#" shape="poly" coords="121,252,129,224,121,189,136,156,172,143,217,156,255,145,301,169,340,210,316,234,327,268,332,304,328,318,326,364,326,382,332,387,332,402,337,415,339,443,338,477,340,494,345,508,342,510,342,524,341,538,329,542,313,542,297,528,300,505,294,513,282,518,271,523,266,530,275,535,276,543,280,547,157,550,164,520,155,515,139,508,132,505,131,511,139,521,136,531,126,540,110,538,103,536,99,522,97,501,104,483,102,408,105,401,109,373,111,303,106,283" />
    <area alt="" title="" href="#" shape="poly" coords="406,174,417,133,445,103,464,88,497,75,538,77,580,92,605,110,617,139,620,149,622,168,627,180,633,190,633,198,625,215,628,245,627,284,628,319,625,350,626,387,627,399,637,406,638,415,640,422,641,434,640,440,638,448,637,474,635,494,645,500,642,514,636,535,607,542,589,520,577,521,582,534,592,547,459,547,439,516,441,535,411,540,391,518,404,391,411,366,411,218" />
    <area/>
</map>
<script type="text/javascript">
    function QuickImageMap(){
        $.fn.QuickMap.defaults = {
        fill: true,
        // fillColor: '000000',
        fillOpacity: 0,
        stroke: true,
        strokeColor: 'F05F40',
        strokeOpacity: 1,
        strokeWidth: 6,
        fade: true,
        alwaysOn: false,
        neverOn: false,
        groupBy: false,
        wrapClass: true,
        // plenty of shadow:
        shadow: false,
        shadowX: 0,
        shadowY: 0,
        shadowRadius: 6,
        // shadowColor: '000000',
        shadowOpacity: 0.8,
        shadowPosition: 'outside',
        shadowFrom: false
        }
    };
    $(function() {
        $('.QuickMap').QuickMap({
            fillColor: 'ffffff'
        });
    });
</script>
<script type="text/javascript" src="https://www.tricksway.com/imagemap/quickmap/QuickMap.js"></script> 

Above selected script and JS convert selected area into Canvas for effects (you can also add other canvas properties after few modifications)
##Contributions:
Plugin Used: Uploadify, Maphighlight
Technology Used: HTML, CSS, JQuery & PHP
Frameworks Used: Bootstrap, AngularJs, Jquery UI
Cloud Sever & SSL: Managed by CloudFlare
Developed By: Himanshu Dhiraj Mishra
(GitHub shared source code missing templete files due to licence limitations, you may need to customize CSS manumally)
You can’t perform that action at this time.