XHTML 1.0 Tutorials - Understanding Inline Images and Image Maps--tutorial.jcwcn.com

A collection of 8 FAQs/tutorials tips on XHTML image and image map elements. Clear answers are provided with tutorial exercises on inline images and image maps: image elements and image sizes; floating images and animated images, server-side and client-side image maps. Topics included in this collection are:

What Is an IMG Tag/Element?
What Are the Attributes of an IMG Element?
How To Reduce the Display Size of an Image?
How To Float an Image to the Right Side?
What Is an Animated Image?
What Is a Server-Side Image Map?
What Is a Client-Side Image Map?
What Is a MAP Tag/Element?

Please note that all notes and tutorials are based on XHTML 1.0 specification.

What Is an IMG Tag/Element?

A "img" element is an inline element that you can use to define an inline image to be included in a XHTML document. Here are basic rules about an "img" element:

"img" elements are inline elements.
A "img" element must have empty content.
A "img" element requires an attribute called "src" to specify the URL of the image file.
A "img" element requires an attribute called "alt" to specify the name of the image.
A "img" element will cause browsers to fetch the image, and displayed it inline in a paragraph block. The image name will be displayed when users mouse over the image.

Here is a simple example of an "img" element:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Inline Images</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   What's the image title? 
   <img src="moonrise.jpg" alt="Moonrise"/>
   Mouse over the image to find out.</p>
 </body>
</html>

If you save the above document as inline_image.html, download this image file and view it with Internet Explorer, you will see an image embedded inline in a text paragraph as shown below:
Inline Images

What Are the Attributes of an IMG Element?

There are 4 commonly used attributes for an "img" element:

"src" - Required attribute. Used to specify the URL of the image file.
"alt" - Required attribute. Used to specify the name of the image.
"width" - Optional attribute. Used to specify the width of the image.
"height" - Optional attribute. Used to specify the height of the image.

Here is a tutorial example of an "img" element with all 4 attributes:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Image Attributes</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   What is the size of this image? 
   <img src="moonrise.jpg" alt="Moonrise"
    width="69" height="91"/>
   width="69" and height="91".</p>
 </body>
</html>

If you save the above document as image_attributes.html, download this image file and view it with Internet Explorer, you will see an image embedded inline with width and height attributes in a text paragraph as shown below:
Images Attributes

How To Reduce the Display Size of an Image?

If an image embedded inline is too big when displayed in a browser, you can use "width" and "height" attributes to reduce the image's display size. The display width and height should be proportional to the actual width and height of the image. Otherwise, the image will be displayed with a distortion.

Here is a tutorial example of images with reduced sizes:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Image Sizes</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   Image with the original size: 
   <img src="moonrise.jpg" alt="Moonrise"
    width="69" height="91"/><br/>
   Image with a reduced size: 
   <img src="moonrise.jpg" alt="Moonrise"
    width="35" height="45"/></p>
 </body>
</html>

If you save the above document as image_sizes.html, and view it with Internet Explorer, you will see that the same image is displayed with two sizes as shown below:
Image Sizes

How To Float an Image to the Right Side?

If you want to float an image to the right side of the paragraph instead of inline within a text line, you have to use the CSS property "float" to do this. The "float" property takes two values:

"float: left" - Specifies that the image to be floated to the left side of the paragraph.
"float: right" - Specifies that the image to be floated to the right side of the paragraph.

Here is a tutorial example with an image floated to the right side:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Floating Image</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   <img src="moonrise.jpg" alt="Moonrise"
    width="69" height="91" style="float: right"/>
   "Moonrise" is a very simple to use, yet very accurate
   program. If you put it in your Startup folder, it will
   greet you everyday with the day's sunrise, sunset, 
   moonrise, moonset, and twilight times.</p>
 </body>
</html>

If you save the above document as floating_image.html, and view it with Internet Explorer, you will see an image floated to the right side of the paragraph as shown below:
Floating Image

What Is an Animated Image?

