<script type='text/javascript'>
var text = '';
var pass='ACB';
var coordX=0;
var coordY=0;
var Width=64;
var Height=64;
function getCoords() {
imageMapX = findPosX(imageMap);
imageMapY = findPosY(imageMap);
imageMap.onmousemove = moveDot;
imageMap.onmouseover = moveDot;
imageMap.onclick = coordsFix;
}
function moveDot(cursor) {
if(!cursor) var cursor = window.event;
var x = 0;
var y = 0;
if (cursor.pageX || cursor.pageY) {
x = cursor.pageX;
y = cursor.pageY;
}
else if (cursor.clientX || cursor.clientY) {
x = cursor.clientX + document.body.scrollLeft;
y = cursor.clientY + document.body.scrollTop;
}
x -= imageMapX;
y -= imageMapY;
x -= dX;
y -= dY;
(x < 0) ? coordX = 0 : coordX = x;
(y < 0) ? coordY = 0 : coordY = y;
}
function coordsFix() {
if(((coordX<Width/2+10)&&(coordX>Width/2-10))&&((coordY<Height/2+10)&&(coordY>Height/2-10)))
{
text = '';
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}
else{
if(coordX<Width/2)
{
if(coordY<Height/2)
text = text+'A';
else
text = text+'C';
}
else
{
if(coordY<Height/2)
text = text+'B';
else
text = text+'D';
}}
if(text==pass)
{
var picture = document.getElementById('lock');
picture.src = 'port/lock2.png?' + Math.random();
}
else
{
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}
}
function findPosX(obj) {
var currleft = 0;
if (obj.offsetParent)
while (obj.offsetParent) {
currleft += obj.offsetLeft
obj = obj.offsetParent;
}
else if (obj.x) currleft += obj.x;
return currleft;
}
function findPosY(obj) {
var currtop = 0;
if (obj.offsetParent)
while (obj.offsetParent) {
currtop += obj.offsetTop
obj = obj.offsetParent;
}
else if (obj.y) currtop += obj.y;
return currtop;
}
function getObj(name) {
if (document.getElementById) return document.getElementById(name);
else if (document.all) return document.all[name];
else if (document.layers) return document.layers[name];
else return false;
}
function init() {
dX = 7;
dY = 7;
myForm = getObj('mainForm');
imageMap = getObj('schemePlace');
imageMap.onmouseover = getCoords;
mapWdt = imageMap.offsetWidth - dX;
mapHgt = imageMap.offsetHeight - dY;
}
try {
window.addEventListener('load', init, false);
} catch(e) {
window.onload = init;
}
function check()
{
if(text==pass) alert('Пароль верный,поздравляю!');
else alert('Не угадал пароль,тыкай еще!');
text='';
var picture = document.getElementById('lock');
picture.src = 'port/lock.png?' + Math.random();
}
</script>
<center>
<div id='schemePlace'
style='width:64px;height:64px;'>
<image src='port/lock.png' id='lock'>
<br >
<input type='button' class='input' value='Нажми на меня' onclick='check()'/>
в общем-то вот, необходимо уменьшить код, урезать лишние части.
сам скрипт рисует замок"лок.пнг", при нажатии в лев. верх, лев. низ, прав. верх, замок "открывается" "лок2.пнг". при неправильном наборе не открывается и сообщение выводится "пароль неверный", предыдущий набор сбрасывается.
