Tips for keeping a link in place on an image

Trying to place a link on a 1920x1080 picture and keep it fixed in one spot, regardless of browser size. Any suggestions?

<!DOCTYPE html>
<link rel="stylesheet" href="../style.css" />

<html>
    <head>
        <title>My Website</title>
    </head>

    <body>
        <div class="myImage">
            <img
                src="image.png"
                alt="This is a 1920x1080 image"
                usemap="#myWorkmap"
                height="1080"
                width="1920"
            />
        </div>
    </body>

    <map name="myWorkmap">
        <area shape="rect" coords="910, 730, 1031, 758" alt="This is a link to another HTML page" href="index2.html" />
    </map>

</html>
htmlcss

Answer №1

I have made the necessary adjustments for you by suggesting to use percentages for better positioning.

<!DOCTYPE html>
<link rel="stylesheet" href="../style.css" />

<html>

<head>
  <title>My Website</title>
</head>

<body>
  <div class="myImage">
    <img src="image.png" alt="This is a 1920x1080 image" usemap="#myWorkmap" height="1080" width="1920" />
  </div>
  <map name="myWorkmap">
    <area shape="rect" coords="910,730,1031,758" alt="This is a link to another HTML page" href="index2.html" />
  </map>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

defiant underscore refusing to function

I'm currently working on a text editor, but I'm facing an issue with the remove underline functionality that doesn't seem to be working as expected. For reference, you can check out a working code example here: jsfiddle Below is the part of ...

javascripthtmlcssunderline

Utilizing XPath to retrieve text from a hyperlink

I'm currently using Python with Xpath to scrape Reddit, specifically working on extracting links and displaying their titles on the front page. To do this, I'm utilizing the Scrapy framework and conducting tests in the Scrapy shell. I'm stru ...

pythonhtmlxpathscrapy

Struggling to change the div content with ajax response transmitted through php

I would like to apologize in advance if this question has already been addressed elsewhere. After conducting a search, I came across several relevant posts that have guided me to this point. Below is the form snippet containing 1 input box, a button, and ...

javascriptphpjqueryhtmlajax

Tips for handling the !important declaration when creating a customized bootstrap theme

Exploring the Color Dilemma After creating a simple website in Bootstrap 4.1 with a distinct shade of purple, I encountered an issue with specificity when it came to customizing button states. To address this, I introduced a CSS class called .btn-purple ...

htmlcssbootstrap-4css-selectors

The RequiredFieldValidator and RegularExpressionValidator are not functioning properly

I have the following code snippet in one of my "C#" aspx pages. Despite having validation set up, the event attached to cmdPassword still fires even when the textbox is empty. Why are the validations not working? <tr> <td align="left" valign="t ...

c#htmlasp.netvalidation

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

htmlcssangularlayoutangular-material

Bootstrap datetimepicker is not showing the calendar for selecting a date, making it impossible to choose a specific date

I am facing an issue with integrating the bootstrap datetimepicker with Datatables to filter the data based on selected dates. The problem is that only an input bar is displayed on the page, and there is no calendar or calendar symbol visible. I suspect it ...

javascripthtmldatatablesbootstrap-datetimepicker

Is there a way for me to achieve a vertical page turning effect on a single page?

I am seeking to develop a unique calendar display consisting of 12 images that give the illusion of flipping up when clicked. While I am aware of turn.js, my knowledge of javascript is limited and I need guidance on how to proceed. Despite having a program ...

javascriptcss

The issue with React select right-to-left (RTL) functionality is that it

When using react select, I include isRtl as a prop like so: <Select onChange={handleChange} isRtl isMulti options={colourOptions} /> However, only the input receives the rtl direction style and not the options. How can I ensure that both the input a ...

javascriptcssreactjsreact-select

Angular 2: Enhancing Tables

I am looking to create a custom table using Angular 2. Here is the desired layout of the table: https://i.sstatic.net/6Mrtf.png I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngO ...

javascripthtmlcssangulartypescript

What could be causing the issue of my CSS file not properly connecting with my HTML files in Django?

I am facing an issue with linking the CSS file to the HTML file in my code. Despite not showing any errors, there is no effect on my webpage. The files I have included are settings.py, base.html, and base.css. Additionally, my static folder is located outs ...

htmlcssdjango

Issue with Bootstrap Carousel displaying as a static image instead of a slide

I have worked on creating a Portfolio.js file using the react library with react-bootstrap Carousel.js to build an uncontrolled carousel. However, my code is showing the slides vertically instead of behaving like a typical carousel. You can view my code at ...

htmlcssreactjscarouselreact-bootstrap

Switching the Vue image on Routerlink's isExactActive feature

Is there a way to display different images based on whether a link is active or not? <router-link to="/"> <img src=" :active = isExactActive ? pic_active.png : pic_inactive.png}}" /> //Something along these lines ...

htmlvue.jsrouterlinkrouterlinkactive

Streamline Access to Zimbra Server Automatically

Currently, I am creating a webpage with a login feature at www.newpage.com. Here is the code snippet for reference: <form name="login"> Username<input type="text" name="userid"/> Password<input type="password" name="pswrd"/> <input ty ...

javascripthtmlauthenticationautomationzimbra

The essence of a character undergoes a complete transformation once it is presented in

There seems to be an issue with the character "т", ascii code: 209 130 When this particular character is put in italics, its appearance changes drastically... Check out the т character in italics (take a look at the source code - it's fascinating) ...

htmlcsscharacterasciiitalics

Shift the position of an <img> downwards by 50% of its height while maintaining the flow of the elements

Consider this snippet of code below <div> <img src="http://www.lorempixel/100/200" /> <p> Bla bla bla bla </p> </div> I am trying to figure out how to move the image 50% of its height and also adjust the ...

csshtmlresponsive-design

triggering a button click event in HTML

Below is the creation of a div: <div class="area1"> </div> By using AJAX, I was able to alter the HTML for the aforementioned div with this call: $('#abutton').click(function(e) { e.preventDefault(); ...

htmljqueryajax

Persistent column menu in ag-grid

Is there a way to include a menu for each row within a sticky column in Ag-grid? I couldn't find any information about this feature in the official documentation, so I'm unsure if it's even possible. I've attempted several methods, but ...

javascripthtmlcssag-grid

Trouble with highlighting the chosen menu item

I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free ...

javascriptjqueryhtmlcss

Sliding out menu using AngularJS

I have been attempting to create a slide out menu without success. My goal is for the text (home,users) to appear when the >> button is clicked. I seem to be stuck and can't figure out what I'm missing. This project also marks my initial ve ...

cssangularjs