ImageButtonのマウスオーバーで画像を別のものに置き換える方法は？

前へ 次へ
このQ&Aのポイント
  • Visual Studio 2005を使用してasp.netを開発しています。しかし、ImageButtonのマウスオーバー時に属性を使用することができません。
  • 参考にしたページには、ImageButtonでonmouseover属性を使用する方法が書かれていますが、実際にはできません。
  • どなたか、ImageButtonのマウスオーバーで画像を別のものに置き換える方法を教えていただけませんか？
回答を見る
  • ベストアンサー

ImageButtonのマウスオーバーが属性になっていません

Visual Studio 2005 を使用し、asp.netの開発を行っています。 マイクロソフトのページを見ていると、イメージボタンにて、onmouseover属性が使用でききるようなことを書いてあるのですが、実際はできません。2005になってできなくなったのでしょうか？？ 参考にしたページは以下のものです。 http://ja.gotdotnet.com/quickstart/util/srcview.aspx?path=/quickstart/aspplus/samples/webforms/ctrlref/webctrl/ImageButton/ImageButton3.src ImageButtonにて、マウスオーバー時のみ、画像を別のgifに置き換えたいのですが、方法が結局わからず困っています。 どなたか教えていただけないでしょうか？？

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

  • ベストアンサー
  • Xaval
  • ベストアンサー率58% (61/105)
回答No.1

クライアント（ブラウザ）が解釈する属性です。 ASPXは、サーバが解釈するＸＭＬドキュメントなので、未定義の属性があるとエラーを出しただけだと思います。 .NET の1.1と2.0で違うのでしょう。 この場合、（コード上）ImageButton クラスインスタンスのメソッドに、.SetAttribute() とか、.Attributes.Add( ) とか、そういう形で拡張属性がセットできませんか？ もちろんこれは、吐き出すHTML(XML)の拡張属性を追加することだけを意識します。 あとは、ブラウザにそれを解釈してもらいますので。

neco001
質問者

お礼

ううう～ん。 教えて頂いた情報を元に、調べてみましたが、今の私には少々難しいようです。 助言、どうもありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. Microsoft ASP

