Wszystko działa jak należy, ale zależy mi by skrypt potrafił wczytać zewnętrzny plik .htm do tabeli, w zależności od wybranego wariantu z mapy.
Kod
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// javascript
var inArea,
map = $('#culthan'),
captions = {
adolf: ["NPC Adolf",
"Prowadzi tawernę.",
"<a href='http://pl.zezenium.com/cities/culthan_alfred.html'>więcej</a>"],
// tutaj znajdują się jeszcze pozostałe opisy
},
single_opts = {
fillColor: '000000',
fillOpacity: 0,
stroke: true,
strokeColor: 'fff',
strokeWidth: 2
},
all_opts = {
fillColor: 'ffffff',
fillOpacity: 0,
stroke: false,
strokeWidth: 2,
strokeColor: 'ffffff'
},
initial_opts = {
mapKey: 'data-name',
isSelectable: false,
onClick: function (data) {
inArea = true;
$('#culthan-caption-header').text(captions[data.key][0]);
$('#culthan-caption-text').text(captions[data.key][1]);
$('#culthan-caption-link').html(captions[data.key][2]);
$('#culthan-caption').show();
},
};
opts = $.extend({}, all_opts, initial_opts, single_opts);
map.mapster('unbind')
.mapster(opts)
.bind('mouseover', function () {
if (!inArea) {
map.mapster('set_options', all_opts)
.mapster('set', true, 'all')
.mapster('set_options', single_opts);
}
}).bind('mouseout', function () {
if (!inArea) {
map.mapster('set', false, 'all');
}
});
});//]]>
$(window).load(function(){
// javascript
var inArea,
map = $('#culthan'),
captions = {
adolf: ["NPC Adolf",
"Prowadzi tawernę.",
"<a href='http://pl.zezenium.com/cities/culthan_alfred.html'>więcej</a>"],
// tutaj znajdują się jeszcze pozostałe opisy
},
single_opts = {
fillColor: '000000',
fillOpacity: 0,
stroke: true,
strokeColor: 'fff',
strokeWidth: 2
},
all_opts = {
fillColor: 'ffffff',
fillOpacity: 0,
stroke: false,
strokeWidth: 2,
strokeColor: 'ffffff'
},
initial_opts = {
mapKey: 'data-name',
isSelectable: false,
onClick: function (data) {
inArea = true;
$('#culthan-caption-header').text(captions[data.key][0]);
$('#culthan-caption-text').text(captions[data.key][1]);
$('#culthan-caption-link').html(captions[data.key][2]);
$('#culthan-caption').show();
},
};
opts = $.extend({}, all_opts, initial_opts, single_opts);
map.mapster('unbind')
.mapster(opts)
.bind('mouseover', function () {
if (!inArea) {
map.mapster('set_options', all_opts)
.mapster('set', true, 'all')
.mapster('set_options', single_opts);
}
}).bind('mouseout', function () {
if (!inArea) {
map.mapster('set', false, 'all');
}
});
});//]]>
Co do HTML:
to ta zasadnicza część wygląda następująco:
mapa wraz z kolejnymi regionami odpowiadającymi kolejnym opisom:
Kod
<img id="culthan" src="http://zezenium.com/img/cities/Culthan.png" style="width:557px;height:393px;" usemap="#culthan-map">
<map name="culthan-map">
<area shape="circle" data-name="adolf,all" coords="266,246,25" href="#" />
<area shape="circle" data-name="lukas,all" coords="371,225,25" href="#" />
<area shape="circle" data-name="nicholas,all" coords="415,233,25" href="#" />
<area shape="circle" data-name="thomas,all" coords="386,112,25" href="#" />
<area shape="circle" data-name="edmund,all" coords="268,323,25" href="#" />
<area shape="circle" data-name="edward,all" coords="439,152,25" href="#" />
<area shape="circle" data-name="jeff,all" coords="213,134,25" href="#" />
<area shape="circle" data-name="will,all" coords="53,136,25" href="#" />
</map>
<map name="culthan-map">
<area shape="circle" data-name="adolf,all" coords="266,246,25" href="#" />
<area shape="circle" data-name="lukas,all" coords="371,225,25" href="#" />
<area shape="circle" data-name="nicholas,all" coords="415,233,25" href="#" />
<area shape="circle" data-name="thomas,all" coords="386,112,25" href="#" />
<area shape="circle" data-name="edmund,all" coords="268,323,25" href="#" />
<area shape="circle" data-name="edward,all" coords="439,152,25" href="#" />
<area shape="circle" data-name="jeff,all" coords="213,134,25" href="#" />
<area shape="circle" data-name="will,all" coords="53,136,25" href="#" />
</map>
Oraz część w której po naciśnieciu danego elementu wyświetla się opis:
Kod
<p align="center" id="culthan-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;">Infobox</p>
<p id="culthan-caption-text" align="center">kliknij na mapę aby uzyskać więcej informacji</p>
<p id="culthan-caption-link" align="center"><p>
<p id="culthan-caption-text" align="center">kliknij na mapę aby uzyskać więcej informacji</p>
<p id="culthan-caption-link" align="center"><p>
Domyślam się, że należy zmienić to. Na chwilę obecną wczytuj pobrane wcześniej wartości z captions:
Kod
$('#culthan-caption-header').text(captions[data.key][0]);
$('#culthan-caption-text').text(captions[data.key][1]);
$('#culthan-caption-link').html(captions[data.key][2]);
$('#culthan-caption').show();
$('#culthan-caption-text').text(captions[data.key][1]);
$('#culthan-caption-link').html(captions[data.key][2]);
$('#culthan-caption').show();
No i oczywiście w pewien sposób zmodyfikować tą część, dodając do każdego odpowiednika wyłącznie url do pliku.
Kod
adolf: ["NPC Adolf",
"Prowadzi tawernę.",
"<a href='http://pl.zezenium.com/cities/culthan_alfred.html'>więcej</a>"],
"Prowadzi tawernę.",
"<a href='http://pl.zezenium.com/cities/culthan_alfred.html'>więcej</a>"],
czyżby w ten sposób:
Kod
adolf: ["url do pliku"],
i o ile myślę dobrze, nie wiem co zrobić aby wszystko poprawnie działało.
Pozdrawiam i dziękuje za każdą pomoc.