ZDC.Markerの画像にCSSを適用することは動作保障外となっています。
そのため、次の例では、ユーザウィジットでマーカ画像を作成します。
このマーカはCSSでスタイルを変更できます。
※ IE6では正常に動作しません。
ユーザウィジットでマーカ画像を表示するには、ZDC.UserWidgetクラスと、ZDC.MapクラスのaddWidget()を利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-JP">
<script src="//test.api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,userwidget.js&enc=EUC&force=1" type="text/javascript"></script>
<style type="text/css">
#mrk:hover #base {opacity: 0.7; filter:alpha(opacity=70);}
#mrk:hover #content {opacity: 0.7; filter:alpha(opacity=70);}
</style>
<script type="text/javascript">
var map, dom, base, content;
function loadMap() {
map = new ZDC.Map(document.getElementById('ZMap'));
/* マーカ用DOM */
dom = document.createElement('div');
dom.setAttribute('id', 'mrk');
/* 下地画像 */
base = document.createElement('img');
base.setAttribute('id', 'base');
/* 下地画像のロード後に重畳画像をロードする */
base.onload = baseLoadend;
/* onloadイベントハンドラ登録後にsrcを指定(IEのonloadイベント対応) */
base.src = '../img/wgtbase.gif';
base.style.position = 'absolute';
};
/* 重畳画像をロードする */
function baseLoadend() {
content = document.createElement('img');
content.setAttribute('id', 'content');
/* 重畳画像のロード後にユーザウィジットを作成する */
content.onload = contentLoadend;
/* onloadイベントハンドラ登録後にsrcを指定(IEのonloadイベント対応) */
content.src = '../img/wgtcontent.png';
content.style.position = 'absolute';
content.style.top = '5px';
content.style.left = '5px';
};
/* ユーザウィジットを作成する */
function contentLoadend() {
dom.appendChild(base);
dom.appendChild(content);
var widget = new ZDC.UserWidget(
map.getLatLon(),
{
size: new ZDC.WH(41, 50),
offset: new ZDC.Pixel(-20,-50),
dom: dom
});
map.addWidget(widget);
widget.open();
};
</script>
</head>
<body onload="loadMap();">
<div id="ZMap" style="border:1px solid #777777; width:500px; height:300px; top:0px; left:20px; position:absolute;"></div>
</body>
</html>