Use and management of graphical controls

Web pages often contain multiple images and using an appropriate HTML tag (img) to instruct the browser to load an image and display it. ASP.NET makes it transparent to programmers using the img tag by using the Image server control that allows you to manage files of this type in the code by translating its settings.

Use the Image control is very simple, just drag it from the Toolbox on a web form like all other HTML controls. This is done is created a tag <img/>

In addition to those controls ASP.NET provides two other useful controls: ImageButton is a button where you can set an image as wallpaper, ImageMap, which allows you to map an image and divide it into areas that react differently in based on user click (think for example of a map where clicking on different regions opens a page with their features).

Create a new web form from the Toolbox and drag an Image control in it. In the Properties window of the control path to insert a picture on our computers in the ImageUrl property. Basically if you click on the button to the right of that property will see a dialog box with the items in our project (before insert the image in the project). For example, I added the image Collineazzurre.jpg to my project and I can select in this dialog

After clicking OK, here's how the page will appear

Launching the application we will see in our browser a page containing only the image.

Now add an ImageButton control to our page. As mentioned previously is a button that you can decorate with some graphics. Through this control you can manage three possible scenarios: in the first functions as a simple Button ImageButton which can be connected to the Click event on the server in seconds you can define a client-side scripting and plug the OnClientClick property of the control scripts and in the third you can tell the control to send the next request to a specific page through the property PostBackUrl. Again, this control is necessary enhance the ImageUrl property to indicate the image to display

If we write the property OnClientClick Test ASP.NET code will be modified as follows

and when you click the Test button will search the script (you'll get an error if the script does not exist)

However, if the property PostBackUrl write ~ / Validazione.aspx (created the page a few lessons ago) at the click of the button we will be redirected to this page.

Now add an ImageMap control and set any image as the ImageUrl property (I use the new "Hills azzurre.jpg"). Among the control's properties there is also hotspots. Click on the property and we will see a window where you can define the so-called hotspots (interactive areas) of the image. The Add button lets you choose what kind of place hotspots (circular, rectangular or polygonal). Insert a rectangular HOSPOT

We set the values ​​for positioning and a string (test) in the property AlternateTex

Launching the application, by placing the mouse in the area defined in the text comparrirà Try clicking and we will be redirected to Validazione.aspx (set the NavigateUrl property)

• <<Previous Lesson
• Help Index
• Next Lesson>>