CSS HappyLife さんの smartrollover.js を複数タグに対応できるように改造してみた
input
要素(@type=“image")にも対応したいと思い作ってみましたが、掲載する段になって大した改造はしていないことがわかって反省している。ちなみにHTMLでsrc
属性が使えるのはimg
要素とinput
要素だけのようです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | function smartRollover() { if(document.getElementsByTagName) { var tags = ["img","input"]; var len = tags.length; for( var i=0; i < len; i++ ) { var el = document.getElementsByTagName(tags[i]); var len2 = el.length; for(var j=0; j < len2; j++) { var attr = el[j].getAttribute("src"); if( attr ) { if(el[j].getAttribute("src").match(/_out\./)) { el[j].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_out.", "_over.")); } el[j].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_over.", "_out.")); } } } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } |
smartrollover.js の記事にコメントをつけている LiosK さんのソースも改造してみた。こっちのが素敵みたい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | (function(onLoad) { try { window.addEventListener('load', onLoad, false); } catch (e) { window.attachEvent('onload', onLoad); } })(function() { var tags = ["img","input"]; for( var i=0, len=tags.length; i < len; i++ ) { var over = function() { this.src = this.src.replace('_out.', '_over.'); }; var out = function() { this.src = this.src.replace('_over.', '_out.'); }; var el = document.getElementsByTagName(tags[i]); for (var j=0, len2=el.length; j < len2; j++) { var attr = el[j].getAttribute('src'); if (!el[j].src.match(/_out\./)&&attr) continue; el[j].onmouseover = over; el[j].onmouseout = out; } } }); |
オレも1からスクラッチできるようにガンバル。