Главная » Языки программирования и собственно написание компьютерных программ

Вывод увеличенного изображения в Web-форме(ASP.NET, Visual Basic)

Отображение изображения в Web-форме является тривиальной задачей. Для ее решения Visual Studio имеет класс Image пространства имен System.Web.UI.WebControls. С помощью свойства ImageUrl этого класса задаем URL-адреc изображения, посредством AlternateText задаем альтернативный текст, отображаемый в элементе управления Image, когда изображение недоступно. Немножко усложним задачу и поставим ее в следующем виде. На странице имеем некоторое изображение, при щелчке мышью на нем изображение увеличивается вдвое без перезагрузки Web-страницы.

Сначала решим эту задачу, используя исключительно HTML-разметку с небольшим включением программного кода на JavaScript. Очень удобно выполнить HTML-разметку в редакторе Visual Studio, поэтому запустим систему VB2010 и создадим новый проект из шаблона Empty ASP.NET Web Application, назовем его Web-изображение. К текущему проекту добавим HTML-страницу. Для этого в пункте меню Project выберем команду Add New Item и в появившемся окне дважды щелкнем по шаблону HTML Page. Далее на вкладке HTMLPage1.htm введем текст, представленный в листинге 90.1.

Увеличение изображения в Web-форме (HTML-код)

<!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="//www.w3.org/1999/xhtml">
<head>
<title>Щелкнуть мышью для увеличения</title>
</head>
<body>
<imgsrc="poryv.png"width="100"height="100"
alt="Двойной щелчок возвращает в исходный размер"
onclick="this.src=’poryv.png’;this.height=200;this.width=200"
ondblclick="this.src=’poryv.png’;this.height=100;this.width=100"/>
</body>
</html>

В приведенной разметке в качестве атрибутов тега <img>, размечающего изображение, записаны две обработки событий onclick (щелчок мышью на изображении) и ondblclick (двойной щелчок) на JavaScript. Теперь для просмотра этой страницы в браузере мы можем нажать клавишу <F5> или непосредственно открыть файл HTMLPage1.htm, например, в Internet Explorer.

Теперь решим эту же задачу программированием на VB2010. Для этого добавим в текущий проект новую Web-форму. В пункте меню Project выполним команду Add New Item и в появившемся окне выберем шаблон Web Form. На вкладке конструктора формы перетащим из панели Toolbox элемент управления изображения Image, а на вкладке программного кода WebForm1.aspx напишем текст, представленный ниже:

Увеличение изображения в Web-форме (VB2010-код)

‘ На странице имеем изображение — файл poryv.png, при щелчке мышью на
‘ нем изображение увеличивается вдвое без перезагрузки Web-страницы.
PublicClass WebForm1
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)Handles Me.Load
Page.Title ="Щелкнуть мышью для увеличения"
‘ Указываем виртуальный путь к файлу изображения:
Image1.ImageUrl = Request.ApplicationPath + "poryv.png"
‘ Получаем URL, который используется в браузере:
DimадресAsString = ResolveClientUrl(Image1.ImageUrl)
‘ Добавляем атрибут Alt:
Image1.AlternateText = "Двойной щелчок возвращает в исходный размер"
‘ Добавляем два события Javascript:
Image1.Attributes.Add("onclick","this.src=’" &amp; адрес &amp; "’;this.height=200;this.width=200")
Image1.Attributes.Add("ondblclick","this.src=’" &amp; адрес &amp; "’;this.height=100;this.width=100")
EndSub
EndClass

Как видно из программного кода, кроме двух очевидных свойств объекта Image1ImageUrl и AlternateText свойство Attributes добавляет объекту Image1 два события JavaScript. Нам пришлось включать таким образом события JavaScript, поскольку объект Image1 не имеет событий мыши.

Поставим другую, более интересную задачу. На Web-странице имеем изображение, например, мужчины. Это изображение используем для ссылки на другую Web-страницу, например, на WebForm1.aspx. Причем при наведении на него указателя мыши происходит смена изображения на изображение женщины.

Для решения этой задачи добавим в текущий проект еще одну HTML-страницу и на вкладке разметки HTMLPage2.htm напишем следующий код:

Смена изображения в Web-форме (HTML-код)

<!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="//www.w3.org/1999/xhtml">
<head>
<title>Смена изображения при наведении</title>
</head>
<body>
<ahref="HTMLPage1.htm">
<imgonmouseover="this.src=’g.jpg’"onmouseout="this.src=’m.jpg’"
alt="Щелкните, чтобы перейти на HTMLPage1.htm"
src="m.jpg"border="0"/> </a>
</body>
</html>

Здесь тег <a> обеспечивает гиперссылку на другую Web-страницу — HTMLPage1.htm, причем в качестве гиперссылки используется изображение m.jpg (изображение мужчины). Это изображение меняется на изображение женщины (файл g.jpg) при наведении на него указателя мыши (JavaScript-событие OnMouseOver) и возвращается в исходное, когда указатель мыши покидает элемент (событие OnMouseOver).

Установим в качестве стартовой страницы проекта файл HTMLPage2.htm. Для этого в контекстном меню окна Solution Explorer для этого файла укажем Set As Start Page.

Для решения этой же задачи с помощью VB2010 в текущий проект добавим новую Web-форму — WebForm2.aspx. В конструкторе формы добавим из панели Toolbox элемент управления ImageButton, отображающий изображение и отвечающий на нажатия на нем кнопки мыши. На вкладке программного кода этой формы напишем текст программы:

Смена изображения в Web-формы (VВ2010-код)

‘ На Web-странице имеем изображение, например, мужчины — файл
‘ m.jpg. Это изображение используем для ссылки на другую
‘ Web-страницу, например, на WebForm1.aspx. Причем при наведении
‘ на него указателя мыши происходит смена изображения на изображение
‘ женщины — файл g.jpg
PublicClass WebForm2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)Handles Me.Load
‘ Элемент управления ImageButton отображает изображение и
‘ отвечает за нажатия на нем указателя мыши:
ImageButton1.PostBackUrl = "WebForm1.aspx"
‘ Указываем виртуальный путь к файлу изображения:
ImageButton1.ImageUrl = Request.ApplicationPath + "m.jpg"
‘ Задаем альтернативный текст:
ImageButton1.AlternateText = "Щелкните,чтобы перейти на WebForm1.aspx"
‘ Добавляем два события Javascript:
ImageButton1.Attributes.Add("onmouseover","this.src=’g.jpg’")
ImageButton1.Attributes.Add("onmouseout","this.src=’m.jpg’")
EndSub
EndClass

Как видно из программного кода, мы использовали те же приемы, что и в предыдущей задаче.

Добавить комментарий

Ваш комментарий появится после модерации.