1. 이미지 소스가 없는 경우, onclick이 일어나지 않습니다. 그냥 표준의 규칙인 거죠. 그리고 주어진 문제는 이미지를 클릭하면 이미지가 텅 빈 셀 중 하나로 이동하는 겁니다. 혹시해서. 2. 이런 경우, 정말 여러 가지 방법이 있습니다. 코딩 실력에 따라서 수준에 맞는 방법을 찾게 됩니다. 현재의 코드를 기준으로 한가지 방법을 알려 드리면 다음과 같이 할 수 있습니다. <script> var last = 0; function init() { for(var i=0; i<document.images.length; i++) { document.images[i].onclick = clickMove; // 모든 이미지 객체의 onclick 리스너에 clickMove 함수 등록 } }
웹 페이지가 로딩된 후 onload 리스너에서 모든 이미지 객체를 찾아 onclick 리스너를 달아 주는 겁니다. 제가 해보니 잘 됩니다.
3. 사과 이미지의 크기가 셀 보다 크면 그런 현상이 발생합니다. 이미지의 크기를 줄이는 수 밖에 없습니다. 아니면 이미지를 자바스크립트로 미리 로딩한 뒤 그 크기를 알아내어 자바스크립트 코드로 테이블을 만들고 이때 셀의 크기를 이미지의 크기보다 크게 정해주는 방법입니다. 현재 굳이 이런방법을 사용할 필요는 없습니다. 지금은 이벤트, 리스너, 웹 페이지 만들기, 자바스크립트 등을 공부하는 중이니까요. 회사에서 이런 일을 해야 한다면 그때는 성장헸기 때문에 충분히 여러 방법이 생각날 겁니다.
2. 이런 경우, 정말 여러 가지 방법이 있습니다. 코딩 실력에 따라서 수준에 맞는 방법을 찾게 됩니다. 현재의 코드를 기준으로 한가지 방법을 알려 드리면 다음과 같이 할 수 있습니다.
<script>
var last = 0;
function init() {
for(var i=0; i<document.images.length; i++) {
document.images[i].onclick = clickMove; // 모든 이미지 객체의 onclick 리스너에 clickMove 함수 등록
}
}
function clickMove(){
....
}
</script>
</head>
<body onload="init()">
<table>
<tr> <td><img src="a.png"></td><td><img src="a.png" ></td> </tr>
웹 페이지가 로딩된 후 onload 리스너에서 모든 이미지 객체를 찾아 onclick 리스너를 달아 주는 겁니다.
제가 해보니 잘 됩니다.
3. 사과 이미지의 크기가 셀 보다 크면 그런 현상이 발생합니다. 이미지의 크기를 줄이는 수 밖에 없습니다.
아니면 이미지를 자바스크립트로 미리 로딩한 뒤
그 크기를 알아내어 자바스크립트 코드로 테이블을 만들고 이때 셀의 크기를 이미지의 크기보다 크게 정해주는 방법입니다. 현재 굳이 이런방법을 사용할 필요는 없습니다.
지금은 이벤트, 리스너, 웹 페이지 만들기, 자바스크립트 등을 공부하는 중이니까요.
회사에서 이런 일을 해야 한다면 그때는 성장헸기 때문에 충분히 여러 방법이 생각날 겁니다.