I am trying to add links to an image, similar to what Wikipedia does with the map of Germany and its states. Back in the 90s, I would have used the map tag for this purpose.
After examining the source code of the map on Wikipedia, I noticed that all the states have absolute positions. Is there a simple way to achieve this effect, or do I need to manually determine the absolute positions using a tool like Photoshop and then hardcode them into the CSS/HTML?
If you take a close look, it's evident that Wikipedia utilizes <div> elements that are strategically placed over the image. To achieve a similar effect, you'll need to specify the exact coordinates for the text you intend to overlay on the image.
You could experiment with different coordinates or use any image editing software to accurately determine the coordinates within the image.
Here is a basic structure that Wikipedia follows:
HTML:
<div class="container">
<img src="myImage.png" />
<div class="text1">Text1</div>
<div class="text2">Text2</div>
</div>
CSS:
.text1 {
position:absolute;
left:50px;
top:100px
}
.text2 {
position:absolute;
left:200px;
top:50px
}
(Although in their case, they embed the CSS styles directly in the HTML elements...)
Check out this jsFiddle link for a functional example.
If you're in need of a HTML map, consider using some javascript to overlay text on top of it. Here's an example of how it can be implemented: http://www.w3schools.com/tags/tag_map.asp.
For more guidance, check out this related question:
HTML, jQuery : Show text over area of image-map
If you're looking to replicate the layout from the provided link, precision is key. Utilizing absolute positioning will help achieve the desired results.
However, if your project doesn't necessitate exact placement of links on the image, there's an alternative approach you can consider.
CSS//////////
div.back{
background:url('path/to/your/image.extension');
width:/*specify the width of the image*/;
height:/*specify the height of the image*/
}
This div with the class back will function as intended. You can then insert the links within the div, allowing them to appear on top of the image.
Feel free to explore this fiddle for a demonstration.
After initially adding a favicon to my HTML page, I attempted to change it to a different one. However, the first favicon seems to be stuck and won't move, even after removing the link tag entirely. I created a new favicon (favicon.ico) and tried impl ...
Exploring the world of Material UI styling for the first and probably last time, I find myself in a bit of a bind. In my current code setup, I have a question regarding the following structure: .map(section => ( <Section className={classNames(clas ...
Looking for help with manipulating a menu in HTML? I have a menu that I want to modify by removing and adding list items. While I've had success removing items, I'm struggling to properly use the add method. Here's an example of what my menu ...
I am facing an issue with customizing buttons in Bootstrap. <div class="btn-group"> <button class="btn btn-midd">Link</button> <button class="btn btn-midd dropdown-toggle"> <span class="icon-download-alt icon-gray ...
I am having trouble displaying data on a graph in my web interface using Vue js. I am fetching data from the backend to the frontend with axios, and although I can display an empty graph, the passed data is not showing up. Can someone please help me iden ...
I'm encountering difficulties with creating a Viewport that functions properly on an android smartphone. My website is fully responsive, scaling down to 480 pixels wide. At this point, a min-width of 480px is set on the body tag. Initially, my viewp ...
I have been attempting to export a react component as a PDF file. Here are the steps I have followed: Converting the component into an image using html2canvas Creating a PDF document Attaching the image to the PDF The component contains images with URLs ...
Here is the code snippet showcasing CSS styles and HTML elements: CSS: .enableLink{ font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#069; padding-right:20px; text-decoration:underline; cursor:pointer; } .disableLink{ display:none; fon ...
As a newcomer to Angular2 and NodeJs, I am eager to learn how to integrate external CSS and JS in an Angular2 and Nodejs express app. Specifically, I am looking to integrate a bootstrap admin theme into my Nodejs application. The screenshots below provide ...
Here is the code snippet: <div class="row shochatgroup"> <div *ngFor="let message of messages" class="col-auto"> <button *ngIf="message.state.attributes.shochatpaid > 0 && message.state.at ...
After testing two different approaches: <div id = "team-search-container"> <label for="team-search" class = "text-center"> <input type = "text" id = "team-search"> </label> </div> With the following code sni ...
Below is the table column configuration I am working with, where notes are rendered using a custom function: fieldDefs: (results, isJsonData) => [ { title: 'Notes', name: 'notesHTML', table: { render: SectionNotes, sear ...
I'm currently facing a challenge with incorporating javascript into the dialog box of my application. Here is an example of the code I am struggling with - var profileDialog1 = new Dialog({ title: "Create Profile", style: "width: 700px;he ...
One issue I'm encountering is that the margin isn't behaving as expected in this example. The padding seems to be working like margin should. Why is that? Print Screen: https://i.stack.imgur.com/N1ojF.png Why is it that the margin in the h3 ta ...
I am working on a project that involves a selection input with around 5 options. Additionally, there is an empty table that follows this format: <table> <tr> <td>X (for deletion)</td> <td>Option name</td> ...
After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...
Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...
I am currently diving into AngularJS and working on a simple project to create an expense tracker as a beginner task. However, I have encountered some issues with my code. While I have successfully implemented most functions, I am struggling with the upda ...
I am struggling to make the images in the following code align horizontally across the top and also need to align the h1's in the same way. I have tried using the vertical-align property, but it seems to behave oddly to me. HTML: <div class=&apos ...
NOTE: Each email ID must be unique. An empty string value is allowed to be added. Email IDs should be separated by semicolons and commas. Basic validation of email IDs is necessary for entry. [![ $("#d-notification").focusout(function () { var ...