Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Anchor an Element to the Correct Position On A Responsive Image?
In recent times, placing the anchor in the correct position on a responsive image has become more important. Because we encounter a lot of advertisements in our daily lives, if the anchor was not properly placed beneath the responsive image, it will make it more difficult for the user to understand that webpage.
We are using CSS and HTML to anchor an element to the correct position on a responsive image. Before we dive into the article to gain a better understanding, let's take a quick look at anchor and image tags in HTML.
Anchor tag in HTML
With its href attribute, the HTML element <a> (or anchor element) generates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else that may be addressed by a URL.
Each <a> should contain text that describes the link's final destination. When focused on the <a> element, pressing the enter key will activate the href attribute if it is present.
Syntax
Following is the syntax for anchor tag in HTML
<a href = "link"> Link Name </a>
HTML <img> tag
To insert an image inside a webpage or website, use the HTML <img> tag. In modern websites, images are linked to web pages using the <img> element, which contains space for the image. This prevents websites from directly adding images to web pages.
Syntax
Following is the syntax for img tag
<img src="" alt="" width="" height="">
To know more about anchoring an element to the correct position on a responsive image, let’s look into the following examples
Example
In the following, we are using CSS to anchor an element to the correct position on a responsive image.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
display: flex;
width: 60%;
margin: auto;
}
.type {
text-align: center;
}
.tutorial img {
max-width: 90%;
display: block;
}
</style>
<div class="tutorial">
<div class="type">
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg">
<a href="https://www.tutorialspoint.com/java/index.htm">Java Tutorial</a>
</div>
<div class="type">
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg">
<a href="https://www.tutorialspoint.com/html/index.htm">HTML Tutorial</a>
</div>
</div>
</body>
</html>
When the script gets executed, it will generate an output consisting of images uploaded on the webpage along with their respective hyperlinks attached at the bottom of their responsive image.
Example
Considering the following example, where we are placing the anchor of an element in the correct position on a responsive image.
<!DOCTYPE html>
<html>
<body>
<style>
#tutorial{
float:left;
position: relative;
}
#tutorial img {
max-width: 100%;
display: inline-block;
}
a.link1{
height:15%;
width:15%;
position: absolute;
top:60%; left:10%;
display:block;
background:#00FF00 ;
}
a.link2{
height:15%;
width:15%;
position: absolute;
top:50%;
left:76%;
display: block;
background:#FF0000;
}
</style>
<div id="tutorial">
<div>
<img src="https://www.math-english.com/media/dices/two-dices2.png">
</div>
<a href="https://www.tutorialspoint.com/html/index.htm" class="link1">HTML</a>
<a href="https://www.tutorialspoint.com/java/index.htm" class="link2">JAVA</a>
</div>
</body>
</html>
On running the above script, the output window will pop up, displaying the image uploaded on the webpage along with hyperlinks attached on either side of the image with applied CSS to the hyperlinks.
726 Views
To Continue Learning Please Login