Employing the <object> element to incorporate SVGs and utilizing inline CSS within HTML for adjusting fill properties

Looking to replace a flash object that utilizes a single swf file (map of USA) and flash vars in the html for dynamically changing state colors. Hoping to use one file across multiple pages.

I've now designed an SVG file with each state having an ID name of its two-letter abbreviation. My goal is to import this using or , then utilize inline CSS on the HTML page to modify the SVG image and adjust certain fills.

Unfortunately, incorporating inline CSS within the SVG file or referencing an external CSS file from it won't allow me to achieve my objective of using one image file across various pages like the original swf.

After spending several days attempting different jQuery and JavaScript methods, I realize that my lack of proficiency in JavaScript is hindering my progress. Any advice or assistance would be greatly appreciated!

javascriptjqueryhtmlcsssvg

Answer №1

It seems like you're trying to use inline CSS to highlight specific states on an SVG image of the USA. However, traditional methods won't work for this task. Neither JavaScript nor CSS can directly modify images.

Instead, one approach could be to manipulate the SVG data using JavaScript, encode it in base64 format, and then display it as an Image using a data URI. Tools like JSXGraph's JSXCompressor or other image editing libraries might be helpful in achieving this. You may also want to explore options like PNGlib or do some research on Google to find suitable solutions.

I hope this points you in the right direction for solving your problem!

Answer №2

Check out this cool SVG example where the states change colors as you hover over them. It might give you some ideas for your project.

Answer №3

I believe that browser support still has some ways to go before I can fully answer this question. To work around this, I have created a flash version which you can find at

This method involves embedding the swf file and using flashvars to assign values to color and state arrays. This allows me to use the same swf on multiple pages, with different colors and differently colored states.

Hopefully SVG technology will catch up soon!

Answer №4

To achieve your goal, it is recommended to utilize the <object> tag along with URL fragment parameter passing. Check out this illustrative example.

The functionality you are looking for can be achieved through SVG Parameters. Please note that the spec is still a working draft and there may be changes in the syntax as well as no known implementations yet. However, there is a helpful script fallback solution available for use in the demos within the specification.

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

Guide on using selenium webdriver (python) to choose, replicate, and insert all content within an element

Currently, I am faced with the task of transferring data from website A to website B as website A is soon going down. This includes not just text, but also images, hyperlinked text, and certain formatting requirements. Previously, the data transfer was don ...

pythonhtmlpython-3.xseleniumcopy-paste

CSS Dynamix - Include the parameter ?value to resolve caching issues

I came across a discussion on the issue of Dynamic CSS caching problem where it was suggested to append ?value to the end of the css file name for better caching. I am currently using themes and the css files are loaded automatically. Is it possible to use ...

csscachinghttphandler

Global jQuery variables are unexpectedly coming back as "undefined" despite being declared globally

I need to save a value from a JSON object in a global variable for future use in my code. Despite trying to declare the country variable as global, it seems like it doesn't actually work. $.getJSON(reverseGeoRequestURL, function(reverseGeoResult){ ...

javascriptjqueryvariablesscopeglobal-variables

Utilizing SCSS to implement custom animations according to specific element IDs

How can I add different animations based on the ID of two DIVs with the same class when clicked? JSX: <div className="card"> <div id="front" className={frontClasses.join(' ')} onClick={clickedFront}> OPEN ...

javascripthtmlreactjssass

Error 504: The gateway is taking too long to respond because of an

