約 5,167,265 件
https://w.atwiki.jp/v2cwiki/pages/59.html
目次 マウスオーバーからスクリプトを起動する 上記機能の使用例ニコニコ動画の動画情報をマウスオーバーでポップアップ Youtubeの動画情報をマウスオーバーでポップアップ Twitterのつぶやきをマウスオーバーでポップアップ マウスオーバーからスクリプトを起動する URLExec2.datを導入することにより、リンクをマウスオーバーする際、V2Cのスクリプトを実行することができるようになりました。(V2C独自拡張) URLExec2.datの概要については こちら を参照してください。 上記機能の使用例 ニコニコ動画の動画情報をマウスオーバーでポップアップ Youtubeの動画情報をマウスオーバーでポップアップ Twitterのつぶやきをマウスオーバーでポップアップ ニコニコ動画の動画情報をマウスオーバーでポップアップ +PopupStatusNicovideo.js を展開 概要 備考 [T20110217]以降でポップアップのリンク先を開く場合、ネットワーク接続の許可が必要になりました。${V2CSCRIPT Fr}を、${V2CSCRIPT SFr}に変更してください。 元レス http //yy61.60.kg/test/read.cgi/v2cj/1252074124/352 http //yy61.60.kg/test/read.cgi/v2cj/1365215326/307 設定方法 1.こちらの移動先から PopupStatusNicovideo.js をダウンロードする。 2.ファイルを解凍しスクリプトとフォルダすべてをV2C保存用フォルダのscriptフォルダに入れる。（scriptフォルダがなければ作成する。） 3.V2C保存用フォルダのURLExec2.datの任意の箇所に下記のような内容を記述する。（URLExec2.datがなければメモ帳等のテキストエディタを利用し文字コードをshift-jisにして作成する。） http //(www\.|tw\.|es\.|de\.|)nicovideon?\.jp/(? (? watch|thumb)(? _naisho|_result)?(? \?v=|/)|\?p=)(\w+)http //$1nicovideo.jp/watch/$2${V2CSCRIPT SFr} PopupStatusNicovideo.js http //tn-skr\.smilevideo\.jp/smile\?i=(\d+)http //www.nicovideo.jp/watch/sm$1${V2CSCRIPT SFr} PopupStatusNicovideo.js http //(? www\.)?smilevideo\.jp/view/(\d+)http //www.nicovideo.jp/watch/sm$1${V2CSCRIPT SFr} PopupStatusNicovideo.js http //(? (? nicopon\.jp|home\.1555\.info)/(? video/(? player|src)|getflv)|nicosns\.inventor\.jp/download|(? www\.)?nicometer\.net/video|nicosen\.net|niconail\.info)/(\w+)http //www.nicovideo.jp/watch/$1${V2CSCRIPT SFr} PopupStatusNicovideo.js http //(? nico\.webdeki-hp\.com|jbbs\.livedoor\.jp/auto/5849)/\?(\w{2}\d+)$http //www.nicovideo.jp/watch/$1${V2CSCRIPT SFr} PopupStatusNicovideo.js 4.V2Cを再起動、または「メインメニュー」→「ファイル」→「再読み込み」→「URLExec2.dat」から、設定ファイルを再読み込み。 これでスレに貼られたニコニコ動画のURLにマウスオーバーするとその動画の情報がポップアップされるはずです。 URL判定の正規表現は配布されているImageViewURLReplace.datやURLExec.dat等を参考にしましょう。 コメント 名前 コメント ↓解決済み -- 名無しさん (2013-12-29 02 45 15) ニコニコ動画：GINZAになってからエラーが出るようです 下記を参照して修正して下さい http //yy61.60.kg/test/read.cgi/v2cj/1365215326/307 -- GINZAによる仕様変更 (2013-12-19 02 53 11) Youtubeの動画情報をマウスオーバーでポップアップ +PopupStatusYoutube.js を展開 概要 Youtube動画情報のポップアップ ※この画像は初期のもので現在は表示が異なります 備考 フォルダ内の「使い方.txt」参照 他細かい設定は、スクリプトファイル内「//設定」行以下にあります。 元レス http //yy61.60.kg/test/read.cgi/v2cj/1252074124/408 http //yy61.60.kg/test/read.cgi/v2cj/1304861674/11,103,117 http //yy61.60.kg/test/read.cgi/v2cj/1365215326/131 設定方法 1. こちらの移動先にある『PopupStatusYoutube.js』から同ファイルをダウンロードします。 2. ファイルを解凍しスクリプトをV2C保存用フォルダのscriptフォルダに入れる。（フォルダがなければ作成する。） 外部コマンドを使用する場合 3. スクリプトの「設定方法」 を参考にしてください。 URLExec2.datを使用する場合 3. V2C保存用フォルダのURLExec2.datの任意の箇所に下記のような内容を記述する。（URLExec2.datがなければメモ帳等のテキストエディタを利用し文字コードをshift-jisにして作成する。） https? //(? \w+\.)?youtube\.(? \w+|co\.\w+)/.*?v=[\-_\w]{11}.*【TAB】$ 【TAB】${V2CSCRIPT FrxS} PopupStatusYoutube.js 短縮URLの場合は以下を記述する。 http //youtu\.be/[\-_\w]{11}【TAB】$ 【TAB】${V2CSCRIPT FrxS} PopupStatusYoutube.js ※【TAB】はTABキーで置換 4. V2Cを再起動、または「メインメニュー」→「ファイル」→「再読み込み」→「URLExec2.dat」から、設定ファイルを再読み込み。 URL判定の正規表現は配布されているImageViewURLReplace.datやURLExec.dat等を参考にしましょう。 【登録場所】 リンク・URLExec コメント 名前 コメント Twitterのつぶやきをマウスオーバーでポップアップ +popupTweet.js を展開 概要 下記のようなURLにマウスオーバーすると内容をポップアップします。 http //twitter.com/n_or_a/status/21318031826 設定方法 1.こちらの移動先から popupTweet(HTML版) popupTweetAPI.js(API版) をダウンロードする。 API版は以下の制限がありますが、html版より多少高速です。 時間辺りのアクセス回数制限がある(150回/h 今後仕様変更される可能性あり） リツイート人数がうまく反映されない(ポップアップ上では0と表示される) 2.ファイルを解凍しスクリプトをV2C保存用フォルダのscriptフォルダに入れる。（フォルダがなければ作成する。） 両者に同梱されているpopupTweetフォルダの中身は同じなので、両方のスクリプトを導入する場合はどちらかのフォルダだけで構いません。 3.V2C保存用フォルダのURLExec2.datの任意の箇所に下記のような内容を記述する。（URLExec2.datがなければメモ帳等のテキストエディタを利用し文字コードをshift-jisにして作成する。） HTML版 https? //twitter\.com/(? #!/)?[^/]+?/status/\d+ $ ${V2CSCRIPT Fr} popupTweet.js API版 https? //twitter\.com/(? #!/)?[^/]+?/status/\d+ $ ${V2CSCRIPT FrS} popupTweetAPI.js 4.V2Cを再起動、または「メインメニュー」→「ファイル」→「再読み込み」→「URLExec2.dat」から、設定ファイルを再読み込み。 元レス popuptTweet.js(HTML版) ：http //yy61.60.kg/test/read.cgi/v2cj/1252074124/375 popupTweetAPI.js(API版)：http //yy61.60.kg/test/read.cgi/v2cj/1252074124/396 備考 popupTwitterInfo.jsとの違い 参照： popupTwitterInfo.jsの備考 コメント 名前 コメント +popupTwitterInfo.js を展開 目次 概要URLがツイートの場合 URLがユーザーアカウントの場合 設定方法外部コマンド(URL上右クリックメニューから選択して起動)で使用する場合【登録場所】 【ラベル】 【コマンド】 URLExec(該当URLをマウスクリック/マウスオーバーでポップアップ)で使用する場合ユーザーポップアップを設定する場合の注意 元レス 備考 コメント 概要 リンク先のTwitterアドレスから情報を取得し、ポップアップで表示します。 URLがツイートの場合 URLがユーザーアカウントの場合 設定方法 外部コマンド(URL上右クリックメニューから選択して起動)で使用する場合 こちらの移動先にある『popupTwitterInfo.js』から同ファイルをダウンロードします。 その後の設定方法については スクリプトの「設定方法」 を参考にしてください。 【登録場所】 リンク 【ラベル】 Twitter情報ポップアップ 【コマンド】 デフォルトのテンプレートで表示する場合 ${SCRIPT FrS} popupTwitterInfo.js popupTweetフォルダ内の任意のテンプレートファイルを指定する場合 ${SCRIPT FrS} popupTwitterInfo.js テンプレートのファイル名 URLExec(該当URLをマウスクリック/マウスオーバーでポップアップ)で使用する場合 クリックでの起動の場合はURLExec.dat、マウスオーバーでの起動の場合はURLExec2.datを使用します。 (参考：URLExec.dat,マウスオーバー) 下記説明を見て必要な方を作成してください。 1.scriptフォルダへ本スクリプト配置(ここまでは外部コマンドと同様) 2.V2C保存用フォルダのURLExec.dat/URLExec2.datの任意の箇所に下記のような内容を記述する。（URLExec.dadt/URLExec2.datがなければメモ帳等のテキストエディタを利用し文字コードをshift-jisにして作成する Twitter ユーザーポップアップ https? //(? \w+\.)?twitter\.com/(? #!/)?(\w+)[#/]?$【TAB】http //twitter.com/$1【TAB】${V2CSCRIPT FrS} popupTwitterInfo.js Twitter ステータスポップアップ https? //(? (? \w+\.)?twitter\.com|twtr.jp/user)/(? #!/)?([^/])+/status(? es)?/(\d+)(?!/photo)【TAB】http //twitter.com/$1/status/$2[TAB}${V2CSCRIPT FrS} ※【TAB】はTABキーで置換して下さい 3.V2Cを再起動、または「メインメニュー」→「ファイル」→「再読み込み」→「URLExec.dat/URLExec2.dat」から、設定ファイルを再読み込み。 ユーザーポップアップを設定する場合の注意 V2Cでの下記デフォルト動作が本スクリプトによるポップアップ動作に置き換えられます。 URLExec.datに設定した場合、クリックによるUserTimeLine表示が本スクリプト動作に置き換えられる。 URLExec2.datに設定した場合、Twitterタブにおけるメンション(@username)のマウスオーバーが本スクリプト動作に置き換えられる。 元レス http //yy61.60.kg/test/read.cgi/v2cj/1252074124/667 http //yy61.60.kg/test/read.cgi/v2cj/1365215326/111 備考 時間辺りのアクセス回数制限がある(150回/h 今後仕様変更される可能性あり）スクリプト内の19行目のvar showRemainingHits = false;のfalseをtrueにするとステータスバーに残り回数が表示されます。(余計な通信を行うので設定しない場合と比較して動作が遅くなる可能性があります) popupTweet.jsとの違いユーザー情報の表示が可能、ツイート情報表示時にもユーザー情報が表示される APIによる取得に失敗した場合、html経由での再取得は行わない テンプレート格納用のpopupTweetフォルダはpopupTweet.jsと共用。また、popupTweet.jsのテンプレートも使用可能。 コメント 名前 コメント
https://w.atwiki.jp/ulilith-face/pages/52.html
マウスオーバーによるアイテム表示の応用（１） LinkedItemキーとPushed～～・MouseOver～～系のキーを組み合わせて クリック／マウスオーバーで他の複数のアイテムを表示・非表示させる例を説明します。 マウスオーバーで文字表示を変化させる まずは、複数の文字アイテムを連動させ、文字色を変えることにより マウスオーバー／クリック時に内容を切り替えるような表示にする例を紹介します。 ↓のzipファイル内にあるフェイスを表示してみてください。 mouseover_test1.zip ボリュームバーが２つ表示されます。 上のバーは特に仕掛けはありません。 それに対して、下のバーはクリック／マウスオーバーすると 左側の「Volume」の文字列アイテムが消え、同じ場所にボリュームの数値が表示されます。 この仕掛けは、以下の３つの設定をすることにより実現可能です。 『「Volume」の文字列アイテム』は、クリック／マウスオーバー時の文字色を透明にする（キーを省略するのではなく、PushedTextColor・MouseOverTextColorどちらも0x00000000に設定する） 『ボリューム数値の文字列アイテム』は、通常時の文字色は透明に（TextColorキーを省略するか、0x00000000に設定）し、クリック／マウスオーバー時のみ文字色を設定する ボリュームバーのLinkedItemキーに、『「Volume」の文字列アイテム』と『ボリューム数値の文字列アイテム』を指定する こうすると、『「Volume」の文字列アイテム』の文字色は クリック／マウスオーバー時は透明なので消えますが、 『ボリューム数値の文字列アイテム』のクリック／マウスオーバー時の文字色は 通常の色で設定されているので、クリック／マウスオーバー時のみこのアイテムが表示されます。 ※見た目では色が透明なのでどちらかが消えているように見えますが、 フェイスアイテムとしては常にどちらも「表示されている」状態になっています。 マウスオーバーでボタン画像を変化させる 今度は、画像アイテムで作った操作ボタンを組み合わせた例を紹介します。 ↓のzipファイル内にあるフェイスを表示してみてください。 mouseover_test2.zip 左右バランスを操作するバーが２つ表示されます。 バーの右の「Pan Reset」の部分は画像で表示しています。 先ほどの例と同じく、上のバーは特に仕掛けはありません。 「Pan Reset」部分のバランスリセットボタンも普通に表示・動作します。 それに対して、下のバーはクリック／マウスオーバーすると 右側の「Pan Reset」の画像アイテムが消え、同じ場所に左右バランス数値が表示されます。 （この数値表示はStringImageFileキーを指定した、画像による文字表示になっています） 「Pan Reset」部分のリセットボタンをクリックすると上のものと同じく 普通通りにクリック時の色に（画像に）変化します。 この仕掛けは、以下の設定をすることにより実現可能です。 １．まず、『「Pan Reset」の画像アイテム』（リセットボタン）を２つのアイテムに分ける 「通常時のみ表示されるアイテム（Ａ）」と 「マウスオーバー／クリック時のみに表示されるアイテム（Ｂ）」の２つに分けます。 「通常時のみのアイテム（Ａ）」は、 ImageFileには普通に画像ファイルを指定 PushedImageFile・MouseOverImageFileはキーを省略せずに透明の画像ファイル（サイズは小さくても可）を指定 「マウスオーバー／クリック時のみのアイテム（Ｂ）」には、 ImageFileキーは省略する PushedImageFile・MouseOverImageFileには、普通に画像ファイルを指定 上記のように画像を指定します。 そして、どちらか一方をクリック可能にして（コマンドを設定し）、 もう一方のアイテムをLinkedItemキーで表示を連動させておきます。 （サンプルフェイスでは（Ｂ）のほうにコマンドを設定しています） ※アイテムを２つに分けないと、 バーとの連動を優先して「マウスオーバー／クリック時の画像」を透明にしただけの場合、 バー操作中は問題なくても バランスリセットしようとしてこのボタンを押したときも画像が消えてしまうことになります。 ２．『左右バランス数値の文字列アイテム』の画像を設定する 通常時は透明に、マウスオーバー／クリック時のみ見えるように設定します。 PushedStringImageFile・MouseOverStringImageFileには、普通に文字表示に使用する画像ファイルを指定する StringImageFileキーは、キーを省略せずに、PushedStringImageFile・MouseOverStringImageFileで指定した画像ファイルと同じ大きさの透明の画像ファイルを指定する ※通常時のみ非表示にしようとしてStringImageFileキーを省略するとエラーになります。 また、文字画像の１文字あたりの表示サイズはStringImageFileの画像のサイズで決まるので StringImageFileに指定する透明画像は PushedStringImageFile・MouseOverStringImageFileの画像とあわせた縦横サイズにしてください。 ３．左右バランスバーのLinkedItemを設定する バーのLinkedItemキーには、 『通常時のみに表示される「Pan Reset」の画像アイテム（Ａ）』と 『左右バランス数値の文字列アイテム』を指定する 以上の設定をすることにより、 左右バランスバーの操作中は バーと連動してリセットボタンの画像を透明にして（消したように見せかけて） バランス数値を表示するようにしつつ、 リセットボタンを押したときは普通通りに操作・画像を表示させることができます。
https://w.atwiki.jp/chaka-poko/pages/33.html
画像を縮小表示する（ASP.NET） メモ 透過GIFは透過でなくなってしまう。Bitmapに変換してから縮小しているから？ テーブルのレイアウト フィールド名 データ型 id int ID（主キー 連番） subject varchar(300) 件名 title varchar(100) ファイル名 type varchar(50) MIMEタイプ idata varbinary(MAX) バイナリ・データ last_modified datetime 最終更新日 Thumbnail2.aspx html xmlns="http //www.w3.org/1999/xhtml" head runat="server" title 画像を縮小して表示（ASP.NET） /title /head body form id="form1" runat="server" h3 画像を縮小して表示 ASP.NET版 /h3 asp HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx" 戻る /asp HyperLink p 100px×100pxに収まるように比率を維持して縮小 /p asp DataList ID="DataList1" runat="server" DataKeyField="id" DataSourceID="SqlDataSource1" ItemTemplate strong id /strong asp Label ID="lblId" runat="server" Text= %# Eval("id") % /asp Label strong subject /strong asp Label ID="lblSubject" runat="server" Text= %# Eval("subject") % /asp Label br / asp Image ID="imgIdata" runat="server" CssClass="thumb" / br / hr / /ItemTemplate /asp DataList asp SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString=" %$ ConnectionStrings NetWorks01ConnectionString % " SelectCommand="SELECT [id], [subject] FROM [d_Image]" /asp SqlDataSource /form /body /html Thumbnail2.aspx.vb Partial Class ImageThumbnail_Thumbnail2 Inherits System.Web.UI.Page Protected Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.ItemDataBound If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then Dim id As Label = CType(e.Item.FindControl("lblId"), Label) Dim image As Image = CType(e.Item.FindControl("imgIdata"), Image) image.ImageUrl = "Image2.aspx?id=" id.Text End If End SubEnd Class Image2.aspx ※空のページ html xmlns="http //www.w3.org/1999/xhtml" head runat="server" title 画像 /title /head body form id="form1" runat="server" div /div /form /body /html Image2.aspx.vb Imports System.Data.SqlClientImports System.Data Partial Class ImageThumbnail_Image2 Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 選択されたIDの画像をDBから取り出して表示する。 Dim id As Integer id = Request.QueryString("id") Dim db As New SqlConnection(ConfigurationManager.AppSettings("dbstr")) Dim cmd As SqlCommand = New SqlCommand("SELECT type,idata FROM d_Image WHERE id=@p1", db) Dim p1 As SqlParameter = cmd.Parameters.Add("@p1", SqlDbType.Int) p1.Value = id db.Open() Dim rs As SqlDataReader = cmd.ExecuteReader() If rs.Read Then Dim oW As Integer = 100 サムネイル表示サイズ横 Dim oH As Integer = 100 サムネイル表示サイズ縦 Dim bmp As System.Drawing.Bitmap = System.Drawing.Bitmap.FromStream(New System.IO.MemoryStream(DirectCast(rs("idata"), Byte()))) If bmp.Width oW Or bmp.Height oH Then Dim s As Double = Math.Min(oW / bmp.Width, oH / bmp.Height) Dim sW As Integer = CInt(s * bmp.Width) Dim sH As Integer = CInt(s * bmp.Height) Dim outBmp As System.Drawing.Bitmap = New System.Drawing.Bitmap(sW, sH) Using g As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(outBmp) g.DrawImage(bmp, 0, 0, sW, sH) End Using Response.ContentType = CType(rs("type"), String) outBmp.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg) Else Response.ContentType = CType(rs("type"), String) Response.BinaryWrite(DirectCast(rs("idata"), Byte())) End If Response.End() End If rs.Close() db.Close() End SubEnd Class 参考にさせていただいたページ C# と VB.NET の質問掲示板：GridViewにDBの画像を縦横比保持して縮小表示するには [Counter] Total： -
https://w.atwiki.jp/ulilith-face/pages/53.html
マウスオーバーによるアイテム表示の応用（２） LinkedItemキーとPushed～～・MouseOver～～系のキーの組み合わせの応用で、 「通常時は文字表示のみ表示され、 マウスオーバー時のみ操作ボタンが表示されるフェイス」の作り方を説明します。 まずは、↓のzipファイル内にあるフェイスを表示してみてください。 mouseover_test3.zip このようなフェイスが表示されます。 このフェイスを作成するには、 再生操作ボタンの画像アイテムと文字列アイテムのクリック／マウスオーバー状態を連動させる必要があります。 フェイスの作り方(1) 「ImageFileキーは省略し、 PushedImageFile・MouseOverImageFileキーで クリック／マウスオーバー時のみ画像を設定し、DisableRegion = Trueに設定した」 再生操作ボタンのアイテムと、 「PushedTextColor・MouseOverTextColorどちらも 0x00000000（完全透明）に設定した」文字列アイテムを組み合わせることで 作成できます。 再生操作ボタンアイテムのLinkedItemキーに 文字列アイテムのフィールド名を指定してください。 とりあえずフェイスとしては使用可能な状態ですが、この状態ではまだ完成はしていません。 実際に操作してみると分かると思いますが このままでは「操作しているボタン以外は表示されない」ため 上手くマウスカーソルを当てないとどこにボタンがあるか分かりにくくなっています。 このフェイスにいくつか別のアイテムを追加することで使いやすくしていきます。 フェイスの作り方(2) 補助アイテムの追加 各操作ボタンと同じ場所に、 「他のボタンをクリック／マウスオーバー中のみ表示される画像アイテム」を追加し、 LinkedItemキーを設定することで ウィンドウ上の操作ボタンどれかをクリック／マウスオーバー中は 必ず他のボタンも表示されるようにすることができます。 ウィンドウ自体にマウスカーソルを置いていないときはボタンは消えたままになります。 ↓のzipファイル内のフェイスで、以下の設定を追加しているので 実際にiniファイルを見比べてみてください。 mouseover_test4.zip 詳しい設定の仕方は以下のとおりです。 １．各操作ボタンと同じ場所に、 クリック／マウスオーバー時のみ画像を設定したDynamicImageアイテムの 「別画像アイテム」を配置する ここで設定する画像は、「通常時の（マウスオーバー／クリック時以外の）画像」 （普通のフェイスならImageFileキーで指定するほうの画像）を指定します。 EnableキーはFalseに設定します。 ２．各操作ボタンのLinkedItemキーに、 その操作ボタン以外全ての、１で追加した画像アイテムのフィールドを追加で指定する 例えばこのページのサンプルフェイスなら、再生ボタンであれば 前の曲・一時停止・停止・次の曲の４つ全ての「別画像アイテム」を連動させます。 ※コマンドを設定しているボタンではなく、追加した方のアイテムを連動させてください。 この２つだけでも問題ありませんが、次の３の設定もするとさらに操作しやすくなります。 ３．操作ボタンがある部分全体より少し広めに（外枠部分を避けるくらいの大きさで） サイズを指定しただけの、画像無し・透明のDynamicImageアイテムを追加し、 Enable = TrueとCommand = MainWindowDragを指定して クリックに反応するだけの（ウィンドウ移動はできる）領域を作る LinkedItemキーには文字列アイテム全てと １で追加した「別画像アイテム」全てを指定しておく このアイテムを設定することにより、操作ボタンがある部分にマウスカーソルが近づくと 自動的に操作ボタンすべてを表示させることができます。 このアイテムにはMouseCursor = Normalを設定しておくと、 この領域にカーソルがあるときも指カーソルに変化させずに済みます。 なお、このアイテムを配置する場合はPriorityキーで指定する表示優先度に気をつけてください。 操作ボタンよりも高い優先度にすると、このアイテムの当たり判定のほうが優先されて 他のボタンが操作不能になってしまいます。 以上の設定で、 どのボタンをクリック／マウスオーバー中でも、 また各操作ボタンがある部分の周囲にマウスカーソルがあるときでも 文字表示を消し、すべての操作ボタンを自動的に表示するようにすることができます。 このように表示されます。 その他補足説明など フェイス上に表示させるボタンを増やしたいときは、 ini内にフィールドを追加するのと同時に、 他のボタンのLinkedItemキーで連動させるアイテムも増やすのを忘れないようにしてください。 シークバーなどのスライダアイテムや、 StringImageFileを使用した画像による文字表示などを使用する場合は、 通常時の画像ファイル（ImageFile・StringImageFile）は省略せずに クリック／マウスオーバー時に使用する画像と同じ縦横サイズの透明な画像を指定してください。
https://w.atwiki.jp/chaka-poko/pages/28.html
DBに登録したバイナリデータをDataListに表示 テーブルのレイアウト d_Image フィールド名 データ型 id int ID（主キー 連番） subject varchar(300) 件名 title varchar(100) ファイル名 type varchar(50) MIMEタイプ idata varbinary(MAX) バイナリ・データ last_modified datetime 最終更新日 Image_List.aspx html xmlns="http //www.w3.org/1999/xhtml" head runat="server" title バイナリ・データをDataListに表示 /title /head body form id="form1" runat="server" h3 バイナリ・データをDataListに表示 /h3 asp DataList ID="DataList1" runat="server" DataKeyField="id" DataSourceID="SqlDataSource1" ItemTemplate strong id /strong asp Label ID="lblId" runat="server" Text= %# Eval("id") % /asp Label strong subject /strong asp Label ID="lblSubject" runat="server" Text= %# Eval("subject") % /asp Label br / asp Image ID="imgIdata" runat="server" / br / hr / /ItemTemplate /asp DataList asp SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString=" %$ ConnectionStrings NetWorks01ConnectionString % " SelectCommand="SELECT [id], [subject] FROM [d_Image]" /asp SqlDataSource /form /body /html Image_list.aspx.vb Partial Class ImageThumbnail_ImageList Inherits System.Web.UI.Page Protected Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles DataList1.ItemDataBound If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then Dim id As Label = CType(e.Item.FindControl("lblId"), Label) Dim image As Image = CType(e.Item.FindControl("imgIdata"), Image) image.ImageUrl = "Image.aspx?id=" id.Text End If End SubEnd Class Image.aspx ※空のページ html xmlns="http //www.w3.org/1999/xhtml" head runat="server" title 画像 /title /head body form id="form1" runat="server" /form /body /html Image.aspx.vb Imports System.Data.SqlClientImports System.Data Partial Class ImageThumbnail_Image Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 選択されたIDの画像をDBから取り出して表示する。 Dim id As Integer id = Request.QueryString("id") Dim db As New SqlConnection(ConfigurationManager.AppSettings("dbstr")) Dim cmd As SqlCommand = New SqlCommand("SELECT type,idata FROM d_Image WHERE id=@p1", db) Dim p1 As SqlParameter = cmd.Parameters.Add("@p1", SqlDbType.Int) p1.Value = id db.Open() Dim rs As SqlDataReader = cmd.ExecuteReader() If rs.Read Then Response.ContentType = CType(rs("type"), String) Response.BinaryWrite(DirectCast(rs("idata"), Byte())) Response.End() End If rs.Close() db.Close() End SubEnd Class [Counter] Total： -
https://w.atwiki.jp/chaka-poko/pages/30.html
バイナリ・データを表示する テーブルのレイアウト フィールド名 データ型 id int ID（主キー 連番） subject varchar(300) 件名 title varchar(100) ファイル名 type varchar(50) MIMEタイプ idata varbinary(MAX) バイナリ・データ last_modified datetime 最終更新日 ImageShow.aspx html xmlns="http //www.w3.org/1999/xhtml" head runat="server" title イメージの表示 /title /head body form id="form1" runat="server" h3 データベースに登録したバイナリデータを表示する /h3 asp DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="title" DataValueField="id" /asp DropDownList asp Button ID="Button1" runat="server" Text="表示" / asp SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString=" %$ ConnectionStrings NetWorks01ConnectionString % " SelectCommand="SELECT [id], [title] FROM [d_Image]" /asp SqlDataSource /form /body /html ImageShow.aspx.vb Imports System.Data.SqlClientImports System.Data Partial Class ImageShow_ImageShow Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Dim id As Integer id = Me.DropDownList1.SelectedValue Dim db As New SqlConnection(ConfigurationManager.AppSettings("dbstr")) Dim cmd As SqlCommand = New SqlCommand("SELECT type,idata FROM d_Image WHERE id=@p1", db) Dim p1 As SqlParameter = cmd.Parameters.Add("@p1", SqlDbType.Int) p1.Value = id db.Open() Dim rs As SqlDataReader = cmd.ExecuteReader() If rs.Read Then Response.ContentType = CType(rs("type"), String) Response.BinaryWrite(DirectCast(rs("idata"), Byte())) Response.End() End If rs.Close() db.Close() End SubEnd Class 参考にさせていただいたページ @IT NET.TIPS：データベースに登録したバイナリ・データを表示するには？ [Counter] Total： -
https://w.atwiki.jp/nicepaper/pages/78.html
色々なWebサイトでナビゲーションのメニュー部分にマウスを乗っけた時に、その部分が「勝手に変わった！」なんて経験ありますよね？ これには様々な方法がありますが、今回はCSSでできる方法を取り上げたいと思います。 マウスを乗っけることを「マウスオーバー」といいます。そのマウスオーバーの挙動を設定するプロパティを「hoverプロパティ」といい、今回はこれを用います。 hoverとは対象の画像や文字といったオブジェクトの上にマウスが乗っかった時に行う挙動を指定するcssの擬似クラスです。 今回は実際のWebページでの使用例の中でも、Javascriptを使わずにできる良い方法を３つ紹介します。 目次 hoverプロパティの基本的な使い方 １，マウスオーバー時に背景を透過させる ２，cssのbackgroundの画像を変更させる ３，overflowを用いた方法 以下コピペ用 hoverプロパティの基本的な使い方 擬似クラスなので対象のセレクタ名に「 hover」をつけ、マウスオーバー時の動作を書いていきます。 #nav1 a hover{ font-family Georgia, "Times New Roman", Times, serif; background #FFB; } 今回はフォントを変え、背景を変えるように記述しました。 実行結果は以下のようになります。 １，マウスオーバー時に背景を透過させる 画像を透過させることでマウスオーバーを分かりやすくします。 #nav2 a hover{ background rgba(255,255,255,0.7); } 以下、実行結果になります。 メリット：1つの画像なので実装が簡単 デメリット デザイン性としては普通 ２，cssのbackgroundの画像を変更させる 画像を２つ用意して(今回はpencil.pngとpencil_hover.png)、hover時に別画像を埋め込んで表示させます。 用意した画像は #image #image #nav3 li a { height 50px; width 200px; padding-top 30px; font-size 18px; text-decoration none;background url(pencil.png);/* ここを追記 */ } #nav3 a hover{ background url(pencil_hover.png) /* ここを追記 */ } 以下、実行結果です。 メリット：感覚的には分かりやすい デメリット：背景は変更できるが、テキストの表現がCSS依存のみになってしまう ３，overflowを用いた方法 先ほどの２の方法で出たデメリットを解消できるのがこの方法です。 まず、overflowプロパティとは、ボックス内に画像を表示するときに、はみ出た部分をどうするか、というプロパティです。 そこでoverflowを用いた方法では「２つの画像をくっつけた画像」を使用します。 imageプラグインエラー ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (hover2type.JPG) この方法のメリットは、CSSでは表現できないテキストのデザイン、を使うことが出来る、という点です。 CSSのa部分に #nav4 a { overflow hidden; /* はみ出た部分は隠す */ padding 0; } CSSのa hover内に #nav4 a hover{ margin-top -80px;/* 表示する際にボックスの上80pxから描画する */ } という記述を追加しましょう。 すると このような状態になり、見事にマウスオーバー時に下の画像が表示されることになります。 以下、実行結果になります。 メリット：CSSでは表現できないテキストのデザイン デメリット 画像を作る手間 以下コピペ用 HTML !DOCTYPE HTML html head meta charset="utf-8" title 150603_hover /title link rel="stylesheet" href="reset.css" link rel="stylesheet" href="150603_hover.css" /head body div id="wrapper" div id="nav1" ul li a href="#" hover /a /li li a href="#" hover /a /li li a href="#" hover /a /li /ul /div div id="blank" /div div id="nav2" ul li a href="#" opacity /a /li li a href="#" opacity /a /li li a href="#" opacity /a /li /ul /div div id="blank" /div div id="nav3" ul li a href="#" background /a /li li a href="#" background /a /li li a href="#" background /a /li /ul /div div id="blank" /div div id="nav4" ul li a href="#" img src="home2type.png" alt="HOME" /a /li li a href="#" img src="home2type.png" alt="HOME" /a /li li a href="#" img src="home2type.png" alt="HOME" /a /li /ul /div /div /body /html CSS @charset "utf-8"; /* CSS Document */ #wrapper {/* 全体を真ん中に */ margin 30px auto; width 800px; height 800px; } #blank { /* 複数のnavを同時に表示させるためだけのもの */ clear both; width 100px; height 100px; } /* #nav1記述部 */ #nav1 ul { height 80px; margin 0; padding 0; border 1px solid #000; line-height 1.0; background #BFF; } #nav1 li,#nav1 li a { display block; } #nav1 li { height 80px; float left; width 200px; margin 0; padding 0; text-align center; border-right 1px solid #000; } #nav1 li a { height 50px; width 200px; padding-top 30px; font-size 18px; text-decoration none; } #nav1 a hover{ text-shadow #666; font-family Georgia, "Times New Roman", Times, serif; background #FFB; } /* #nav2記述部 */ #nav2 ul { height 80px; margin 0; padding 0; border 1px solid #000; line-height 1.0; background #BFF; } #nav2 li,#nav2 li a { display block; } #nav2 li { height 80px; float left; width 200px; margin 0; padding 0; text-align center; border-right 1px solid #000; } #nav2 li a { height 50px; width 200px; padding-top 30px; font-size 18px; text-decoration none; } #nav2 a hover{ background rgba(255,255,255,0.7); /* opacityプロパティでも良い */ } /* #nav3記述部 */ #nav3 ul { height 80px; margin 0 0 10px 0; padding 0; border 1px solid #000; line-height 1.0; background #BFF; } #nav3 li,#nav3 li a { display block; } #nav3 li { height 80px; float left; width 200px; margin 0; padding 0; text-align center; border-right 1px solid #000; } #nav3 li a { height 50px; width 200px; padding-top 30px; font-size 18px; text-decoration none; background url(pencil.png);/* １つ目の画像を設定しておく */ } #nav3 a hover{ background url(pencil_hover.png)/* hover時に２つ目の画像を埋め込んで表示 */ } /* #nav4記述部 */ #nav4 ul { overflow hidden;/* overflowプロパティを設定、liでも良い */ height 80px; margin 0; padding 0; border 1px solid #000; line-height 1.0; background #BFF; } #nav4 li,#nav4 li a { display block; } #nav4 li { height 80px; float left; width 200px; margin 0; padding 0; text-align center; border-right 1px solid #000; } #nav4 li a { height 50px; width 200px; padding-top 0;/* ここでは画像を表示させるために、0px。あえて記述。なくても良い。 */ font-size 18px; text-decoration none; } #nav4 a hover{ margin-top -80px;/* 下の画像を表示 */ } 実行結果
https://w.atwiki.jp/restinpiece/pages/28.html
ASP.NET 特に記述がない場合はASP.NET2.0の情報です^^^ ASP.NET技術サイト 配列 テクニックファイルDL＆UP DB操作 正規表現 Table コントロール その他 技術サイト 主婦のASP 連載：Visual Studio 2005でいってみようDBプログラミング － ＠IT .NET TIPS msdn2 配列 配列に指定した値がいるか調査 配列の重複を取り除く関数 テクニック ファイルDL＆UP ファイルダウンロード ファイルアップロード ASP.NET 1.1 JavaScriptを用いたクライアントサイドの処理 ***メール メール送信 DB操作 ASP.NET ADD.NETでDB接続・更新・表示 ASP.NET テーブルの列名取得 DB関数 正規表現 ASP.NET 正規表現の使い方(コード) Table コントロール テーブルコントロール Table Web サーバー コントロールに行およびセルを動的に追加する 未編集 ソースコードでtableコントロール書いて中にコントロール追加するサンプル(説明無し) その他 デバッグ情報表示 ASP.NET GRIDVIEWで隠し列作成 GridViewのテンプレートフィールドに行番号割当 FormView 未編集(いろいろコントロール説明無し自分専用)
https://w.atwiki.jp/sevenlives/pages/1635.html
ScriptManager? ASP.NET Dynamic Data? ASP.NET MVC Webフォーム? .NET Framework ASP.NET 2? ASP.NET 3? ASP.NET 4?
https://w.atwiki.jp/chaka-poko/pages/29.html
バイナリ・データをデータベースに登録する テーブルのレイアウト フィールド名 データ型 id int ID（主キー 連番） subject varchar(300) 件名 title varchar(100) ファイル名 type varchar(50) MIMEタイプ idata varbinary(MAX) バイナリ・データ last_modified datetime 最終更新日 ImageUpload.aspx html xmlns="http //www.w3.org/1999/xhtml" head runat="server" title 画像のアップロード /title /head body form id="form1" runat="server" h3 バイナリ・データをデータベースに格納する /h3 件名： asp TextBox ID="TextBox1" runat="server" /asp TextBox br / 画像： asp FileUpload ID="FileUpload1" runat="server" / asp Button ID="Button1" runat="server" Text="更新" / /form /body /html ImageUpload.aspx.vb Imports System.Data.SqlClientImports System.DataImports System.IO Partial Class ImageUpload_ImageUpload Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click アップロードファイルをバイト配列で取り出して、データベースのバイナリ列に保存する。 Dim db As New SqlConnection(ConfigurationManager.AppSettings("dbstr")) Dim cmd As SqlCommand = _ New SqlCommand("INSERT INTO d_Image(subject,title,type,idata,last_modified) VALUES @p1,@p2,@p3,@p4,@p5)", db) Dim p1 As SqlParameter = cmd.Parameters.Add("@p1", SqlDbType.VarChar, 100) p1.Value = Me.TextBox1.Text Dim p2 As SqlParameter = cmd.Parameters.Add("@p2", SqlDbType.VarChar, 100) p2.Value = Path.GetFileName(Me.FileUpload1.PostedFile.FileName) Dim p3 As SqlParameter = cmd.Parameters.Add("@p3", SqlDbType.VarChar, 50) p3.Value = Me.FileUpload1.PostedFile.ContentType Dim p4 As SqlParameter = cmd.Parameters.Add("@p4", SqlDbType.VarBinary) p4.Value = Me.FileUpload1.FileBytes Dim p5 As SqlParameter = cmd.Parameters.Add("@p5", SqlDbType.DateTime) p5.Value = Now() db.Open() cmd.ExecuteNonQuery() db.Close() Me.TextBox1.Text = "" End Sub End Class 参考にさせていただいたページ @IT NET.TIPS：バイナリ・データをアップロードしてデータベースに登録するには？ [Counter] Total： -