マウスオーバーが解りません。

解決済

質問者：hirona2
質問日時：2001/07/16 15:39
回答数：3件

フロントページ2000を使用。
ホバーボタンのように自作したボタンを使ってマウスオーバーをしたいのですが、
どうしたらよいのか解りません。
どなたか解りやすく教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： inverse
回答日時：2001/07/19 21:24

こんなのでよろしい？

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Page-Enter" content="revealTrans(transition=12,duration=1)">
<meta http-equiv="Page-Exit" content="revealTrans(transition=12,duration=1)">
<meta name="copyright" content="meg">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>サンプル</title>
<style type="text/css">
.Button01OFF{background-image: url('off.gif')}
.Button01ON{background-image: url('on.gif')}
.Button01CLK{background-image: url('click.gif')}
</style>
<script language="JavaScript">
//↓↓↓↓↓↓↓↓↓IMG タグ用↓↓↓↓↓↓↓↓↓
function overmouseIMG(elem,pict){
//カーソルが乗ったら
elem.src= pict
}
function outmouseIMG(elem,pict){
//カーソルが降りたら
elem.src= pict
}
function clickmouseIMG(elem,pict,url){
//カーソルがクリックしたら
elem.src= pict
document.location = url
}
//↑↑↑↑↑↑↑↑↑IMG タグ用↑↑↑↑↑↑↑↑↑
//↓↓↓↓↓↓↓↓↓DIV タグ用↓↓↓↓↓↓↓↓↓
function overmouseDIV(elem,pict)
{
//カーソルが乗ったら
elem.className = pict
}
function outmouseDIV(elem,pict){
//カーソルが降りたら
elem.className= pict
}
function clickmouseDIV(elem,pict,url){
//カーソルがクリックしたら
elem.className= pict
document.location = url
}
//↑↑↑↑↑↑↑↑↑DIV タグ用↑↑↑↑↑↑↑↓↓
</script></head>
<body>
<Div id ="button01" style="position:absolute;top:50px;left:100px;height:150px;width:150px"><img border="0" src="off.gif" style="width:150px; height=100px;"
onmouseover="overmouseIMG(this,'on.gif')" onmouseout="outmouseIMG(this,'off.gif')" onclick="clickmouseIMG(this,'click.gif','http://homepage1.nifty.com/axzy')" width="156" height="104">↑知り合いのサイトです。</Div>
<Div id ="button02" style="position:absolute;top:300px;left:100px;height:100px;width:150px" class="Button01OFF" onmouseover="overmouseDIV(this,'Button01ON')" onmouseout="outmouseDIV(this,'Button01OFF')" onclick="clickmouseDIV(this,'Button01CLK','http://homepage1.nifty.com/axzy')"><font color="#C0C0C0">知り合いのサイトです。</font></Div>
<Div style="position: absolute; top: 88; left: 292; width: 233; height: 52">←DIVタグをScriptでコントロール。</Div>
<Div style="position: absolute; top: 323; left: 280; width: 233; height: 52">←IMGタグをScriptでコントロール。</Div>
</body></html>

txtにコピー＆ペーストしてhtmlに。
on.gifとoff.gifとclick.gifを作って同じ場所に。

と一応二通り作ってみました。どうでしょうか。
Scriptでbackground-image: url('xxx')}を変える方法がわからなかったので(←素人)Classでいじってみました。
ScriptERRORは無いと思いますが間違いがないか、もっとスマートにできないか等は検討してみる必要があると思います。