When using jQuery.ajax, I encountered the following error: 504 - Gateway Time-out Error request = $.ajax({ url: Raiz + "/informes/Inventario/pdfInventarioAlmacenValorado.php", type: "POST", data: data, timeout: (600 * 1000), su ...

jqueryajaxtimeout

Tips for implementing Header Authorization on a POST FORM with JS/AJAX/JQUERY

Looking to gather user inputs through a form on my webpage and send those values to a PHP hosted on an external site. The Request maker extension indicates that the Header Authorization is included along with other inputs when data is submitted to the exte ...

javascriptjqueryajaxheaderauthorization

Navigating drop down lists using selenium: A step-by-step guide

I have been scouring various websites, including this one, for solutions but so far I haven't had any luck. The website I'm navigating with selenium is coded in HTML4, although I'm not sure if that's relevant, I felt it was worth mentio ...

htmlpython-3.xselenium

I am experiencing an issue where the data stored in an array is not being displayed on the screen for some unknown

Currently, I am working on a tutorial for the PERN stack and encountering an issue when trying to display the contents of an array under title and content. Unfortunately, nothing is being printed to the screen. The problem seems to be within this section ...

javascriptreactjsreact-hooksfetch

Storing asynchronous values in a local variable and showcasing them in a template the Angular way

I have an array of Objects from my service component that I want to read five random Objects from and display them one after another in the template with a delay. Once the last Object has been shown, it should start again from the beginning. I managed to a ...

javascriptangulartypescript

What alternative method can I use to open a mail with an HTML body if the mailto protocol is unavailable?

I recently added a button on my website for visitors to easily share my content via email. While the mailto protocol works, I'm not happy with the plain text format of the emails that are sent. I know that HTML emails allow for more customization and ...

htmlemailsharemailtoindexhibit

I need to display the JSON table retrieved from my MySQL database using AJAX. Can anyone help me with the process?

$.ajax({ type:'POST', url:'data.php', data: {value}, dataType: 'json', success: function(result) { for(i=0;i<result.length;i++) { var item = result[i]; ...

javascriptjsonajax

Set values for all variables that begin with a specific string

[WARNING! Proceed with caution] One of my most recent coding dilemmas involves creating a JavaScript script that can identify specific surveys. These surveys use variables that share a common string followed by a random number, like this: variableName_46 ...

javascriptvariablesfindglobalassign

Could anyone help me troubleshoot my JavaScript code?

Could use a hand debugging my code. The function is similar to Eval but with a square root (√) added, yet it's not functioning properly. function CustomEval(n) { var a = n.split("√").length - 1; var b = n.split("√"); var c = b[0].re ...

javascripthtml

Load Express JS router middleware conditionally based on certain conditions

In my Express JS code, I have implemented a middleware that defines specific end-points on a router for user login and logout. However, I am now integrating a new authentication method where the auth token is received from a different service. In this case ...

javascriptnode.jsexpress

Flexbox wrap allows you to determine which child element will move to the next line

Is there a way to control which child element in flexbox drops to the next line, instead of just the last one every time? For example: Full-size, no breaking: https://i.sstatic.net/proUB.png Default behavior, breaking the last element: https://i.sstatic.n ...

htmlcssflexbox

Event listener for click on the OK button of a jQuery modal popup dialog

I'm attempting to open a dialog box and pass an OK callback function in a helper function. The intention is for the callback function to execute upon clicking the Ok button. However, the issue I'm facing is that the callback function is being exe ...

jqueryjquery-ui-dialog

Showing Div content from AngularJS response

Query -- I am currently using a Controller in AngularJs that performs an $http.get request and receives data as a response. The data includes an HTML DivID and corresponding classes. How can I extract this DivID from the response and transfer it to the vi ...

javascriptjqueryhtmlangularjs

In the realm of JavaScript with Express and Mongoose, it is important to ensure that all promises from Mongoose are executed

Currently, I am developing a forum API where each forum can have multiple threads, each thread can have multiple posts, and each post may have many replies. To establish these relationships, I have defined the schema as follows: var PostSchema = new Sche ...

javascriptnode.jsexpressmongooseforum

Encountering a CORS error in my Next.js 13.4 application while attempting to retrieve JSON data

Here is the location of the actual fetch request in our search/page. import { useSearchParams } from "next/navigation"; import Footer from "../components/Footers"; import Header from "../components/header"; import { format } ...

javascriptreactjsnext.jscors

Create a form based on a bootstrap table row

this is my sample. I want to implement a feature where clicking on a row will display a form at the bottom of the page for user correction. I have used jquery .html() to render the lower table, but I'm unsure how to set up an input form for it. this ...

javascriptjqueryhtmlangularjstwitter-bootstrap