- 1 名前： タカ 投稿日：2009/12/25(金) 19:30 ID:1cUbtG.s
- 下記jsをカスタマイズしながら勉強中ですが、ポーップアップメニューの位置指定に苦労しています。
ブラウザのサイズが変わってもそれぞれのimagesの下にくるようにするにはどのようにすればいいのでしょうか？
参考元
http://external-file.com/ja/sample/rollover_and_submenu_js_code.html
/****************************************
Rollover and SubMenu JavaScript
****************************************/
// 画像をあらかじめ読み込む（プレロード）設定
var img = new Array();
img[0] = new Image();img[0].src = "contents_t/c-concept1.gif";
img[1] = new Image();img[1].src = "contents_t/c-concept2.gif";
img[2] = new Image();img[2].src = "contents_t/c-information1.gif";
img[3] = new Image();img[3].src = "contents_t/c-information2.gif";
img[4] = new Image();img[4].src = "contents_t/c-menu1.gif";
img[5] = new Image();img[5].src = "contents_t/c-menu2.gif";
img[6] = new Image();img[6].src = "contents_t/c-gallery1.gif";
img[7] = new Image();img[7].src = "contents_t/c-gallery2.gif";
img[8] = new Image();img[8].src = "contents_t/c-access1.gif";
img[9] = new Image();img[9].src = "contents_t/c-access2.gif";
/********** ここから変更しない **********/
function change_image(name,num) {
document.images[name].src = img[num].src;
}
/********** ここまで変更しない **********/
/********** ここから各自変更すること **********/
// Menu 部分のスタイルシート設定
document.write('<style type="text/css">',
'img {border-style:none;}',
'.menu {position:absolute;visibility:hidden;font-size:80%;font-family:arial;}',
'.menulink {color:#666666;padding-left:6px;vertical-align:middle;}',
'.menulink {background:#ffffcc;}', // SubMenu の背景色設定
'.menulink a:link {background:transparent;color:#666666;text-decoration:none;}',
'.menulink a:visited {background:transparent;color:#000000;text-decoration:none;}',
'.menulink a:hover {background:transparent;color:#330066;text-decoration:none;}',
'.menulink a:active {background:transparent;color:#cc0066;text-decoration:none;}',
'.headermenu a:hover {position:relative;top:2px;left:1px;}',// HeaderMenu にカーソルが重なったときに動く処理設定
'.menulink a:hover {position:relative;top:2px;left:1px;}',// SubMenu にカーソルが重なったときに動く処理設定
'<\/style>');
// ここから Menu 部分の記述
var colorset1 = "onMouseOver=\"style.background='#ffffcc'\""; // SubMenu にカーソルが重なったときの background 色設定
var colorset2 = "onMouseOut=\"style.background='#ffffcc'\""; // SubMenu からカーソルが離れたときの background 色設定
document.write('<table border="0" cellspacing="0" cellpadding="0" width="100%" height="60"><tr><td width="10%">',
'<\/td><td>',
'<img src="logo.gif" width="142" height="32" alt="">',
'<\/td><td class="headermenu">',
'<a href="#" onmouseover=popupmenu(event,"menu1");change_image("images01",1); onmouseout=hide();change_image("images01",0); onclick=return false;><img src="contents_t/c-concept1.gif" width="136" height="20" name="images01" alt=""><\/a>',
'<\/td><td class="headermenu">',
'<a href="#" onmouseover=popupmenu(event,"menu2");change_image("images02",3); onmouseout=hide();change_image("images02",2); onclick=return false;><img src="contents_t/c-information1.gif" width="142" height="20" name="images02" alt=""><\/a>',
'<\/td><td class="headermenu">',
'<a href="#" onmouseover=popupmenu(event,"menu3",558,43);change_image("images03",5); onmouseout=hide();change_image("images03",4); onclick=return false;><img src="contents_t/c-menu1.gif" width="82" height="20" name="images03" alt=""><\/a>',
'<\/td><td class="headermenu">',
'<a href="#" onmouseover=popupmenu(event,"menu4",650,43);change_image("images04",7); onmouseout=hide();change_image("images04",6); onclick=return false;><img src="contents_t/c-gallery1.gif" width="96" height="20" name="images04" alt=""><\/a>',
'<\/td><td class="headermenu">',
'<a href="#" onmouseover=popupmenu(event,"menu5",755,43);change_image("images05",9); onmouseout=hide();change_image("images05",8); onclick=return false;><img src="contents_t/c-access1.gif" width="99" height="20" name="images05" alt=""><\/a>',
'<\/td><td width="10%">',
'<\/td><\/tr><\/table>',
以下略
-
|
/