var listImageCaption = [{
"url": "http://1.bp.blogspot.com/-fWHzS3523cg/VwVQ5pzqoaI/AAAAAAAAIUg/SpKCE3F9HVY/s0/002.png",
"speechs": [{
"coords": "169,293,551,285,538,328,169,327",
"text": "Chú khủng long của nobita"
}]
}, {
"url": "http://1.bp.blogspot.com/-VLLrWvfE6VA/VwVQtyGC-kI/AAAAAAAAIUc/IklBVuus6Ao/s0/003.png",
"speechs": [{
"coords": "448,76,487,57,537,68,544,85,535,106,552,125,537,156,546,172,543,194,500,206,449,192,437,163,446,141,436,127,446,99",
"text": "Một trăm triệu năm trước, ở thời kỳ phấn trắng ..."
}, {
"coords": "38,281,69,266,115,258,184,285,192,325,179,336,195,368,179,393,163,428,131,447,88,443,39,436,26,417,31,393,15,360,17,341,37,325,29,296,33,289,34,285",
"text": "Trái đất là lãnh thổ của loài bò sát, và trõng những sinh vật đó, tyrannosaurus xứng đáng trở thành vua"
}, {
"coords": "127,486,139,505,124,579,107,590,76,591,65,579,53,529,72,480,100,473",
"text": "Thật vậy à ?"
}, {
"coords": "267,481,303,467,337,484,346,540,331,580,277,581,252,558,250,520",
"text": "Cái gì ?"
}, {
"coords": "142,461,239,462,262,502,244,543,176,571,138,540,133,474",
"text": "Đây thật sự là một phần của một con khủng long à ?"
}, {
"coords": "370,462,442,462,450,475,446,493,451,517,439,539,410,554,389,551,370,542,369,496",
"text": "Và đây là móng vuốt đã hóa thạch của nó"
}, {
"coords": "450,657,436,686,440,708,515,756,543,752,545,659",
"text": "Nó được tìm thấy trong thung lũng khủng long ở Utah"
}, {
"coords": "368,663,387,659,416,671,426,687,419,712,419,723,425,757,406,776,367,783",
"text": "Đồ lưu niệm mà bố tớ mua từ Mỹ về"
}]
}, {
"url": "http://1.bp.blogspot.com/-PVWQPOrTgYE/VwVQtw5vKQI/AAAAAAAAIUY/0admJ47D0AA/s0/004.png",
"speechs": [{
"coords": "52,66,163,68,166,146,156,161,57,173",
"text": "Cứ nghĩ tới việc thứ này sống và cử động được vào 100 triệu năm trước ..."
}, {
"coords": "166,69,218,71,219,158,162,153",
"text": "Phù ..."
}, {
"coords": "410,68,499,67,502,135,468,153,432,157,411,142",
"text": "Đưa cho tớ, tớ muốn xem kỹ hơn"
}, {
"coords": "54,267,186,266,194,306,179,337,101,383,53,378",
"text": "Tớ có cảm giác quay về thời kỳ đó khi cầm thứ này"
}, {
"coords": "513,264,575,262,577,330,550,343,515,332,504,294",
"text": "Rồi, giờ tới lượt tớ"
}, {
"coords": "413,265,482,264,488,285,480,303,491,324,483,346,463,357,430,360,411,356",
"text": "Tớ muốn xem!"
}, {
"coords": "248,263,318,267,315,316,299,327,249,327",
"text": "Đây Shizuchan"
}, {
"coords": "295,265,382,266,384,298,374,322,351,336,304,326,306,300",
"text": "Tuyệt Thật !"
}, {
"coords": "276,461,308,464,308,559,272,555,263,506",
"text": "Hết giờ !"
}, {
"coords": "122,456,237,460,234,529,137,531",
"text": "Đây là thứ quí giá, Tớ ko muốn có gì xảy ra với nó đâu"
}, {
"coords": "320,459,411,463,407,538,362,556,322,548",
"text": "Cậu xem đủ rồi mà nhỉ ? Giờ đưa tớ nào ..."
}, {
"coords": "412,460,547,464,539,565,465,571,416,553",
"text": "Những con khủng long đã sống và đi qua khu rừng ..."
}, {
"coords": "50,656,215,661,209,754,52,753",
"text": "Thì sao ! Chỉ là cái móng của con khủng long thôi mà!"
}, {
"coords": "285,657,435,658,421,723,281,723",
"text": "Nếu các cậu muốn xem, cứ đến bất cứ lúc nào nhé"
}, {
"coords": "511,658,574,656,575,810,503,805",
"text": "Đây là lần đầu tiên tớ thấy một mảnh tuyệt như vậy"
}]
}, {
"url": "http://1.bp.blogspot.com/-J2qP_rryg-E/VwVQt4S_BhI/AAAAAAAAIUU/GYrlKuuee5E/s0/005.png",
"speechs": [{
"coords": "447,66,567,69,563,202,458,186",
"text": "Nghe đây mấy đứa !"
}, {
"coords": "167,65,275,70,268,128,169,122",
"text": "Tự tớ sẽ tìm lấy một cái!"
}, {
"coords": "39,67,132,71,135,209,49,205",
"text": "Không chỉ móng vuốt thôi đâu, cả con luôn nhé"
}, {
"coords": "86,263,280,265,262,365,180,382,104,362",
"text": "Lại nữa rồi ! Mình luôn nói những việc bất khả thi mỗi khi tức lên ...."
}, {
"coords": "223,645,44,642,40,460,231,463",
"text": "Đã vậy thì, mình sẽ tìm kiếm một hóa thạch khủng long nguyên con !"
}, {
"coords": "63,655,165,659,167,700,152,746,110,757,70,738,59,697",
"text": "Giờ tớ chỉ có thể trông cậy vào cậu !"
}, {
"coords": "240,658,301,656,304,710,259,725,229,710",
"text": "Tớ xin lỗi"
}, {
"coords": "441,654,567,656,566,829,445,827",
"text": "Cậu phải suy nghĩ trước khi thốt lên những thứ ngu ngốc như vậy chứ !!"
}]
}, {
"url": "http://1.bp.blogspot.com/-fKFjiSHhlRI/VwVQtorcJFI/AAAAAAAAIUQ/_OKZPs4Ap3Q/s0/006.png",
"speechs": [{
"coords": "81,86,73,142,140,131,127,72",
"text": "Phiền toái"
}, {
"coords": "151,80,177,64,197,83,189,133,178,142,153,134,140,112",
"text": "Bất cẩn"
}, {
"coords": "208,71,276,79,262,120,237,128,210,120",
"text": "vô trách nhiệm"
}, {
"coords": "280,97,301,81,325,92,320,162,280,144",
"text": "Lúc nào cậu cũng"
}, {
"coords": "342,71,472,79,477,142,338,155",
"text": "Làm sao tớ tìm ra một thứ ko tồn tại chứ !"
}, {
"coords": "480,72,596,69,591,146,484,142",
"text": "Làm gì có khủng long ở nhật bản!"
}, {
"coords": "68,269,129,271,117,342,71,343",
"text": "Tự tớ làm"
}, {
"coords": "197,269,285,270,269,328,192,319",
"text": "Khỏi cần cậu giúp"
}, {
"coords": "442,269,539,269,512,332,452,326",
"text": "Đủ rồi!"
}, {
"coords": "65,467,147,463,134,535,95,604,69,592",
"text": "Nhiều sách quá ta"
}, {
"coords": "167,462,260,467,247,563,168,551",
"text": "Cậu muốn bắt đầu từ đâu ?"
}, {
"coords": "580,543,463,550,459,577,580,568",
"text": "Khủng long"
}, {
"coords": "417,500,508,489,579,512,574,531,472,542,421,521",
"text": "Động vật cổ đại"
}, {
"coords": "473,595,583,572,586,591,478,611",
"text": "Kỷ phấn trắng"
}, {
"coords": "471,616,581,593,583,614,467,625",
"text": "Cách tìm hóa thạch"
}, {
"coords": "469,628,576,616,576,632,469,638",
"text": "thứ dưới lòng đất"
}, {
"coords": "69,662,137,660,131,756,96,766,62,754",
"text": "Tớ sẽ luôn luôn hỗ trợ cậu"
}, {
"coords": "166,658,234,660,234,755,175,740",
"text": "Cho dù cuối cùng cậu cũng thất bại"
}, {
"coords": "262,660,408,665,385,761,258,749",
"text": "Nhưng tớ tôn trọng quyết định của cậu"
}, {
"coords": "431,664,595,660,586,765,429,776",
"text": "Nhưng tớ chắc chắn cậu sẽ bỏ cuộc, Cậu không thể hiểu hết những cuốn sách đó đâu"
}]
}];
var app = angular.module('showImageApp', []);
app.controller('showImageController', function($scope, $http) {
$scope.listImageCaption = listImageCaption;
});
<div class="chapter-caption-container" ng-app="showImageApp" ng-controller="showImageController" ng-cloak>
<div class="img-caption-container" ng-repeat="img in listImageCaption">
<img ng-src="{{ img.url }}" usemap="#planetmap{{ $index }}" />
<map name="planetmap{{ $index }}">
<area ng-repeat="area in img.speechs" shape="poly" class="qtip-map" coords="{{ area.coords }}" title="{{ area.text }}" />
</map>
</div>
</div>