OKWAVEパソコン版の推奨環境変更のお知らせ
  • ベストアンサー

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

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

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

  • ベストアンサー
  • inverse
  • ベストアンサー率25% (2/8)
回答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は無いと思いますが間違いがないか、もっとスマートにできないか等は検討してみる必要があると思います。

hirona2
質問者

お礼

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

その他の回答 (2)

  • next-co
  • ベストアンサー率28% (43/149)
回答No.3

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

hirona2
質問者

お礼

ありがとうございました。 早速やってみます。

  • inverse
  • ベストアンサー率25% (2/8)
回答No.1

FP2000はあまり詳しくないので申し訳ないのですけれども、 JavaScriptで画像を変える方法はご存知でしょうか? それともそれを簡単な操作で作りたいということでしょうか。

hirona2
質問者

補足

JavaScriptを使ってやってみたんですが、全然うまくいかなくて。 まったく解らないので、何か解りやすい方法があればと思い質問しました。

関連するQ&A

専門家に質問してみよう