Created
September 28, 2010 13:00
-
-
Save think49/600934 to your computer and use it in GitHub Desktop.
PuzzleTable.js : mouseover したり、click すると画像が切り替わるパズル的な何か
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>PuzzleTable</title> | |
| <style type="text/css"><!-- | |
| table { padding: 0; border-collapse: collapse; border-style: none; border-width: 0; } | |
| tbody, tr, td { margin: 0; padding: 0; } | |
| td img { margin: 0; padding: 0; vertical-align: bottom; } | |
| --></style> | |
| <script><!-- | |
| // PuzzleTable.js | |
| (function () { | |
| // PuzzleTable | |
| function PuzzleTable () { | |
| this.init.apply(this, arguments); | |
| return this; | |
| } | |
| PuzzleTable.prototype.create = function (doc) { | |
| if (!doc || !doc.createElement) throw new TypeError (doc + ' is not HTMLDocument'); | |
| var rowsLength = this.rowsLength, cellsLength = this.cellsLength, imageFiles = this.imageFiles; | |
| var table = doc.createElement('table'), imgs = [doc.createElement('img'), doc.createElement('img')], tBodies, trs, i, l, tr, cells; | |
| if (rowsLength < 2) throw new Error ('"rowsLength" has to be the numerical value of more than 2'); | |
| table.className = 'mouseoverMode'; | |
| tBodies = table.appendChild(doc.createElement('tbody')); | |
| trs = [tBodies.insertRow(0), tBodies.insertRow(1)]; | |
| imgs[0].src = imageFiles[0]; | |
| imgs[0].className = 'puzzle'; | |
| imgs[1].src = imageFiles[1]; | |
| imgs[1].className = 'puzzle'; | |
| for (i = 0, l = cellsLength, tr = trs[0], cells = tr.cells; i < l; i++) { | |
| tr.insertCell(cells.length).appendChild(imgs[i % 2].cloneNode(false)); | |
| } | |
| for (i = 1, l = cellsLength + 1, tr = trs[1], cells = tr.cells; i < l; i++) { | |
| tr.insertCell(cells.length).appendChild(imgs[i % 2].cloneNode(false)); | |
| } | |
| for (i = 2, l = rowsLength; i < l; i++) { | |
| tBodies.appendChild(trs[i % 2].cloneNode(true)); | |
| } | |
| this.table = table; | |
| return this; | |
| }; | |
| PuzzleTable.prototype.addEvent = function (listener) { | |
| var table = this.table; | |
| if (typeof listener !== 'function') throw new TypeError(listener + ' is not function'); | |
| if (!table) throw new Error('table is not defined'); | |
| if (table.addEventListener) { | |
| table.addEventListener('mouseover', listener, false); | |
| table.addEventListener('click', listener, false); | |
| } else if (table.attachEvent) { | |
| table.attachEvent('onmouseover', listener); | |
| table.attachEvent('onclick', listener); | |
| } | |
| return this; | |
| }; | |
| PuzzleTable.prototype.init = function (imageFiles, rowsLength, cellsLength) { | |
| if (Array.isArray ? !Array.isArray(imageFiles) : (typeof imageFiles !== 'object' || Object.prototype.toString.call(imageFiles) !== '[object Array]')) throw new TypeError(imageFiles + ' is not Array'); | |
| if (rowsLength) this.rowsLength = rowsLength; | |
| if (cellsLength) this.cellsLength = cellsLength; | |
| this.imageFiles = imageFiles; | |
| return this; | |
| }; | |
| PuzzleTable.prototype.rowsLength = 10; | |
| PuzzleTable.prototype.cellsLength = 10; | |
| // puzzleTableListener | |
| function puzzleTableListener (event) { | |
| var img, type, td, table, src, imgList; | |
| img = event.target || event.srcElement; | |
| type = event.type; | |
| src = img.getAttribute('src'); | |
| td = img ? img.offsetParent : null; | |
| table = td ? td.offsetParent : null; | |
| if (type !== 'mouseover' && type !== 'click') return; | |
| if (img.tagName.toLowerCase() !== 'img') return; | |
| if (!src) return; | |
| if ((' ' + img.className + ' ').indexOf(' puzzle ') === -1) return; | |
| if (!td || td.tagName.toLowerCase() !== 'td') return; | |
| if (!table || table.tagName.toLowerCase() !== 'table') return; | |
| if ((' ' + table.className + ' ').indexOf(' ' + type + 'Mode ') === -1) return; | |
| imgList = [ | |
| 'data:image/gif;base64,R0lGODlhJgAmAPcAAAAAAP///76CAMj/yL+CAL2CAM3/58n/3cb/2cr/283/3L7/0Mj/1sr/2MP/0cb/0sn/1MP/zsP/zcT/zsn/0sr/08T/zcf/z8j/0M//1sX/y8b/zMb/y8P8yMj/zsX/ycn/zcv8zcf/ycj/ycj+ysj9ysf+x87/zsj/x9j/18r/yMr/xsj8xMj7xc3/ycr+xcj8w8v9xs3/xsT2vMz/xM7/xs//xM39wsz6vdX/x9L+wcTssdz/ydP7u9r/xNv/wL/ko8rtrdr9upCybajKhtf5tOL/wHCOS9LssOP/u+X/wN35suL9sub/ucrjmO3/v9frneH1puv/s8XWiqi4aOLupLrFc4qSPZujUMTLePf+qnl/KoaLNZ+oAOfqj/Dzm/z/pP3/tZqaQNDPdZKPMr+8Y/z6mcXBY/Pti/fyk46FJJ2UM+vjhLSqTNDFY//1i+jef4d5F5GCHZmMKMO2WPXne7ekPaydPMq3SsKvR8KwSLOTAI14D6GNJe7XaZ6GHKqSJ7WbNJx7Cpx+EaiMH7WXKcCiNMyuP9K1ReLCTLiNAKN/DaKADqiDEKiGFcmjLtSwPeK+TbuIAKF3AaJ6Bqp/CaV+C7KGD66HE7KMGr2THb2FAKp6Aa58ArWBBbmEBq5/Bql8BriFCbSDCrSFC7+MD7qLD8KTG8ydI9KhJsKFAMGFAL2BAL2DALh+ALN7AKp0AL+DAb6CAcSGAsCEAryCArqCA72CBLuDBMOIBb6EBb+FBsKHCMSBAMOBAMKCAMCCAMCBAL+BAL5/AL1+AL19ALF2AKtyAKlwAJ1pAJViAJZjAZZkAZVkAZNiAcCAAr6BAsKDA5hmAsCDA6NtA8CDBJVjA5poBJZkBLB3BbyCB6l0CKJvCLR+DLeADsqPErqDEMJ9AMB9AL56AL16AL15ALp4AJNfAKxuAZtkAZdhAZ9pBMJ5AL92AL13AL10ALxzALp1ALlyAMV0ALhtAMhyAMlpANZSAOA+AeYyAfIZAfgOAfsIAf8BAf0FAf///ywAAAAAJgAmAAAI/wD7CeyXb80jg4/srbGX6yA4KCcW0JFmr4s9ihYzVrQXR5q0gfgQNXz0KJfIkiLdmDlxAlHFXBm75NpoMZfHjwLx5VpocGFJgw1ZQtmI8SLNijfj4OuHD1/Jnw2jloRo4BHFmRpzwWSYS420hfkYItxpjyTCsk9OGMBi1GJRjW9PkowqF+UjqogWzsRalijDvwcVkv1ZdidJlk/gbnVrT83RLiRR0jVJ2Y0bliekZVzM9WqXzSX7/iSpsOIjAztOTKFYtLVmv5ClyoZqBoqBE27+8p250GJCmDPnRp6LMNWUJwtUP4bdtm1dyiftUcHcUubmmdK0btW6uTBQhY9kQv9Jy9Lq8rfMpT0VHpUqSzdX+8507Hsj34ThwSXsSccNeShWccaYRgPSJJJWiDzihm22sZTXcmpoZd922mlFkhtApIYYZhMdRRF99oRYYIisqXYbdQZAAcUajsFUUxf0LSYTTR7Z4wYW1G3IBlvoFUhgRfhI4wcRUyRH3YIP6qXbXx7ttaRBBphx24kn0GEQa8vBtZGIRlHBBmbkGbnbhFnZxNBnFVlkD0tUngAFEJYl9COX1jWnJUSYsUGEQzKtAZx9M9ZUWlYzomiZerLZeV569ixA3gkljbRfZPZVapEagZ5JEZ62ETeXSH4ypxGIra3pplrhBdZTVDM6WVNXls6hSMSRCE72FF8/9mjUEV+WN5pWPqUa6Y8gvpiRG1O6ceuykuK60RaLWoQnG3665GewPu3EXWcvYaWdRWus9MQUhknm562haqkuUaeldlCkY8VLkqBrvPabfFy5acAUz7nRrEjgiFhjro9NwRIV3pUV2GiPCHSTZotFzBdVblTLnmT25CPQOR75mF6RTxD2q3waO3zTb60uaSNms0V17kwDBQQAOw==', | |
| 'data:image/gif;base64,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', | |
| 'data:image/gif;base64,R0lGODlhJgAmAPcAAAAAAP///3ze9tD/6q3Wl5SwakBXDNjtpMnZi3uIOWFuEXF5Jra5YcrOdmZlAZCDG6OXN/DgdqyTAGNVAejNXPfbZ8quQsykMsiFAJlkAb6BD4VTANBfAOA8AekrAf8BAf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAJgAmAAAI/wA/COzAAQIGCRcuFFwIQYMDBwYWZOAggYPFiRgpcnCwIYPADx4aYEh4YaRJkg8fcsCwUqPFiiwhZJj5ESEEDiUVljSo0MCEhzctCh3KAWMGByAt5sTAM6FJCCkdtITZkiWGDA8yKPywsyRTnBcQ6uRg4OGEl0IrZswowQLTkThPwnV7IWrVuywnslSq8yvJgkydLoDo4ObEi0VnFtWo1WlOxxgsOLZr9a7euyUZMtWg8KbnjRAnTKyIeO1irXKXqh5JuWqGm5X3rtSZcOVIr2Md/HQwWmhvtC93jkT49qZqs7yv5sW7eO9ODSwVYvA7MoNP3YdPa8gOfDXJ1BgeUP/GyryyUgycA1fsa7xuaNMVSTOm6HU6+JwU7WaPzZwCBgEEEMBBAQKQVMCAFxCggQEZFFCATBI8cEEGEmy30EQCFCXAhhwC2OGHIG5IgAADcFhiiCimqOKKLLa4ooMwEsBAAQgUkKCDDAgAYwEJcIgAATU2AIGORHIIXEsWmVfUBGVJNd1OcT0Jl0LzZcfdYg/5ZFxxU/oV11RCsUTaazhFdd+Zvp2mZka66WYQBLiBZRxOdLqkUWUPuEYYB3TFJVxJbhlk528bEbXAT1rN1hdtfU1XHnmx2QUoeHQ5tWYHprEZ2nqANRQdYGLxx1KeoprpXWqWEqWmqtdtIF1tT0Zm6WdsilXGKVQpocZTZG+FFehyma650U8TvKloXHB2ZtJFsIWJmaRnPkZQUR0Je2SWhcHlWZdBCXRUcszJJ0FUTtF121IcfNQRhWkihliWG0y3LZwxUeTBRzM5WV5L7mV7Kn73ChQQADs=', | |
| 'data:image/gif;base64,R0lGODlhJgAmAPcAAAAAAP///3ze9pSwakBXDNjtpMnZi3uIOWFuEXF5Jra5YcrOdmZlAa6qU5CDG6OXN/DgdqyTAGNVAejNXMquQsykMsiFAJlkAb6BD4VTANBfAOA8AekrAf8BAf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAJgAmAAAI/wAzXBio4ULBgwYNRtggoKEADRoqaHhg4QEGCxE1OOjAscOFDAwuYMQIMYKGkQUdPqxggaXLli05cOg4UOBBiDhzXlDJ0kLFiBUkuqywgWOFCyFNosRoUqjKiDBZUqgYVWYHnAkPmsx6AYNDBScfDD1pIUJQCw2gnjx5QSJKiBgrqKT6kqXYukyxXtiKteDOhizJPpjYEurgl2sxDqT4tqABh1CnDq17ti9XhAfnBiUsFuNgsRYDL/VLcq0DzVFT49XA1yREgw4wz4Ua9GVLoTAT6x5Y+sHjhlQpvrxrlmrfknqzOmzg8+5EDHYFk9U9ejFrhwNUa6+dV6FWrBsMqv+ELpHiXei3LaCnTt2CQtSSU0uubNIBBpERMEAcnJChQ4kOOPBZBQ+0ddFPFhwgAQMMNsggAQ4ycAB2SDG4YIMQOniABRZmeGGEDBCg0gAeMnBhhhGiCOKKDGDH4osLxshABgTEWCOENTrkgIc4WpgAjRLUyABoGlBAmF0VOFDYA09FQNJg+pWG0mZ23VZeRRf9JsBRmGWF3Gt4hQkTkw0N8JpSuqFJUnQ+CTXRZhbwdNmcCFUpFV1n2fXfWhdsUJpr1AkV2GQwWaAlWMmxlpOibZ0Vn5hamonSYj6xd9JmFJlV3ptxYvdlQeF9l1CYeaam0kPV7cVeYS5B5aRtcjVvZMCfevGX01TCnWVenhqoNNhoil3w61qC9XRYBU1N1GuZ3r2GEEGjbqfdiKyR1Jh1EHWwAXqDacrZSSop4OV3r9kUQUe0lUrBZpGuqqhiIDFAE2cHduvTAF+Na5CzA814QUcdkPoStcDqVqADFwQEADs=', | |
| 'data:image/gif;base64,R0lGODlhJgAmAPcAAAAAAP///5/k9ajKhnCOS+3/v9frncXWiqi4aJujUJ+oAPz6mY6FJJ2UM+vjhLSqTNDFY4d5F8O2WPXne+7XadK1ReLCTMmjLuK+TdKhJsOIBZhmArqDEMlpAOYyAf8BAf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAJgAmAAAI/wA/CPTQQUHBDhsOJjRIQIDDChoaXLjQQeKFiBc2bIigUaBADh00iCw40qCGBA4FTNRwsSVLiRpjeiRocCFCDQYNonQIocNEBRMrXgAq0cNGjx80hDyoVKnJDikHuLwIcWrBhAs95ESo8KCCASmHssSo1GLEkApGatjQ1OtBiikFQBg7le5KtzZrdlXAIeUBiVUnBq0geGhanCE3pF1MEueGuD+nKqga0elerXu5guUZ8uxFiWU7L227lrTPkA3izhXMUjBlt1s3YN5ac7PDAacvEvUZ8bBXxA3YMkXMIK6ACrzrXuRqsMNB53qjIzQudWIDnxcsmkw7vKni01svGP8XkLz1ctq/c85mPj2lAQESRDYY2+Cp/dFXRZoEbjzAAQiE8dYVVs5x5ZxG0LEH1Xh+aTBABQlcpcCEjTFloUEUOcigQwc4ZEACBxyQEXu0rZfXThuOF8B7bflWGlqWOSdSBca9t+EBDxSol015FSibTlBJBIFxBcR1IXgVbpdTc8BdgEAGNSIA25To0QZRYBNBsIBq+HlnmmnNUQRaRRXZKIAByEmnwHfoJQgUXeZ1MIBt76VXkXBK4sRddq4NJVgHDhino1cJZbaQS5RNNUFUT4nknYsWrjQmaGc1MKRDCfSoXmwKUbUSa6zZJoBwpmV0H0UV4ZTdaRIBNVFcbNF4ttaBbhZE2a1wvurQfIgdhthaviolaXZkrdpaShBg1mNWnG5AEZYaUMZSVAmpOppaHzylmFGfEtvSRUaq6ZZHGhgVk0vzodvBpfBx55uvzX3gwQcxRdDZddYFJVFKEvA4ZQfzChTTBgzASRhVLNmI25ejKRDwBwEBADs=', | |
| 'data:image/gif;base64,R0lGODlhJgAmAPcAAAAAAP///5/k9XCOS+3/v9frncXWiqi4aJujUJ+oAPz6mY6FJJ2UM+vjhLSqTNDFY4d5F8O2WPXne+7XadK1ReLCTMmjLuK+TdKhJsOIBZhmArqDEMlpAOYyAf8BAf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAJgAmAAAI/wA1CITQgYEFgxY4MOCQ4eAGAgIERNDAIQEHihYzXvTA0cMCgQIbWrCQgULDkhkeKIj4oGKGjAkyVJzZ0QNIigsNLiRpsGFEATMxXpxpUUPNmyR5nkxq4acFijI1ZnjJkIOHDlgvZkC4lcNIhBwo/DQwtCjRoBU7JGCaFOVIkhQe/DywUGZUr2gtyjyosCtPr1sbFoioUQNVswvOrh3pFqVJkw8M/NSQ8TDDDFATVCaJl+dIhRUlDyZAUahpynnbql6aYfDPqndlLrSY8OVetowRSv4JVGPhvGVNvnXckMPuiCYPT9U6Va9ywD0VWojJW8ABob99l73IlvVK3huq1v/mkJj2zLsJp29IvzVC9aeWzWrHXjF5BgMRHrj++WD22QXLOefcVMsd99N+AtBHUXkcNChfg0NpAFF1Y5HFkGYXlndYTOcJxIEACFAYUQEIbJedYmktEJFovElGgX92wXaRYTLKdoAA3/EWwQFPmYiiUA5CKACC1cV2nmVTZQZTgyLylpB2Qcb04G/VDRZBXYFxqJeWVfm3pUzVPfDAWqz5OB9wFFVnwFRvSfeZXufNtACXL6XppGdwBQacRgya9qGTa+V00Ekcxugcg1FxGOZUwjXGmXZTojXAnVuR5Nd0jMVH3lkvZWQgm6x1hyIEP87E2wEl9bUTX0pRlaRLURFsaBEDY1WaJwOs4XqWgrsed5ClXAWLwXQMcYTaeONNdeADIpHE7HAmUdSBBh14UKpvruH311fQjaQBBDVd6FJld/EWEwWMtWUSB9MaxVGkU9a6U6V7VfStQB11UFuhMhoXEQGhnoQrSQlo8FFAADs=' | |
| ]; | |
| for (var i = 0, l = imgList.length; i < l; i++) { | |
| if (src === imgList[i]) img.src = imgList[(i + 2) % l]; | |
| } | |
| } | |
| // DOMContentLoaded (for IE) | |
| function createDOMContentLoadedForIE (listener) { | |
| if (!this.document.createComment().doScroll) return; | |
| return function () { | |
| try { | |
| this.document.createComment().doScroll(); | |
| listener({ target:this.document, type:'DOMContentLoaded' }); | |
| } catch (error) { | |
| setTimeout(arguments.callee, 1); | |
| } | |
| }; | |
| } | |
| // domContentLoadedListener | |
| function domContentLoadedListener (event) { | |
| var doc = event.target, puzzle, table, | |
| imgList = [ | |
| 'data:image/gif;base64,R0lGODlhJgAmAPcAAAAAAP///76CAMj/yL+CAL2CAM3/58n/3cb/2cr/283/3L7/0Mj/1sr/2MP/0cb/0sn/1MP/zsP/zcT/zsn/0sr/08T/zcf/z8j/0M//1sX/y8b/zMb/y8P8yMj/zsX/ycn/zcv8zcf/ycj/ycj+ysj9ysf+x87/zsj/x9j/18r/yMr/xsj8xMj7xc3/ycr+xcj8w8v9xs3/xsT2vMz/xM7/xs//xM39wsz6vdX/x9L+wcTssdz/ydP7u9r/xNv/wL/ko8rtrdr9upCybajKhtf5tOL/wHCOS9LssOP/u+X/wN35suL9sub/ucrjmO3/v9frneH1puv/s8XWiqi4aOLupLrFc4qSPZujUMTLePf+qnl/KoaLNZ+oAOfqj/Dzm/z/pP3/tZqaQNDPdZKPMr+8Y/z6mcXBY/Pti/fyk46FJJ2UM+vjhLSqTNDFY//1i+jef4d5F5GCHZmMKMO2WPXne7ekPaydPMq3SsKvR8KwSLOTAI14D6GNJe7XaZ6GHKqSJ7WbNJx7Cpx+EaiMH7WXKcCiNMyuP9K1ReLCTLiNAKN/DaKADqiDEKiGFcmjLtSwPeK+TbuIAKF3AaJ6Bqp/CaV+C7KGD66HE7KMGr2THb2FAKp6Aa58ArWBBbmEBq5/Bql8BriFCbSDCrSFC7+MD7qLD8KTG8ydI9KhJsKFAMGFAL2BAL2DALh+ALN7AKp0AL+DAb6CAcSGAsCEAryCArqCA72CBLuDBMOIBb6EBb+FBsKHCMSBAMOBAMKCAMCCAMCBAL+BAL5/AL1+AL19ALF2AKtyAKlwAJ1pAJViAJZjAZZkAZVkAZNiAcCAAr6BAsKDA5hmAsCDA6NtA8CDBJVjA5poBJZkBLB3BbyCB6l0CKJvCLR+DLeADsqPErqDEMJ9AMB9AL56AL16AL15ALp4AJNfAKxuAZtkAZdhAZ9pBMJ5AL92AL13AL10ALxzALp1ALlyAMV0ALhtAMhyAMlpANZSAOA+AeYyAfIZAfgOAfsIAf8BAf0FAf///ywAAAAAJgAmAAAI/wD7CeyXb80jg4/srbGX6yA4KCcW0JFmr4s9ihYzVrQXR5q0gfgQNXz0KJfIkiLdmDlxAlHFXBm75NpoMZfHjwLx5VpocGFJgw1ZQtmI8SLNijfj4OuHD1/Jnw2jloRo4BHFmRpzwWSYS420hfkYItxpjyTCsk9OGMBi1GJRjW9PkowqF+UjqogWzsRalijDvwcVkv1ZdidJlk/gbnVrT83RLiRR0jVJ2Y0bliekZVzM9WqXzSX7/iSpsOIjAztOTKFYtLVmv5ClyoZqBoqBE27+8p250GJCmDPnRp6LMNWUJwtUP4bdtm1dyiftUcHcUubmmdK0btW6uTBQhY9kQv9Jy9Lq8rfMpT0VHpUqSzdX+8507Hsj34ThwSXsSccNeShWccaYRgPSJJJWiDzihm22sZTXcmpoZd922mlFkhtApIYYZhMdRRF99oRYYIisqXYbdQZAAcUajsFUUxf0LSYTTR7Z4wYW1G3IBlvoFUhgRfhI4wcRUyRH3YIP6qXbXx7ttaRBBphx24kn0GEQa8vBtZGIRlHBBmbkGbnbhFnZxNBnFVlkD0tUngAFEJYl9COX1jWnJUSYsUGEQzKtAZx9M9ZUWlYzomiZerLZeV569ixA3gkljbRfZPZVapEagZ5JEZ62ETeXSH4ypxGIra3pplrhBdZTVDM6WVNXls6hSMSRCE72FF8/9mjUEV+WN5pWPqUa6Y8gvpiRG1O6ceuykuK60RaLWoQnG3665GewPu3EXWcvYaWdRWus9MQUhknm562haqkuUaeldlCkY8VLkqBrvPabfFy5acAUz7nRrEjgiFhjro9NwRIV3pUV2GiPCHSTZotFzBdVblTLnmT25CPQOR75mF6RTxD2q3waO3zTb60uaSNms0V17kwDBQQAOw==', | |
| 'data:image/gif;base64,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' | |
| ]; | |
| puzzle = new PuzzleTable(imgList).create(doc).addEvent(puzzleTableListener); | |
| table = puzzle.table; | |
| table.id = 'PUZZLE'; | |
| doc.body.appendChild(table); | |
| if (doc.addEventListener) { | |
| doc.addEventListener('click', clickListener, false); | |
| } else if (doc.attachEvent) { | |
| doc.attachEvent('onclick', clickListener); | |
| } | |
| } | |
| function clickListener (event) { | |
| var input = event.target || event.srcElement, doc = input.ownerDocument, table, className, mode; | |
| if (input.id !== 'CHANGE_MODE') return; | |
| if (table = doc.getElementById('PUZZLE'), !table|| table.tagName.toLowerCase() !== 'table') return; | |
| if (className = table.className, !className) return; | |
| for (var i = 0, className = ' ' + className + ' ', classList = ['mouseoverMode', 'clickMode'], l = classList.length; i < l; i++) { | |
| if (className.indexOf(' ' + classList[i] + ' ') !== -1) { | |
| className = className.replace(new RegExp(' ' + classList[i] + ' ', 'g'), classList[(i + 1) % 2]); | |
| className = className.trim ? className.trim() : className.replace(/^\s+|\s+$/); | |
| table.className = className; | |
| mode = /^(\w+)Mode$/.exec(className); | |
| input.value = mode[1] + ' Mode'; | |
| break; | |
| } | |
| } | |
| event.preventDefault ? event.preventDefault() : event.returnValue = true; | |
| } | |
| // initialization | |
| if (document.addEventListener) { | |
| document.addEventListener('DOMContentLoaded', domContentLoadedListener, false); | |
| } else if (document.createComment().doScroll) { | |
| createDOMContentLoadedForIE.call(this, domContentLoadedListener).call(this); | |
| } | |
| }).call(this); | |
| //--></script> | |
| </head> | |
| <body> | |
| <h1>PuzzleTable</h1> | |
| <p>mouseover したり、click すると画像が切り替わるパズル的な何か。</p> | |
| <p>このスクリプトを動作させるためには、detaスキームに対応するブラウザが必要です。(IE7- は不可)<br />IE7- に対応させる場合は、5つの画像ファイルを用意して imgList にそれぞれのファイル名を代入してください。</p> | |
| <ul> | |
| <li><a href="http://www.cityfujisawa.ne.jp/~intvsn/OnMouseKolam/OnMouseKOLAM.htm">OnMouseKolamDrawer</a></li> | |
| <li><a href="http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=2677">掲示板/JavaScript質問板/<img src="1s.gif" 文をForに？ - TAG index Webサイト</a></li> | |
| </ul> | |
| <p>下記の仕組みで画像が切り替わります。</p> | |
| <ul> | |
| <li>imgList[0] -> imgList[2] -> imgList[4] -> imgList[0] -> (loop)</li> | |
| <li>imgList[1] -> imgList[3] -> imgList[5] -> imgList[1] -> (loop)</li> | |
| </ul> | |
| <p>ボタンをクリックすると、画像が切り替わる条件が変更されます。</p> | |
| <form> | |
| <p><input type="button" id="CHANGE_MODE" name="mode" value="mouseover Mode" tabindex="0" /></p> | |
| </form> | |
| <hr /> | |
| </body> | |
| </html> |
2010-09-25 - babu_babu_babooのごみ箱
http://d.hatena.ne.jp/babu_babu_baboo/20100925#c1285752235
gtlt さんのアドバイスを参考にしています。感謝！
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
掲示板/JavaScript質問板/<img src="1s.gif" 文をForに？ - TAG index Webサイト
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=2677
にポストしたコード。