I have a unique world map SVG that I created myself:
http://codepen.io/itailitai/pen/ZOpJWJ
Accompanied by this custom CSS code:
.worldmap {
margin: 0 auto;
background-color:#091e2e;
}
I have been contemplating if it is possible to turn the white circles into clickable buttons?
One way to simplify your SVG significantly is by using the <circle> element, like so:
<circle cx="20" cy="20" r="8" />
Bezier paths can be complex and inaccurate when attempting to represent circles, which is why simplifying with circles is beneficial. This results in a much smaller SVG file size, making it easier for both you and your browser to work with.
Remember that SVG elements are actionable with JavaScript and CSS. A demo showcasing this functionality can be found here.
[fill=white] {
cursor: pointer;
}
var white = document.querySelectorAll("[fill=white]");
var l = white.length, i;
for( i=0; i<l; i++) {
white[i].onclick = function() {alert(this.id);};
}
This code snippet assigns a "pointer" cursor to white circles and displays their ID upon clicking. Feel free to customize and expand on this based on your requirements.
Is This CSS Syntax Correct? css: the meaning of * mark What is the function of * in CSS? I came across some code here that included it: .center-wrapper{ text-align: center; } .center-wrapper * { margin: 0 auto; } Could this be a mistake? ...
Is there a way to create a responsive div on top of a responsive image? I'm having trouble getting the div to fully align with the image in my code. Can anyone offer assistance? Check out the codePen here HTML Code: <div class="container-fluid ...
I've been attempting to apply a CSS rule to href elements while excluding a specific class (.nolink). .content a { border-bottom: 2px; } I discovered that the :not selector can achieve this, but for some reason I'm having difficulty implementin ...
I have successfully implemented a modal using a combination of html, css, and JavaScript. The code snippets are provided below for reference. One noticeable feature is that the modal window opens with a sliding animation effect from the top. However, I a ...
Using ajax, I have successfully implemented the 'addScript' function to add a js file to the loaded page. The following code snippet works perfectly: addScript('SlimBox/js/mootools.js'); However, I am encountering an issue when trying ...
Within the code snippet, the icons are represented as images that tend to disappear when the mouse is swiftly moved over them. This issue arises due to the inclusion of a transition property that reduces the brightness of the image on hover. However, when ...
I am currently working on implementing a simple form using Bootstrap 5 that includes validation. My goal is to display an alert message when the form field is successfully submitted using Sweetalert2. Below is the code I have: HTML <form action=&q ...
In my QTreeView, I have a custom delegate set up for one of the columns to display a colored progress bar. The appearance of the progress bar depends on the content and I used the color information from option.palette to mimic the default delegate behavior ...
Hey there, I'm having trouble posting an image but here is the link: I believe this explanation will be clearer, D2, D3 & D4 need to be aligned next to each other and centered on the screen at all times. (960px) & ...
Can a CSS pattern be created with responsive design, ensuring that the background line is always in the correct position and height regardless of window size? https://i.sstatic.net/27Tf2.jpg ...
I have a web application built using asp.net that utilizes ajax calls. Below is the code snippet for my web method which successfully responds to the ajax call. ADController adc = new ADController(); DataTable dt = adc.GetGeneral(Convert.ToInt32(A ...
I can't seem to figure out why the green menu is hidden behind the white header, making its links unclickable. It's necessary for the layout of the page, but it's causing this issue. The white header has a position: fixed; attribute. The gr ...
I am looking to have images and videos displayed side by side on my webpage. The code below functions properly, however there is an issue with the alignment. While the horizontal center alignment is correct, the video and images are not centered vertically ...
After browsing through numerous similar questions regarding this issue, I have not been able to find a solution that works for my specific case. The HTML code in question is as follows: a{ display: block; padding: 3px 20px; clear: both; font-weight: ...
Is there a way to make both of my icons display some text when hovered over? I managed to make it work, but the leftmost icon doesn't trigger the span element when hovered. The text needs to appear on the left side of the Yelp icon for design reasons. ...
I've created a template to display posts, each with its own post.id. There's also a button that triggers a modal, and the "yes" button within the modal should delete the post with the corresponding post.id that I clicked on. However, when I cli ...
I'm currently designing a homepage for a press release. I'm facing an issue with a large gap between my content and the footer, which I'd like to reduce. I've tried adjusting the margin-top: 0px in CSS with no success. Various attempts ...
As I am utilizing Harp and Bootstrap for my project, I am encountering a peculiar issue. Upon refreshing the page, I notice that the text ""CTYPE html>"" is inserted within the body tags. Can anyone shed light on why this is happening? ...
I recently made a tweak to this code that successfully moves the background in the opposite direction of the scroll. However, there is now an issue where it leaves a blank space at the top, even when the background is set to repeat. The change I made was s ...
I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...