Image and Image Mapping


  <!DOCTYPE html>

<html>

<body>


<h3>image</h3>


<p>

<!--  src - Specifies the path to the image

//alt - Specifies an alternate text for the image -->

   

<img src="C:\Users\ASUS\OneDrive\Desktop\IP Program\vcet.jpg" alt="vcet logo">


</body>

</html>





<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title> image map</title>

    </head>

<body>

    <img src="C:\Users\ASUS\OneDrive\Desktop\IP Program\vcet.jpg" usemap="#logomap" alt="Vcet logo" width="100" height="200">

   

    <map name="logomap">

       

        <area shape="circle" coords="40,92,50," alt="Computer" href="rose.html">

      </map>

       

</body>

</html>

   

       




In the first example, the <img> tag is used to display an image on a webpage. The src attribute specifies the location or path of the image file, while the alt attribute provides alternative text that describes the image. The alternative text plays an important role in web accessibility, as it helps screen readers interpret the image content for visually impaired users and appears if the image fails to load. This example uses a local file path, which means the image will only be visible on the specific system where the file exists. For publishing on the web, it is recommended to use relative paths or hosted image URLs instead of local system paths.

The second example introduces the concept of an image map. An image map allows specific regions within a single image to function as clickable links. This is achieved by using the usemap attribute within the <img> tag, which connects the image to a <map> element. Inside the <map> element, one or more <area> tags define clickable regions. Each <area> specifies attributes such as shape (e.g., circle, rectangle), coords (which determine the size and position of the clickable area), and href (which defines the destination link). In this case, clicking the defined circular region redirects the user to “rose.html.”

Together, these examples illustrate how images can be both visually informative and interactive, enhancing user experience and functionality in modern web design.

Comments

Post a Comment

Popular posts from this blog

INTERNET PROGRAMMING SYLLABUS

Velammal College of Engineering and Technology, Madurai – 625 009  (Autonomous)  Department of Computer Science and Engineering Course Code-Title  21CS209 Internet Programming  Course Component Professional Core Contact Hours Lecture  Tutorial  Practical  Total Hours  Credit 3  0  0  45  3 Course Assessment  methods  Continuous  Semester-end assessment Tutorials  Internal Assessment  Assignments Student Course exit survey Prerequisite   Courses: Knowledge in   • Basic knowledge in programming  Course Objective • To explain HTML5 and CSS3 elements to create webpages  • To describe java scripts to build interactive webpages at client side. • To demonstrate java servlets and JSP for building web application with client  server communication  • To build dynamic web applications using PHP and AJAX  • To construct web application using web services and XML Course ...
Read more

Text Book

  T1. Deitel and Deitel and Nieto, “Internet and World Wide Web - How to Program”, 5th Edition, Prentice Hall,2011. Internet and World Wide Web: How to Program is a comprehensive guide to understanding web technologies and modern internet programming. This book covers the fundamental concepts of how the Internet works, along with practical techniques for developing interactive and dynamic websites. It introduces essential web development languages and tools such as HTML, CSS, JavaScript, and server-side programming. Readers learn how to design, build, and deploy web applications while understanding networking basics, web protocols, and browser functionality. Designed for students and beginners in computer science and web development, this book combines theoretical knowledge with hands-on programming examples. It helps readers develop problem-solving skills and practical experience needed to create professional web applications. Whether you are starting your journey in web devel...
Read more