An animated image is a special image file saved in animated GIF format. When an animated image is displayed in a browser window, multiple image frames will be displayed in sequence to form a simple animation.

Here is a tutorial example with a server-side image map:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Animated GIF Image</title>
 </head>
 <body>
  <h4>Animated GIF Image</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   Are you getting lots of emails these days?
   <img src="lots_of_email.gif" alt="Lots of email"/>
   I am.</p>
 </body>
</html>

If you save the above document as animated_image.html, download this animated GIF image file and view it with Internet Explorer, you will see an animated image embedded inline in a text paragraph as shown below:
Animated GIF Images

What Is a Server-Side Image Map?

A server-side image map is an image inside a hyper link. The image must be defined with the "ismap" attribute in the "img" element. When a server-side image map is clicked in a browser window, the mouse coordinates will be delivered to the server by them to the end of the URL of the link in the format of "?x,y".

Here is a tutorial example with a server-side image map:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Server-Side Image Map</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   This is a server-side image map test. 
   <a href="http://localhost/mapping?var=val">Click this
   image <img src="moonrise.jpg" alt="Moonrise"
    width="69" height="91" ismap="ismap"/>
   to see what happens.</a> Use browser back button to 
   come back.</p>
 </body>
</html>

If you save the above document as server_image_map.html, and view it with Internet Explorer, you will see an image in a hyper-link as shown below:
Server-Side Image Map

What Is a Client-Side Image Map?

A client-side image map is an image defined with the "ismap" attribute and the "usemap" attribute. When a client-side image map is clicked in a browser window, the browser will take mouse coordinates and map them to a predefined image map entry, to retrieve a target URL. The browser will then redirects to that URL. Here are the rules about "ismap" and "usemap" attributes:

ismap="ismap" - Specifies that the image is either a server-side image map or a client-side image map.
usemap="#mapReference" - Specifies that the image is a client-side image map, and the map is defined at the specified map reference.

Here is a tutorial example of how to define a client-side image map:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Client-Side Image Map</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   This is a client-side image map test. 
   Click this image <img src="moonrise.jpg" alt="Moonrise"
    width="69" height="91" ismap="ismap" usemap="#mymap"/>
   to see what happens. Use browser back button to come 
   back.</p>
 </body>
</html>

If you save the above document as client_image_map.html, and view it with Internet Explorer, you will see an image. You can click it. But nothing will happen, because there is no map entries defined.
Client Image Map

What Is a MAP Tag/Element?

A "map" element is special inline element that you to define map entries to be used by image maps. Here are some basic rules on "map" elements:

"map" elements are inline elements.
"map" elements can not have text contents.
"map" elements should have "area" elements as sub-elements.
A "map" element requires the "id" attribute to be specified.
A "map" element should have the "name" attribute specified a reference name to be used by an image map with the "usemap" attribute.
Each "area" element inside a "map" element defines a map entry for the browser to look up based on the mouse coordinates on the image map .

Here is a tutorial example of an client-side image map with map entries defined:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Image Map Entries</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   This is a client-side image map test. 
   Click this image <img src="moonrise.jpg" alt="Moonrise"
    width="69" height="91" ismap="ismap" usemap="#mymap"/>
   to see what happens. Use browser back button to come 
   back.
   <map id="map1" name="mymap">
    <area href="http://localhost/upperLeft" 
     alt="Upper Left" coords="1,1,35,45"/>
    <area href="http://localhost/upperRight" 
     alt="Upper Right" coords="36,1,69,45"/>
    <area href="http://localhost/lowerLeft" 
     alt="Lower Left" coords="1,46,35,91"/>
    <area href="http://localhost/lowerRight" 
     alt="Lower Right" coords="36,46,69,91"/>
   </map>
  </p>
 </body>
</html>

If you save the above document as image_map_entries.html, and view it with Internet Explorer, you will see an image embedded in a paragraph. Click different parts of the image to see what happens.
Image Map Entries

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

XHTML 1.0 Tutorials - Understanding Inline Images and Image Maps

relation tutorial

Category

New

Hot