関連するQ&A

  • マウスオーバー

    マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>

  • フレーム間のロールオーバーでエラーがでます。

    いつも参考にさせてもらってます。 上下のフレームで、上のボタンから下の画像を変えるロールオーバーですが 画像まではどうにか変えられたのですが、リンクでスクリプトエラーが出てしまいます。 初心者でコピーして継ぎはぎしてるのでさっぱりです。 よろしくお願いします。 上のフレーム <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-language" content="ja"> <META http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <title></title> <script type="text/javascript"> <!-- img_name=new Array(); img_name[0] = "bu05-12.gif"; img_name[1] = "bu05-13.gif"; img_name[2] = "bu05-14.gif"; img_name2 = "bu05-10.gif"; img1 = new Array(); img2 = new Image(); img2.src = img_name2; for(i=0; i<img_name.length; i++) { img1[i] = new Image(); img1[i].src = img_name[i]; } function mouse_over(which) { parent.bottom.document.images["swapImg"].src=img1[which].src; } function mouse_out(which) { parent.bottom.document.images["swapImg"].src=img2.src; } //--> </script> </head> <body> <DIV id="cont"> <div id="gnavi"> <A href="*"> <IMG src="bullet007.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet007.gif'"></A> <A onmouseover="mouse_over(0)" onmouseout="mouse_out(0)" target="bottom" href="bottom-3.htm"> <IMG src="bullet008.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet008.gif'"></A> <A onmouseover="mouse_over(1)" onmouseout="mouse_out(1)" target="bottom" href="bottom-3.htm"> <IMG src="bullet009.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet009.gif'" ></A> <A onmouseover="mouse_over(2)" onmouseout="mouse_out(2)" target="bottom" href="bottom-3.htm"> <IMG src="bullet007.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet007.gif'" ></A> </div> </DIV> </body> </html> 下のフレーム <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-language" content="ja"> <META http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <title></title> </head> <body> <div id="visual"> <IMG src="bu05-10.gif" name="swapImg"> </div> </body> </html>

  • 複数の画像を連動してロールオーバーさせたいのですが

    宜しくお願い致します。 現在WEBショップを運営しているのですが、 「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、 現在、それぞれの画像は個別にはロールオーバーするのですが、 3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか？ （3つの画像のリンク先は全て同じです） どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。 宜しくお願い致します。 <td><p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="this.src='img/商品名_2.gif'" onmouseout="this.src='img/商品名_1.gif'" width="133" height="28" /></A></p> <p><A href="リンク先(1)" ><img src="img/詳細ページ_1.gif" alt="" onmouseover="this.src='img/詳細ページ_2.gif'" onmouseout="this.src='img/詳細ページ_1.gif'" width="133" height="18" /></A></p>

    • ベストアンサー
    • HTML
  • よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい

    よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 ［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> ［css］ #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか？ わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ローカルでWebページが見れない

    基本的な質問だと思いますが、どなたか教えて下さい。 Visual StudioでWebページを作り、 自分自身（Localhost）では表示できました。 が、イントラ上にある別PCから見ようとしたらみれませんでした。 （http://192.168.1.60/TableList/DataView.aspx 　で、「Internet Explorer ではこのページは表示できません」が、表示される。）　 何が足りないのでしょうか？ とりあえず、必要と思われる情報をあげておきます。 Visual Studio2005 ASP.NET2.0.50727 IIS5.1 よろしくお願い致します。

  • <object>のdata属性を動的に変えたい

    知恵を貸してください。 やりたいことは、ASP.NETでC#を使用し、フォーム上のDropDownを変更したというイベントを拾い、表示するPDFファイルを切り替えたいという事です。 PDFの表示は <object data="1.pdf" type="application/pdf" width = "100%" height ="100%" border="2"></object> のように記載しています。 このdata属性がイベントハンドラ内で変更できれば可能なのではないかと思うのですが、Web系の開発は初めてで、経験・知識不足で、この考え自体正解なのかも判断できずにいます。 開発に使用しているツールはVisual Studio 2010、ブラウザはIE８、Frameworkは4を使用しています。

  • JavaScriptで変更した属性の元の値の取得

    いつもお世話になっております。 ページの画像をとある条件で変更しようとしております。 HTML5のdata-を利用して変更後の画像のパスをimg要素内に持たせております。 JavaScriptでimg要素を取得し画像の変更は実現できております。 その後もとの画像に戻したいのですが、JavaScriptでimg要素を取得してもsrc属性が変更後の値になっており変更前の値が取得できません。 変更前の値の取得方法を教えてください。 ■HTMLソースの一部 <p><img src="img/moto.gif" alt="" data-mimage="img/ato.gif"></p> ■JavaScriptの一部 function wid(){ var image=document.getElementsByTagName('img'); if(window.innerWidth>=320){ for(var i=0;i<image.length;i++){ image.item(i).src=image.item(i).getAttribute("data-mimage"); } }else{ // ここに元の画像に戻すためのスクリプトを書きたい } } } wid関数を作ってそのなかでimg要素を取得し、条件を満たしたらすべてのimg要素のdata-mimageの属性値を元のsrc属性に上書きします。 次に条件が満たされていない場合はHTMLにもともと書いてあったsrc属性の属性値をsrc属性値に戻したいのですがこの値が取得できません。 img/moto.gifをimg/ato.gifに変更することは出来ます。 img/ato.gifに変更した後img/moto.gifに戻すことが出来ません。 もちろんdata-mimage2="img/moto.gif"を追加すれば可能なのは分かっていますが、現状のHTMLを変更することなく実現したいです。 よろしくお願いします。

  • マウスオーバーでクリックした後に出る波線のなくし方について

    最近Dreamweaverを使い始めたものです。 バナー画像を２種類作って、ビヘイビア機能を使って フレーム使用で、マウスオーバーで、クリックして、リンク先へリンクさせることはできたのですが、 クリックした後、もとの画像に戻ると、その画像の周りに波線が現れるのです。 その後、違う場所をクリックすると消えますが、最初から現れないようにするにはどうすればいいか教えてください。 コードは以下です。 <a href="＃＃.html" target="right" onmouseover="MM_swapImage('Image4','','＃2.gif',1)" onmouseout="MM_swapImgRestore()"> <img src="＃1.gif" name="Image4" width="100" height="22" border="0" id="Image4" /></a> よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • imgタグ内　name とｉｄの違い

    こんにちは、DreamWeaver8を使ってホームページの勉強を始めたものです。 スワップイメージを作成していて、imgタグ内でname属性とid属性とがでました。スワップイメージの振る舞いには何の違いもないのですが、そもそも属性がnameとidとではどのように違うのかなと思いました。 何かお分かりの方がいましたら教えてください。 よろしくお願いします。 例）上側はname,下側はid <img src="button1.gif" name="Image1" width="150" height="29" id="Image1" onmouseover="MM_swapImage('Image1','','button1-2.gif',1)" onmouseout="MM_swapImgRestore()" /> <img src="button2.gif" width="150" height="29" id="Image2" onmouseover="MM_swapImage('Image2','','button2-2.gif',1)" onmouseout="MM_swapImgRestore()" />

  • aspxファイル側でのPOST値受け取り時のエンコード

    ASP.NET開発初心者のものです。 今回業務でASP.NETを使用したWebアプリケーションの開発を行うことになったのですが、POST値の受け取りについて分からない点がでてきて困っております。 [内容] 外部Webページからaspxのページに遷移するようになっているのですが、この外部Webページから受け取るPOST値の文字コードが1つに特定できなため、受け取ったaspxページのvbクラスにてshift-jsにエンコードを行いたいのです。 どうやって行えばよいのでしょうか？調べてみたのですがわからず大変困っております。；； [開発環境] Visual studio 2005 開発言語：Visualbasic わかる方がおられましたらお知恵をお貸しいただけないでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する