| 1 |
//$id$
|
| 2 |
jQuery Map Hilight Module
|
| 3 |
|
| 4 |
|
| 5 |
-------------------------
|
| 6 |
Description
|
| 7 |
-------------------------
|
| 8 |
jQuery Map Hilight is a javascript wrapper module for the jquery Map Hilight plugin. It enables the simple addition of mouseover highlighting of hotspots to HTML image maps without requiring the editing of theme files or knowledge of javascript/jquery. Simply add class="jq_maphilight" to the image tag of any image map you wish to hilight.
|
| 9 |
|
| 10 |
|
| 11 |
-------------------------
|
| 12 |
Installation Instructions
|
| 13 |
-------------------------
|
| 14 |
|
| 15 |
PREREQUISITES:
|
| 16 |
|
| 17 |
1. This module requires the jquery_plugin module (with the included metadata plugin) for D6. Be sure to download and install it first.
|
| 18 |
|
| 19 |
2. This module requires the jQuery Map Hilight plugin (v1.1.2 minimum) from http://plugins.jquery.com/project/maphilight.
|
| 20 |
|
| 21 |
|
| 22 |
INSTALLATION:
|
| 23 |
|
| 24 |
1. Download and install the jquery_plugin module from http://drupal.org/project/jquery_plugin.
|
| 25 |
|
| 26 |
2. Download the jquery Map Hilight plugin from http://plugins.jquery.com/project/maphilight.
|
| 27 |
|
| 28 |
3. Extract the jquery.maphilight.min.js file into the jquery_plugin directory.
|
| 29 |
|
| 30 |
4. Navigate to admin/settings/jq_maphilight. If the plugin is properly installed you should see a message indicating the path where it has been found in the "jQuery Map Hilight Plugin Status" fieldset.
|
| 31 |
|
| 32 |
5. If desired, follow the instructions for the Test Page below to test the functionality of the module and plugin.
|
| 33 |
|
| 34 |
|
| 35 |
-------------------------
|
| 36 |
USAGE
|
| 37 |
-------------------------
|
| 38 |
|
| 39 |
1. Set sitewide options as desired in the jQuery Map Hilight Plugin Settings (admin/settings/jq_maphilight).
|
| 40 |
|
| 41 |
2. Add class="jq_maphilight" to the IMG tag of any image map you wish to be hilighted.
|
| 42 |
|
| 43 |
3. Override any of the sitewide options specified on the admin page by including an additional class on the image tag (along with the jq_maphilight class) with the following format: {option:value,option:value}
|
| 44 |
|
| 45 |
Available Options:
|
| 46 |
fill (Boolean, true/false) - Whether to fill the shape
|
| 47 |
fillColor (String, HTML color notation without the # & with single quotes) - The color to fill the shape with
|
| 48 |
fillOpacity (Number, 0 - 1) - The opacity of the fill (0 = fully transparent, 1 = fully opaque)
|
| 49 |
stroke (Boolean, true/false) - Whether to outline the shape
|
| 50 |
strokeColor (String, HTML color notation without the # & with single quotes) - The color of the outline
|
| 51 |
strokeOpacity (Number, 0 - 1) - The opacity of the outline (0 = fully transparent, 1 = fully opaque)
|
| 52 |
strokeWidth (Number) - The thickness of the outline
|
| 53 |
fade (Boolean, true/false) - Whether to fade in the shapes on mouseover
|
| 54 |
|
| 55 |
Example: {fill:false,strokeColor:'FFFFFF'}
|
| 56 |
|
| 57 |
|
| 58 |
-------------------------
|
| 59 |
SUPPORT
|
| 60 |
-------------------------
|
| 61 |
|
| 62 |
For support, please submit requests via the project issues queue at: http://drupal.org/project/issues/jq_maphilight
|
| 63 |
|
| 64 |
|
| 65 |
-------------------------
|
| 66 |
Test Page
|
| 67 |
-------------------------
|
| 68 |
|
| 69 |
Copy the sample.png image from the jq_maphilight module directory to wherever you keep your images. Then copy the following code into the body of a page (be sure to update the image href location & set the Input Format to Full HTML or add the MAP and AREA tags to the allowed tags for filtered html). Hover the mouse over the boxes to see the highlighting in action.
|
| 70 |
<-------------------------------------BEGIN---COPY---BELOW--------------------------------------------------->
|
| 71 |
<p><strong>This is a sample image map with jquery based javascript hilighting:</strong></p>
|
| 72 |
<p> </p>
|
| 73 |
<img class="jq_maphilight {strokeColor:'000000'}" src="/sites/default/files/images/sample.png" usemap="#imagemap" border="0" />
|
| 74 |
<map name="imagemap">
|
| 75 |
<area href="/" shape="RECT" coords="168,71,312,143" title="Box #1" />
|
| 76 |
<area href="/" shape="RECT" coords="72,167,168,216" title="Box #2" />
|
| 77 |
<area href="/" shape="RECT" coords="193,167,289,216" title="Box #3" />
|
| 78 |
<area href="/" shape="RECT" coords="313,169,409,217" title="Box #4" />
|
| 79 |
<area href="/" shape="RECT" coords="73,240,169,290" title="Box #5" />
|
| 80 |
<area href="/" shape="RECT" coords="193,240,288,288" title="Box #6" />
|
| 81 |
<area href="/" shape="RECT" coords="313,240,409,289" title="Box #7" />
|
| 82 |
</map>
|
Parent Directory
| 
Revision Log
| 
Revision Graph