<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:600,
height:400,
closeAction:'hide',
plain: true,
items: new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
}),
buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
win.show(this);
createUsemap();
});
function createUsemap() {
var dh = Ext.DomHelper;
var img = dh.append('out', {
tag: 'img',
src: 'bilder/foto1.jpg'
});
var IE = /*@cc_on!@*/false;
var map = IE ? document.createElement('<map name="dyn">')
: document.createElement('map');
map.name = 'dyn';
createArea(map, '0,168,90,183');
createArea(map, '50,184,90,199');
createArea(map, '50,200,90,215');
document.body.appendChild(map);
img.useMap = '#' + map.name;
}
function createArea(map, coords, func) {
var area = Ext.DomHelper.createDom({
tag: 'area',
coords: coords,
//href: 'javascript:' + coords,
href: '#',
shape:'rect'
});
area.onclick = function(e){
alert('ich bin' + coords);
};
map.appendChild(area);
return area;
}
</script>
</head>
<body >
<div id="hello-win"> <div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<!-- Auto create tab 1 -->
<div class="x-tab" title="Hello World 1" id="out">
<p>Hello...</p>
</div>
</div>
</div>
</body>
</html>
