- 締切済み
java scriptでのロールオーバーで現在地表示する方法について教えてください。
課題でサイトを作っていて、メニューにjava scriptでのロールオーバーを使用したいと考えています。 ロールオーバーまでは本や他のサイトさんを見たりして↓まで何とかできたのですが、 現在地がわかるように、そのページにいるときはそのボタンがマウスオーバーした状態のままにする方法がわからず途方に暮れております。 説明がわかりにくくて申し訳ありません; もし分かる方がいらっしゃいましたらお願い致します! <script language="javascript"><!-- btnImgOut = new Image(); btnImgOut.src = "img/01.gif"; btnImgOver = new Image(); btnImgOver.src = "img/01-over.gif"; function btnMouseOut(){ document.btnFormImg.src = btnImgOut.src; } function btnMouseOver(){ document.btnFormImg.src = btnImgOver.src; } //--></script> <a href="test.html" onMouseOver="btnMouseOver()" onMouseOut="btnMouseOut()"> <img border="0" name="btnFormImg" src="img/01.gif" /></a>
- pinoko000
- お礼率0% (0/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
きほんは、#No.1だとおもいます。 ちょっと、じぶんがつくっていたので、どうかな～とおもって あっぷしてみました。 ふくすうのしていができるようにかいりょうしました。 たぶめにゅーです。 ふようなら、するーしてください ばぶぅ～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <style type="text/css"> body { background-color:#cce; } #menuA { list-style-type: none; margin: 0; padding: 0; } #menuA li { display: inline; border: 1px #888 solid; padding: 0; margin:0; } #menuA li a { color:#088; } #menuA li a:hover { color:#ff0; background-color:#f0f; } </style> <ol id="menuA"> <li><a href="#menu1">menu1</a></li> <li><a href="#menu2">menu2</a></li> <li><a href="#menu3">menu3</a></li> <li><a href="#menu4">menu4</a></li> <li><a href="#menu5">menu5</a></li> </ol> <div id="menu1">page.1</div> <div id="menu2">page.2</div> <div id="menu3">page.3</div> <div id="menu4">page.4</div> <div id="menu5">page.5</div> <ol id="menuB"> <li><a href="#menu21">menu1</a></li> <li><a href="#menu22">menu2</a></li> <li><a href="#menu23">menu3</a></li> <li><a href="#menu24">menu4</a></li> <li><a href="#menu25">menu5</a></li> </ol> <div id="menu21">page.1</div> <div id="menu22">page.2</div> <div id="menu23">page.3</div> <div id="menu24">page.4</div> <div id="menu25">page.5</div> <script type="text/javascript"> //@cc_on @set @V = (@_jscript_version >= 5.5) var TabMenu = { }; TabMenu.add = (function () { return function (id, css_text) { var emt = document.getElementById(id); if (undefined === this.List) { this.List = [ ]; this.CSS = [ ]; this.Initializer(); } if (emt) { this.List.push(emt); this.CSS[id] = css_text; this.View(emt); } }; })(); TabMenu.View = (function (getCookie, setCookie) { return function (parent, target) { var cnt; var obj; var tgt; var list = parent.getElementsByTagName('A'); var id; if (undefined === target) { target = parseInt( getCookie(parent.id) ) || 0; } if (typeof target == 'number') target = list[target]; for (cnt = 0; obj = list[cnt]; cnt++) { if (id = ('' + obj.getAttribute('href'/*@, 2@*/)).match(/^#(.*)/)[1]) { if (tgt = document.getElementById(id)) { if (obj === target) { tgt.style.display = 'block'; obj.parentNode.style.cssText = this.CSS[parent.id]; setCookie( parent.id, cnt, 100); } else { tgt.style.display = 'none'; obj.parentNode.style.cssText = ''; } } } } }; })( function (name) { name = encodeURIComponent(name).replace(/([.*()])/g, '\\$1'); var value = document.cookie.match(RegExp(name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)')); return value ? decodeURIComponent(value[1]) : ''; }, function (name, value, day, path, domain) { return document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value) + '; ' + 'expires=' + new Date( (new Date) - 86400000 * -day ).toUTCString() + '; ' + (path ? 'path=' + encodeURI(path) + '; ': '') + (domain ? 'domain=' + encodeURI (domain) + '; ': ''); } ); TabMenu.Listener = (function (hasParent) { return function (evt) { var emt = evt./*@if (@V) srcElement @else@*/ target /*@end@*/; var cnt = 0; var tgt; while (tgt = TabMenu.List[cnt++]) { hasParent(emt, tgt) && TabMenu.View(tgt, emt); } }; })( //hasParent function (n, obj) { n = n.parentNode; return n ? (n === obj) ? true: arguments.callee(n, obj): false; } ); TabMenu.Finalizer = (function () { return function ( evt ) { document./*@if (@_jscript) detachEvent('on' + @else@*/ removeEventListener(/*@end@*/ 'click', TabMenu.Listener, false); /*@if (@_jscript) detachEvent ('on' + @else@*/ removeEventListener(/*@end@*/ 'unload', TabMenu.Finalizer, false); }; })(); TabMenu.Initializer = (function () { return function () { document./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'click', TabMenu.Listener, false); /*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'unload', TabMenu.Finalizer, false); }; })(); TabMenu.add('menuA', 'background-color:#600'); TabMenu.add('menuB', 'background-color:#d00'); </script> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
<style type="text/css"> #menu { list-style-type: none; margin: 0; padding: 0; } #menu li { display: inline; border: 1px #888 solid; padding: 0; margin: 0; } #menu li a { color:#088; } #menu li a:hover { color:#ff0; background-color:#f0f; } --> </style> <ol id="menu"> <li><a href="#menu1">menu1</a></li> <li><a href="#menu2">menu2</a></li> <li><a href="#menu3">menu3</a></li> <li><a href="#menu4">menu4</a></li> <li><a href="#menu5">menu5</a></li> </ol> <div id="menu1">page.1</div> <div id="menu2">page.2</div> <div id="menu3">page.3</div> <div id="menu4">page.4</div> <div id="menu5">page.5</div> <script type="text/javascript"> <!-- //@cc_on @set @V = (@_jscript_version >= 5.5) var TabMenu = { }; TabMenu.select_css = 'background-color:#600'; TabMenu.add = (function () { return function (id) { var emt = document.getElementById(id); if (undefined === this.List) { this.List = [ ]; this.Initializer(); } if (emt) { this.List.push(emt); this.View(emt); } }; })(); TabMenu.View = (function (getCookie, setCookie) { return function (parent, target) { var cnt; var obj; var tgt; var list = parent.getElementsByTagName('A'); var id; if (undefined === target) { target = parseInt( getCookie(parent.id) ) || 0; } if (typeof target == 'number') target = list[target]; for (cnt = 0; obj = list[cnt]; cnt++) { if (id = ('' + obj.getAttribute('href'/*@, 2@*/)).match(/^#(.*)/)[1]) { if (tgt = document.getElementById(id)) { if (obj === target) { tgt.style.display = 'block'; obj.parentNode.style.cssText = this.select_css; setCookie( parent.id, cnt, 100); } else { tgt.style.display = 'none'; obj.parentNode.style.cssText = ''; } } } } }; })( function (name) { name = encodeURIComponent(name).replace(/([.*()])/g, '\\$1'); var value = document.cookie.match(RegExp(name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)')); return value ? decodeURIComponent(value[1]) : ''; }, function (name, value, day, path, domain) { return document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value) + '; ' + 'expires=' + new Date( (new Date) - 86400000 * -day ).toUTCString() + '; ' + (path ? 'path=' + encodeURI(path) + '; ': '') + (domain ? 'domain=' + encodeURI (domain) + '; ': ''); } ); TabMenu.Listener = (function (hasParent) { return function (evt) { var emt = evt./*@if (@V) srcElement @else@*/ target /*@end@*/; var cnt = 0; var tgt; while (tgt = TabMenu.List[cnt++]) { hasParent(emt, tgt) && TabMenu.View(tgt, emt); } }; })( //hasParent function (n, obj) { n = n.parentNode; return n ? (n === obj) ? true: arguments.callee(n, obj): false; } ); TabMenu.Finalizer = (function () { return function ( evt ) { document./*@if (@_jscript) detachEvent('on' + @else@*/ removeEventListener(/*@end@*/ 'click', TabMenu.Listener, false); /*@if (@_jscript) detachEvent ('on' + @else@*/ removeEventListener(/*@end@*/ 'unload', TabMenu.Finalizer, false); }; })(); TabMenu.Initializer = (function () { return function () { document./*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'click', TabMenu.Listener, false); /*@if (@_jscript) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/ 'unload', TabMenu.Finalizer, false); }; })(); TabMenu.add('menu'); </script> </body> window.onloadをしようしていないので、すくりぷとは </body>のちょくぜんにおいてね！ ぜんかくくうはくは、はんかくにでもなおしてちょ！
- kalkichi
- ベストアンサー率64% (22/34)
この場合はJavaScriptではなくhtmlに直接マウスーバーの画像を静的に記述するか、サーバーサイドスクリプトで行うケースが多いと思います。 サイトの要件にもよりますが通常JavaScriptは視覚効果やユーザビリティ向上の為に補助的に用いるもので、静的に表現できるものをあえてJavaScriptでおこなう必要はありません。課題の為どうしても全てJavaScriptで、と言うのであればlocation.hrefで現在のURLが取得できますから条件分岐で該当箇所の画像をマウスオーバー画像と差し替えるファンクションをonLoadイベントに引っ掛けるとできます。
