ベストアンサー

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

2001/07/16 15:39

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

hirona2
お礼率77% (27/35)

オフィス系ソフト
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

inverse
ベストアンサー率25% (2/8)

2001/07/19 21:24 回答No.2

こんなのでよろしい？ <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は無いと思いますが間違いがないか、もっとスマートにできないか等は検討してみる必要があると思います。

質問者

お礼 2001/07/21 09:19

ありがとうございました。とても勉強になりました。これを基にいろいろ検討してみたいと思います。

その他の回答 (2)

next-co
ベストアンサー率28% (43/149)

2001/07/20 21:38 回答No.3

Java Scriptを使用しない場合です。 off.gifは通常のボタン、on.gifは押したボタンです。チョッと使う場合は、タグに直接書き込んだ方が楽と思います。 <img src="off.gif" onmouseover="this.src='on.gif'" onmouseout="this.src='off.gif'">

質問者