Scribd
Upload
62 views11 pages

Image Maps

The document discusses different multimedia formats supported in HTML such as video formats MP4, WebM, and Ogg and audio formats MP3, MIDI, WAV, and Ogg. It also covers how to embed videos and audio using the <video> and <audio> tags and attributes, and how image maps allow creating clickable areas on an image using the <map> and <area> tags.

Uploaded by

ahmedaymanx100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
62 views11 pages

Image Maps

The document discusses different multimedia formats supported in HTML such as video formats MP4, WebM, and Ogg and audio formats MP3, MIDI, WAV, and Ogg. It also covers how to embed videos and audio using the <video> and <audio> tags and attributes, and how image maps allow creating clickable areas on an image using the <map> and <area> tags.

Uploaded by

ahmedaymanx100
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML

Image Map and Multimedia


HTML and Multimedia
• Browser Support
• The first web browsers had support for text only, limited to a single
font in a single color.

• Later came browsers with support for colors, fonts, images, and
multimedia.

• Multimedia elements (like audio or video) are stored in media files.


• The most common way to discover the type of a file, is to look at the
file extension.
HTML and Multimedia

• The most common video formats are:


The MP4, WebM, and Ogg formats ------- supported by HTML.
The MP4 format is recommended by YouTube.

• The most common video formats are:


• The MP3 , MIDI, WAV, and ogg
• MP3 is the best format for compressed recorded music
HTML Video
• The < video> tag is used to insert video in html pages.
• Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

The <source> element allows to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
HTML Video
• Video attributes:
• To add video controls, like play, pause, and volume, use the controls
attribute.

• To start a video automatically, use the autoplay attribute.

• To let your video start playing automatically but muted, use autoplay +
muted attribute.

• To specify that the video file will start over again, every time when it
is completed use Loop attribute.
.

HTML Audio

• The < audio> tag is used to insert audio in html pages.


• Example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

• The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.
HTML Audio
• Audio attributes:
• To add audio controls, like play, pause, and volume, use the controls
attribute.

• To start a audio automatically, use the autoplay attribute.

• To let your audio start playing automatically but muted, use autoplay +
muted attribute.

• To specify that the audio file will start over again, every time when it
is completed use Loop attribute.
HTML Image Maps

The HTML <map> tag defines an image map.


An image map is an image with clickable areas.
The areas are defined with one or more <area> tags.
Example:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

https://www.w3schools.com/html/html_images_imagemap.asp
.

HTML Image Maps


• Image Map attributes:

• The image is inserted using the <img> tag. The only difference from
other images is that you must add a usemap attribute.

• The usemap value starts with a hash tag # followed by the name of the
image map, and is used to create a relationship between the image and
the image map
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
HTML Image Maps
• The <map> element is used to create an image map, and is linked to
the image by using the required name attribute.

• A clickable area is defined using an <area> element.

•rect - defines a rectangular region


•circle - defines a circular region
•poly - defines a polygonal region
•default - defines the entire region

• href specifies the source of target html page when click on


specified area.
HTML Image Maps
The coords for shape="rect" come in pairs, one for the x-axis and one for
the y-axis.
So, the coordinates 34,44 is located 34 pixels from the left margin and 44
pixels from the top.

The coords for shape = “circle”, first locate the coordinates of the center
of the circle,
337,300 Then specify the radius of the circle, 44 pixels.

The coords for shape= “poly”, contains several coordinate points, which
creates a shape formed with straight lines (a polygon).

You might also like