pourquoi la bibliothèque maphilight ne fonctionne pas avec les images maps et handlebar.js

Question

Voici mon violon. https://jsfiddle.net/vsjtfhkk/

$(function() { 
    $('img[usemap]').maphilight() 
}); 

// Define our data object 
var context = { 
    "url": "http://1jpg-site.orionhub.org:8000/1.jpg", 
    "class": "img-responsive center-block map", 
    "map": [{ 
    "shape": "rect", 
    "coords": "2,1,106,116", 
    "function": "article1()" 
    }, { 
    "shape": "rect", 
    "coords": "111,2,464,114" 
    }, { 
    "shape": "rect", 
    "coords": "476,9,586,116" 
    }, { 
    "shape": "rect", 
    "coords": "4,118,588,136" 
    }, { 
    "shape": "poly", 
    "coords": "3,143,588,143,585,442,354,447,347,338,0,336" 
    }, { 
    "shape": "rect", 
    "coords": "2,340,351,503" 
    }, { 
    "shape": "rect", 
    "coords": "3,508,352,735" 
    }, { 
    "shape": "rect", 
    "coords": "354,450,588,733" 
    }] 
}; 
var context1 = { 
    "url": "paper\\pages\\17062016\\2.jpg", 
    "class": "img-responsive center-block map", 
    "map": [{ 
    "shape": "rect", 
    "coords": "2,1,106,116" 
    }, { 
    "shape": "rect", 
    "coords": "111,2,464,114" 
    }, { 
    "shape": "rect", 
    "coords": "476,9,586,116" 
    }, { 
    "shape": "rect", 
    "coords": "4,118,588,136" 
    }, { 
    "shape": "poly", 
    "coords": "3,143,588,143,585,442,354,447,347,338,0,336" 
    }, { 
    "shape": "rect", 
    "coords": "2,340,351,503" 
    }, { 
    "shape": "rect", 
    "coords": "3,508,352,735" 
    }, { 
    "shape": "rect", 
    "coords": "354,450,588,733" 
    }] 
}; 

function page1() { 
    var source = $("#image-template").html(); 
    var template = Handlebars.compile(source); 
    // Pass our data to the template 
    var theCompiledHtml = template(context); 

    // Add the compiled html to the page 
    $('.content-placeholder').html(theCompiledHtml); 
} 

function page2() { 
    var source = $("#image-template").html(); 
    var template = Handlebars.compile(source); 
    // Pass our data to the template 
    var theCompiledHtml = template(context1); 

    // Add the compiled html to the page 
    $('.content-placeholder').html(theCompiledHtml); 
} 

function article1() { 
    alert("yes i am passed"); 
} 

Je suis en train de faire un site eNewspaper avec des images et des cartes d'image.

Lorsque j'utilise la bibliothèque maphilight pour mettre en surbrillance des mappages d'image avec handlebar.js, cela ne fonctionne pas.

Je suis en train d'utiliser:

$('.map').maphilight(); 

S'il vous plaît me donner une solution.

Answer 1

comme personne n'a répondu à ma question, et je l'ai résolu moi-même. juste une erreur stupide que j'ai fait que je dois utiliser

.maphilight(); 

fonction à l'intérieur de la portée de la fonction. c'est la bonne façon de l'utiliser

function page1() { 
    var source = $("#image-template").html(); 
    var template = Handlebars.compile(source); 
    // Pass our data to the template 
    var theCompiledHtml = template(context); 

    // Add the compiled html to the page 
    $('.content-placeholder').html(theCompiledHtml); 
    $('.map').maphilight(); 
    $('#prev').addClass("disabled"); 
    $('#prev').removeClass("active"); 
    $('#2').removeClass("active"); 
    $('#3').removeClass("active"); 
    $('#next').removeClass("active"); 
    $('#1').addClass("active"); 


} 

pas.

$(function() { 
    $('img[usemap]').maphilight() 
}); 

merci @jwpfox pour éditer la question.