I'm building a Lightning Component using jQuery v1.7.2
and mapHilight
.
I'm showing an imaging and plotting its portions with map tag. I want to highlight these portins with mapHilight.
When I try to implement mapHiLight
I'm getting the following error:
Uncaught TypeError: Cannot read property 'style' of null throws at /resource/1506205722000/mapHilight:4:308
Any help appreciated.
I attached my code below.
HotspotImage.App
<aura:application extends="force:slds">
<aura:attribute name="Question" type="Map" access="public" default='{"Id" : "a0J3600000ARwhNEAT",
"Hotspot_Image_Properties__c" : {"area":[{"shape":"circle","$$hashKey":"object:6","coords":"112.5,107,43.60","areaValue":"face"}],"questionImageId":"00P3600000H7WZIEA3","imageWidth":240,"imageHeight":320}}'/>
<c:createHotspotImage hotspotImage="{!v.Question.Hotspot_Image_Properties__c}"/>
</aura:application>
createHotspotImage
<aura:component access="public">
<ltng:require scripts="{!join(',', $Resource.jquery, $Resource.mapHilight)}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
<aura:attribute name="imagePrefix" type="String" default="/servlet/servlet.FileDownload?file=" access="public"/>
<aura:attribute name="hotspotImage" type="Map" access="public"/>
<img aura:id="map" class="map" src="{!v.imagePrefix + v.hotspotImage.questionImageId}" usemap="{!'#'+v.hotspotImage.questionImageId}" width="{!v.hotspotImage.imageWidth}" height="{!v.hotspotImage.imageHeight}"/>
<map id="imgMap" class="tabs" name="{!v.hotspotImage.questionImageId}">
<aura:iteration items="{!v.hotspotImage.area}" var="area" indexVar="index">
<area aura:id="area" shape="{!area.shape}" coords="{!area.coords}" title="{!area.areaValue}" data-index="{!index}"/>
</aura:iteration>
</map>
</aura:component>
createHotspotImageController.js
({
scriptsLoaded : function(cmp, event, helper){
$(function() {
$('.map').maphilight({fade: false});
});
}
})