Is there a way to make an HTML element visible at all times, not just on focus?
It seems like it should be as easy as this:
HTML:
<img src="image.png" width="100" height="100" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="50,50,50" href="#" alt="circle" />
</map>
CSS:
area {border: 1px solid red}
No matter what I try, it appears that the styling of the area element cannot be affected by CSS. Are there any other examples of un-style-able tags? Any suggestions?
If you're looking to add interactivity to your image maps, the jQuery plugin MapHilight could be just what you need. However, please note that the links provided in the original post are no longer working.
We recommend checking out the updated link for this plugin: https://github.com/kemayo/maphilight
To achieve similar results using HTML and CSS:
#myImage {
position:relative; width:640px; height:100px;
background-image:url("bkg.jpg");
}
a.apples {
display:block; position:absolute;
top:0; left:0; width:100px; height:100px;
border:1px solid red;
}
a.taters {
display:block; position:absolute;
top:0; left:200px; width:25px; height:25px;
border:1px dotted orange;
}
#myImage a span {
display:none;
}
--
<div id="myImage">
<ul>
<li><a href="page1.html" class="apples"><span>Apples</span></a></li>
<li><a href="page2.html" class="taters"><span>Taters</span></a></li>
</ul>
</div>
When using the area tag, you are creating a clickable space for users without a visual indication. This means CSS styling won't be effective in this case. It might be necessary to utilize JavaScript to overlay a transparent image above your image map to achieve your desired result. Keep exploring different methods to achieve your design goals!
Your inquiry really resonated with me. I would be interested in exploring a similar approach using area tags to create different "shapes" instead of just squares for areas of focus. After doing some digging, I came across this resource:
While it may not meet all your requirements, it could serve as a helpful starting point.
If it were only that simple.
Creating simple shapes can be achieved using the HTML <canvas> element, as utilized by libraries like flot (with IE requiring the excanvas emulator).
While still necessitating some Javascript knowledge, this method may be more efficient than working with overlay images, particularly if the shape sizes are not fixed. A helpful tutorial can be found here.
Consider an alternative approach. Why not create an SVG and customize the appearance by specifying fill:green; fill-opacity: 1;
<svg height="300" width="200">
<a xlink:href="https://example.com/">
<ellipse cx="100" cy="150" rx="100" ry="150" style="fill:white; stroke:none;fill-opacity: 0" />
</a>
</svg>
I'm currently facing an issue with a dialog box that I have implemented successfully. However, I can't seem to get it centered on the page: <Button variant="danger" onClick={() => { if (window.confirm('Delete character?')) handle ...
My code for custom radio buttons using CSS is as follows: input[type=radio]{ display:none; } .radio-options label::before { content: "\2b24"; color:#e2e2e2; display: inline-block !important; width: 17px; height: 17px; vert ...
When you hover your mouse over a tile in Windows, a cool effect happens: Hovering outside the tile, but within the container area: https://i.sstatic.net/yZk9f.png Hovering inside a tile: https://i.sstatic.net/LoSmk.png Hovering outside a tile at its m ...
$('#selectall1').click(function(event) { if (this.checked) { $('.first').each(function() { this.checked = true; }); $('.second').each(function() { this.checked = false; }); $('.third&apos ...
Looking for a way to incorporate conditional PHP code into my theme that will load a different stylesheet when either an admin or a specific user (ID=1) is logged in. Does WordPress have a function that can make this happen? There's a particular div ...
I am facing an issue with displaying images in a wide Datatables header. The design is based on the Zurb Foundation 5.5.3 framework. Does anyone know why this CSS code is being strikethrough in the image below? (you can view it at https://i.sstatic.net/l ...
I have 3 identical divs with an auto height value. How can I set the height of all divs in the same class to be equal to the highest div's height? Same Class Div Thank you in advance. ...
I am working on creating two side by side DIVs, where one contains static content and the other has dynamic content. My goal is to make sure that the height of the static DIV increases whenever the height of the dynamic DIV increases. Here's the code ...
I have an HTML file named email.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shareholder</title> </head> <body> <h1> {{.PageTitle}} </h1> ...
I have been utilizing the NVD3 library along with bootstrap 3.0 for my project. I have two divs with the classes "col-md-6 col-sm-12" positioned side by side. My goal is to showcase charts in both of these divs. To ensure that the charts are displayed corr ...
Currently, I am attempting to create a two-column layout with specific dimensions for each column. The first column should have a maximum width of 200px while the second column expands to fill the remaining space. Despite trying out multiple examples, I h ...
I have set up a modal pop-up window to showcase all comments on my blog posts. However, I am facing an issue where I am unable to view individual comments by clicking on the respective link. <!-- Modal --> <div class="modal fade" id="myModal" ...
Having trouble applying a breakpoint to the Material UI component, Raised button. I have managed to make it work for regular divs, but not for the Material UI component. I attempted wrapping the button inside Radium import RaisedButton from 'materia ...
I recently coded a div using this snippet... let sidebarBox = document.createElement("div"); sidebarBox.id = "sidebarBox"; ...and then I created a second div like so... let sidebarAd = document.createElement("div"); sidebarAd.className = "sidebarAd"; B ...
I am facing an issue with two divs; one on the right and the other on the left. When I try to add a third div below the right div, it ends up appearing under the left div or at the left side of the left div. Here is my current setup: https://i.sstatic.n ...
Struggling to align two divs both vertically and horizontally within their respective parent containers that are placed side by side with 50% width and 100% height? Check out my solution on Codepen for reference. View Codepen Example *** HTML *** <di ...
Is there a way to automatically number textboxes when I type "1" and hit enter in one of them? For example, if I have 3 textboxes and I type "1" in the first one, can the other textboxes be numbered as 2 and 3 accordingly? <input type="text&qu ...
<div class="reviews-summary__stats"> <div class="reviews-summary"> <p class="reviews-title">A</p> <ul class="rating"> <li class="rating__item r ...
My current goal is to achieve the following layout: <div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"& ...
In the AWS lambda function provided below, I have set it up to call an API that lists all country names. The function is connected to an API Gateway and works as expected when tested with Postman. Here is the code snippet: import axios from 'axios&apo ...