ドロップダウンメニューその3
このサイトで使っているマウスが乗った時に、画像を変更する方法にドロップダウンメニューをプラスしてみた。やり方が分からないから、一つ一つの画像に、onmouseoverとonmouseoutを当てて、Javaスクリプトを書いた。結果、ソースも長ったらしくなるし、Javaスクリプトもなんだか長い…。
なんだかよくわからないが、Javaスクリプトにはライブラリなんてのもあって、それを使うとソースそのものはすっきりするのかもしれないが、さっぱりわからない…。
HTML
<ul id="dropmenubar">
<li><a href="#" class="menu"><img src="image/home01.png" width="110" height="30" alt="ホーム" /></a></li>
<li><a href="#" class="menu" id="menu1" onmouseover="menuopen(1); imgon('about1img');" onmouseout="menuclosetime(); imgoff('about1img');">
<img id="about1img" src="image/about01.png" width="110" height="30" alt="概要" /></a>
<div class="submenu" id="submenu1" onmouseover="cancelclose()" onmouseout="menuclosetime();">
<a href="#" onmouseover="imgon('about2img');" onmouseout="imgoff('about2img');">
<img id="about2img" src="image/about01.png" width="110" height="30" alt="概要" /></a>
<a href="#" onmouseover="imgon('about3img');" onmouseout="imgoff('about3img');">
<img id="about3img" src="image/about01.png" width="110" height="30" alt="概要" /></a>
<a href="#" onmouseover="imgon('about4img');" onmouseout="imgoff('about4img');">
<img id="about4img" src="image/about01.png" width="110" height="30" alt="概要" /></a>
<a href="#" onmouseover="imgon('about5img');" onmouseout="imgoff('about5img');">
<img id="about5img" src="image/about01.png" width="110" height="30" alt="概要" /></a>
</div>
</li>
<li><a href="#" class="menu" id="menu2" onmouseover="menuopen(2); imgon('ict1img');" onmouseout="menuclosetime(); imgoff('ict1img');">
<img id="ict1img" src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
<div class="submenu" id="submenu2" onmouseover="cancelclose()" onmouseout="menuclosetime();">
<a href="#" onmouseover="imgon('ict2img');" onmouseout="imgoff('ict2img');">
<img id="ict2img" src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
<a href="#" onmouseover="imgon('ict3img');" onmouseout="imgoff('ict3img');">
<img id="ict3img" src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
<a href="#" onmouseover="imgon('ict4img');" onmouseout="imgoff('ict4img');">
<img id="ict4img" src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
<a href="#" onmouseover="imgon('ict5img');" onmouseout="imgoff('ict5img');">
<img id="ict5img" src="image/ict01.png" width="110" height="30" alt="ICT" /></a>
</div>
</li>
<li><a href="#" class="menu" id="menu3" onmouseover="menuopen(3); imgon('yamahatsu1img');" onmouseout="menuclosetime(); imgoff('yamahatsu1img');">
<img id="yamahatsu1img" src="image/yamahatsu01.png" width="110" height="30" alt="山初" /></a>
<div class="submenu" id="submenu3" onmouseover="cancelclose()" onmouseout="menuclosetime();">
<a href="#" onmouseover="imgon('yamahatsu2img');" onmouseout="imgoff('yamahatsu2img');">
<img id="yamahatsu2img" src="image/yamahatsu01.png" width="110" height="30" alt="山初" /></a>
<a href="#" onmouseover="imgon('yamahatsu3img');" onmouseout="imgoff('yamahatsu3img');">
<img id="yamahatsu3img" src="image/yamahatsu01.png" width="110" height="30" alt="山初" /></a>
</div>
</li>
<li><a href="#" class="menu" onmouseover="imgon('contact1img');" onmouseout="imgoff('contact1img');">
<img id="contact1img" src="image/contact01.png" width="110" height="30" alt="お問い合わせ" /></a>
</li>
</ul>
CSS
#dropmenubar {
margin:0;
padding:0;
}
#dropmenubar li {
float:left;
margin:0;
padding:0;
list-style:none;
}
#dropmenubar li a.menu {
margin:0;
padding:0;
display:block;
}
.submenu {
visibility:hidden;
position:absolute;
z-index:3;
}
.submenu a {
margin:0;
padding:0;
display: block;
}
JS
/* onmouseonoff_dropdown */
var TimeOut = 100;
var currentLayer = null;
var currentitem = null;
var currentLayerNum = 0;
var noClose = 0;
var closeTimer = null;
if (document.images) {
var about1img_on=new Image();
about1img_on.src="image/about01mo.png";
var about1img_off=new Image();
about1img_off.src="image/about01.png";
var ict1img_on=new Image();
ict1img_on.src="image/ict01mo.png";
var ict1img_off=new Image();
ict1img_off.src="image/ict01.png";
var yamahatsu1img_on=new Image();
yamahatsu1img_on.src="image/yamahatsu01mo.png";
var yamahatsu1img_off=new Image();
yamahatsu1img_off.src="image/yamahatsu01.png";
var contact1img_on=new Image();
contact1img_on.src="image/contact01mo.png";
var contact1img_off=new Image();
contact1img_off.src="image/contact01.png";
var about2img_on=new Image();
about2img_on.src="image/about01mo.png";
var about2img_off=new Image();
about2img_off.src="image/about01.png";
var about3img_on=new Image();
about3img_on.src="image/about01mo.png";
var about3img_off=new Image();
about3img_off.src="image/about01.png";
var about4img_on=new Image();
about4img_on.src="image/about01mo.png";
var about4img_off=new Image();
about4img_off.src="image/about01.png";
var about5img_on=new Image();
about5img_on.src="image/about01mo.png";
var about5img_off=new Image();
about5img_off.src="image/about01.png";
var ict2img_on=new Image();
ict2img_on.src="image/ict01mo.png";
var ict2img_off=new Image();
ict2img_off.src="image/ict01.png";
var ict3img_on=new Image();
ict3img_on.src="image/ict01mo.png";
var ict3img_off=new Image();
ict3img_off.src="image/ict01.png";
var ict4img_on=new Image();
ict4img_on.src="image/ict01mo.png";
var ict4img_off=new Image();
ict4img_off.src="image/ict01.png";
var ict5img_on=new Image();
ict5img_on.src="image/ict01mo.png";
var ict5img_off=new Image();
ict5img_off.src="image/ict01.png";
var yamahatsu2img_on=new Image();
yamahatsu2img_on.src="image/yamahatsu01mo.png";
var yamahatsu2img_off=new Image();
yamahatsu2img_off.src="image/yamahatsu01.png";
var yamahatsu3img_on=new Image();
yamahatsu3img_on.src="image/yamahatsu01mo.png";
var yamahatsu3img_off=new Image();
yamahatsu3img_off.src="image/yamahatsu01.png";
}
function imgon(name) {
if(document.images) {
document.images[name].src=eval(name+'_on.src');
}
}
function imgoff(name) {
if(document.images){
document.images[name].src=eval(name+'_off.src');
}
}
function menuopen(n) {
var sub = document.getElementById("submenu" + n);
var main = document.getElementById("menu" + n);
if(sub) {
cancelclose();
sub.style.visibility='visible';
if(currentLayer && (currentLayerNum != n))
currentLayer.style.visibility='hidden';
currentLayer = sub;
currentitem = main;
currentLayerNum = n;
} else if(currentLayer) {
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentitem = null;
currentLayer = null;
}
}
function menuclosetime() {
closeTimer = window.setTimeout(menuclose, TimeOut);
}
function cancelclose() {
if(closeTimer) {
window.clearTimeout(closeTimer);
closeTimer = null;
}
}
function menuclose() {
if(currentLayer && noClose!=1) {
currentLayer.style.visibility='hidden';
currentLayerNum = 0;
currentLayer = null;
currentitem = null;
} else {
noClose = 0;
}
currentLayer = null;
currentitem = null;
}
document.onclick = menuclose;