Author: mgallegos Date: 2012-11-04 23:11:44 +0100 (Sun, 04 Nov 2012) New Revision: 574 Modified: trunk/src/mc-dia-form2.js trunk/wp-theme/mc2-form.php Log: Modified: trunk/src/mc-dia-form2.js =================================================================== --- trunk/src/mc-dia-form2.js 2012-11-04 18:59:14 UTC (rev 573) +++ trunk/src/mc-dia-form2.js 2012-11-04 22:11:44 UTC (rev 574) @@ -65,7 +65,7 @@ if(!step_two_reached){ $j('#step1_image_map').append('<area href="#" step="#second_step" shape="circle" coords="122,12,12"><!--2-->'); - $j('img[id*="imgStep"]').mapster('unbind'); + imageMapUnBind(); imageMapInit(); step_two_reached=true; } @@ -143,7 +143,7 @@ if(!step_three_reached){ $j('#step1_image_map').append('<area href="#" step="#third_step" shape="circle" coords="214,12,12"><!--3-->'); $j('#step2_image_map').append('<area href="#" step="#third_step" shape="circle" coords="214,12,12"><!--3-->'); - $j('img[id*="imgStep"]').mapster('unbind'); + imageMapUnBind(); imageMapInit(); step_three_reached=true; } @@ -227,7 +227,7 @@ $j('#step1_image_map').append('<area href="#" step="#fourth_step" shape="circle" coords="306,12,12"><!--4-->'); $j('#step2_image_map').append('<area href="#" step="#fourth_step" shape="circle" coords="306,12,12"><!--4-->'); $j('#step3_image_map').append('<area href="#" step="#fourth_step" shape="circle" coords="306,12,12"><!--4-->'); - $j('img[id*="imgStep"]').mapster('unbind'); + imageMapUnBind(); imageMapInit(); step_four_reached=true; } @@ -284,7 +284,7 @@ $j('#step2_image_map').append('<area href="#" step="#fifth_step" shape="circle" coords="398,12,12"><!--5-->'); $j('#step3_image_map').append('<area href="#" step="#fifth_step" shape="circle" coords="398,12,12"><!--5-->'); $j('#step4_image_map').append('<area href="#" step="#fifth_step" shape="circle" coords="398,12,12"><!--5-->'); - $j('img[id*="imgStep"]').mapster('unbind'); + imageMapUnBind(); imageMapInit(); step_five_reached=true; } @@ -337,7 +337,7 @@ $j('#step3_image_map').append('<area href="#" step="#sixth_step" shape="circle" coords="490,12,12"><!--6-->'); $j('#step4_image_map').append('<area href="#" step="#sixth_step" shape="circle" coords="490,12,12"><!--6-->'); $j('#step5_image_map').append('<area href="#" step="#sixth_step" shape="circle" coords="490,12,12"><!--6-->'); - $j('img[id*="imgStep"]').mapster('unbind'); + imageMapUnBind(); imageMapInit(); step_six_reached=true; } @@ -507,7 +507,7 @@ } function imageMapInit(){ - $j('img[id*="imgStep"]').mapster({ + $j('.map').mapster({ fillColor: 'EA8F5F', fillOpacity: 0.8, isSelectable: false, @@ -517,6 +517,16 @@ } }); } + + function imageMapUnBind(){ + $j('.map').mapster('unbind'); + $j('#firstStepProgressLine').html('<img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step1_image_map" class="map" style="border: 0px;float: left;"><div class="complete" style="width: 19px;margin-top: 0"><div class="marker"></div>'); + $j('#secondStepProgressLine').html('<img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step2_image_map" class="map" style="border: 0px;float: left;"><div class="complete" style="width: 111px;margin-top: 0"><div class="marker"></div>'); + $j('#thirdStepProgressLine').html('<img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step3_image_map" class="map" style="border: 0px;float: left;"><div class="complete" style="width: 203px;margin-top: 0"><div class="marker"></div>'); + $j('#fourthStepProgressLine').html('<img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step4_image_map" class="map" style="border: 0px;float: left;"><div class="complete" style="width: 295px;margin-top: 0"><div class="marker"></div>'); + $j('#fifthStepProgressLine').html('<img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step5_image_map" class="map" style="border: 0px;float: left;"><div class="complete" style="width: 386px;margin-top: 0"><div class="marker"></div>'); + $j('#sixthStepProgressLine').html('<img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step5_image_map" class="map" style="border: 0px;float: left;"><div class="complete" style="width: 478px;margin-top: 0"><div class="marker"></div>'); + } function onClickImageMap(e){ if (e.key=='#first_step'){ Modified: trunk/wp-theme/mc2-form.php =================================================================== --- trunk/wp-theme/mc2-form.php 2012-11-04 18:59:14 UTC (rev 573) +++ trunk/wp-theme/mc2-form.php 2012-11-04 22:11:44 UTC (rev 574) @@ -33,8 +33,8 @@ <div id="containerSlides"> <div id="first_step" class="mc-form-category-group-a-v2"> <!-- First slide --> - <div class="progressLine"> - <img id="imgStep1" src="/mc/0.1/images/progressTransparentLine.png" usemap="#step1_image_map" class="map" style="border: 0px;float: left;"> + <div id="firstStepProgressLine" class="progressLine"> + <img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step1_image_map" class="map" style="border: 0px;float: left;"> <div class="complete" style="width: 19px;margin-top: 0"> <div class="marker"></div> </div> @@ -65,8 +65,8 @@ <!-- <label id="mc-optional-optional-boxes"><?php _e("Click on those you think corespond to your initiative:", "mc"); ?></label> --> <div class="mc-cat-group-v2" id="mc-cat-group-a"> <div style="float: left;" class="mc-form-category-group-a-v2"> - <div class="progressLine"> - <img id="imgStep2" src="/mc/0.1/images/progressTransparentLine.png" usemap="#step2_image_map" class="map" style="border: 0px;float: left;"> + <div id="secondStepProgressLine" class="progressLine"> + <img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step2_image_map" class="map" style="border: 0px;float: left;"> <div class="complete" style="width: 111px;"> <div class="marker" style="background-position: -26px 0;"></div> </div> @@ -139,8 +139,8 @@ <div id="third_step"><!-- Third slide --> <div class="mc-cat-group-v2" id="mc-cat-group-b"> <div style="float: left;" class="mc-form-category-group-a-v2"> - <div class="progressLine"> - <img id="imgStep3" src="/mc/0.1/images/progressTransparentLine.png" usemap="#step3_image_map" class="map" style="border: 0px;float: left;"> + <div id="thirdStepProgressLine" class="progressLine"> + <img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step3_image_map" class="map" style="border: 0px;float: left;"> <div class="complete" style="width: 203px;"> <div class="marker" style="background-position: -52px 0;"></div> </div> @@ -234,8 +234,8 @@ <div id="fourth_step"><!-- Fourth slide --> <div class="mc-cat-group-v2" id="mc-cat-group-c"> <div style="float: left;" class="mc-form-category-group-a-v2"> - <div class="progressLine"> - <img id="imgStep4" src="/mc/0.1/images/progressTransparentLine.png" usemap="#step4_image_map" class="map" style="border: 0px;float: left;"> + <div id="fourthStepProgressLine" class="progressLine"> + <img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step4_image_map" class="map" style="border: 0px;float: left;"> <div class="complete" style="width: 295px;"> <div class="marker" style="background-position: -78px 0;"></div> </div> @@ -300,8 +300,8 @@ <div id="fifth_step"><!-- Fifth slide --> <div class="mc-cat-group-v2" id="mc-cat-group-d"> <div style="float: left;" class="mc-form-category-group-a-v2"> - <div class="progressLine"> - <img id="imgStep5" src="/mc/0.1/images/progressTransparentLine.png" usemap="#step5_image_map" class="map" style="border: 0px;float: left;"> + <div id="fifthStepProgressLine" class="progressLine"> + <img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step5_image_map" class="map" style="border: 0px;float: left;"> <div class="complete" style="width: 386px;"> <div class="marker" style="background-position: -104px 0;"></div> </div> @@ -371,8 +371,8 @@ </div><!-- End Fifth slide --> <div id="sixth_step"><!--Sixth slide --> <div style="float: left;" class="mc-form-category-group-a-v2"> - <div class="progressLine"> - <img id="imgStep6" src="/mc/0.1/images/progressTransparentLine.png" usemap="#step6_image_map" class="map" style="border: 0px;float: left;"> + <div id="sixthStepProgressLine" class="progressLine"> + <img src="/mc/0.1/images/progressTransparentLine.png" usemap="#step6_image_map" class="map" style="border: 0px;float: left;"> <div class="complete" style="width: 478px;"> <div class="marker" style="background-position: -130px 0;"></div> </div>