「JavaScript/js001」の編集履歴(バックアップ)一覧はこちら
「JavaScript/js001」(2010/07/20 (火) 17:22:15) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
&topicpath()
**画像を縮小して表示(javaScript)
***テーブルのレイアウト
|BGCOLOR(#eeeeee):CENTER:''フィールド名''|BGCOLOR(#eeeeee):CENTER:''データ型''|BGCOLOR(#eeeeee):|
|id|int|ID(主キー 連番)|
|subject|varchar(300)|件名|
|title|varchar(100)|ファイル名|
|type|varchar(50)|MIMEタイプ|
|idata|varbinary(MAX)|バイナリ・データ|
|last_modified|datetime|最終更新日|
***Thumbnail1.aspx
#highlight(linenumber){
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>画像を縮小して表示(JavaScript)</title>
<style type="text/css">
<!--
/* 画像リサイズ用 */
/* 100x100の領域だけ取って、表示しない。 */
/* ただし、これではスクリプトOFFだと全く表示されない。 */
img.thumb { visibility: hidden; width: 100px; height: 100px;}
//-->
</style>
<script type="text/javascript">
<!--
//一旦縦横とも"auto"にして実寸を取得。長い方を"100px"に再設定。そして表示
function Rsize(img){
img.style.width = "auto";
img.style.height = "auto";
if (img.width > img.height){
if (img.width > 100) img.style.width = "100px";
} else {
if (img.height > 100) img.style.height = "100px";
}
img.style.visibility = "visible";
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>
画像を縮小して表示(JavaScript)</h3>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">戻る</asp:HyperLink>
<p>
100px×100pxに収まるように比率を維持して縮小<br />
IE6用</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>}
***Thumbnail1.aspx.vb
#highlight(linenumber,vb){Partial Class ImageThumbnail_Thumbnail1
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 = "Image1.aspx?id=" & id.Text
image.Attributes.Add("onload", "Rsize(this)")
End If
End Sub
End Class}
***Image1.aspx
※空のページ
#highlight(linenumber){
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>画像</title>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>}
***Image1.aspx.vb
#highlight(linenumber,vb){
Imports System.Data.SqlClient
Imports System.Data
Partial Class ImageThumbnail_Image1
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 Sub
End Class}
***参考にさせていただいたページ
※現在行方不明…見つかり次第のせます
----
&topicpath()
**画像を縮小して表示(javaScript)
***テーブルのレイアウト
|BGCOLOR(#eeeeee):CENTER:''フィールド名''|BGCOLOR(#eeeeee):CENTER:''データ型''|BGCOLOR(#eeeeee):|
|id|int|ID(主キー 連番)|
|subject|varchar(300)|件名|
|title|varchar(100)|ファイル名|
|type|varchar(50)|MIMEタイプ|
|idata|varbinary(MAX)|バイナリ・データ|
|last_modified|datetime|最終更新日|
***Thumbnail1.aspx
#highlight(linenumber){
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>画像を縮小して表示(JavaScript)</title>
<style type="text/css">
<!--
/* 画像リサイズ用 */
/* 100x100の領域だけ取って、表示しない。 */
/* ただし、これではスクリプトOFFだと全く表示されない。 */
img.thumb { visibility: hidden; width: 100px; height: 100px;}
//-->
</style>
<script type="text/javascript">
<!--
//一旦縦横とも"auto"にして実寸を取得。長い方を"100px"に再設定。そして表示
function Rsize(img){
img.style.width = "auto";
img.style.height = "auto";
if (img.width > img.height){
if (img.width > 100) img.style.width = "100px";
} else {
if (img.height > 100) img.style.height = "100px";
}
img.style.visibility = "visible";
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>
画像を縮小して表示(JavaScript)</h3>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">戻る</asp:HyperLink>
<p>
100px×100pxに収まるように比率を維持して縮小<br />
IE6用</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>}
***Thumbnail1.aspx.vb
#highlight(linenumber,vb){Partial Class ImageThumbnail_Thumbnail1
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 = "Image1.aspx?id=" & id.Text
image.Attributes.Add("onload", "Rsize(this)")
End If
End Sub
End Class}
***Image1.aspx
※空のページ
#highlight(linenumber){
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>画像</title>
</head>
<body>
<form id="form1" runat="server">
</form>
</body>
</html>}
***Image1.aspx.vb
#highlight(linenumber,vb){
Imports System.Data.SqlClient
Imports System.Data
Partial Class ImageThumbnail_Image1
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 Sub
End Class}
***参考にさせていただいたページ
※現在行方不明…見つかり次第のせます
----
[Counter] Total:&counter(total)
表示オプション
横に並べて表示:
変化行の前後のみ表示: