Leveraging Parameters from URL in Javascript

I'm facing an issue with my area shape, the href="/kosmetikstudios/deutschland/Bayern" tag seems to be causing a problem. I want to utilize the parameter "Bayern" (which is the last parameter in the URL).

I need this to be dynamic.

Below is my JavaScript code:

<script type="text/javascript>
  $(document).ready(function(){
  var mName="passiv";
    $("#map area").mouseenter(function(){

      mName = $(this).attr("href"); // struggling to implement this
      bName="images/" +mName + ".png";
      $("#map img").attr("src",bName);

    });

    $("#map area").mouseleave(function(){
      bName="images/Europa.png";
      $("#map img").attr("src",bName);

    });

  });
</script>

Here is my HTML code:

 <area shape="poly" coords="356,300,355,299,354,298....." href="/kosmetikstudios/deutschland/Bayern" title="Kosmetikstudios in Bayern" alt="Kosmetikstudios in Bayern" />

<area shape="poly" coords="156,200,425,699,154,298....." href="/kosmetikstudios/deutschland/Berlin" title="Kosmetikstudios in Berlin" alt="Kosmetikstudios in Bayern" />

I am hopeful that someone can assist me with this issue.

Regards,

Dave

javascripturlparametersarea

Answer №1

movieName = link.href.substring(
    link.href.lastIndexOf('/') + 1
);

Answer №2

Instead of parsing the value from the URL, one alternative is to use a data attribute to retain the name.

Here's an example:

HTML

<area shape="poly" data-name="Bayern" href="/kosmetikstudios/deutschland/Bayern" />
<area shape="poly" data-name="Berlin" href="/kosmetikstudios/deutschland/Berlin" />

JavaScript

<script type="text/javascript">
  $(document).ready(function(){
  var mName="passiv";
    $("#map area").mouseenter(function(){

      //retrieve the data attributes
      mName = $(this).data("name");

      bName="images/" +mName + ".png";
      $("#map img").attr("src", bName);

    });

    $("#map area").mouseleave(function(){
      bName="images/Europa.png";
      $("#map img").attr("src",bName);

    });

  });
</script>

Answer №3

Follow these steps to achieve the desired result:

mName = $(this).attr("href").split("/").reverse()[0];

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

Ways to extract the ID by iterating through buttons

I encountered a message in my browser while looping through buttons with onclick function(). Are there any alternative solutions? Error handling response: TypeError: self.processResponse is not a function at chrome-extension://cmkdbmfndkfgebldhnkbfhlneefd ...

javascriptjquerylaraveldatatables

Utilizing TypeScript to enhance method proxying

I'm currently in the process of converting my JavaScript project to TypeScript, but I've hit a roadblock with an unresolved TypeScript error (TS2339). Within my code base, I have a class defined like this: export const devtoolsBackgroundScriptCl ...

javascripttypescripttypes

Splitting up JavaScript and HTML within a WordPress environment

I recently came across a discussion on separating PHP code and HTML at this link I find myself in a similar predicament. My current project involves designing a WordPress website with numerous sliders, animated dropdowns, forms, and other components. The ...

javascripthtmlwordpressparadigmsoptimization

verifying the date in a specific moment

Is there a way to validate the date accurately? to determine whether she cleared it or not. I've exhausted all my options. Despite reading through the documentation, I am unable to get it right. Here is what I attempted: if ('2023-03-03 ...

javascripttypescriptmomentjs

The issue of CSS not functioning properly across various page sizes

I have created my toolbar: <header className='toolbar'> <nav className='toolbar_navigation'> ///hamburger: <SideDrawer drawerClicked = {props.drawerClicked} /> ///LOGO ...

javascripthtmlcssreactjs

Having trouble parsing JSON with Ajax in Pusher using PHP?

I am facing an issue while sending multiple parameters using the Pusher AJAX PHP library. This is the error I encounter: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data Here is my PHP and JS code: <script src="https: ...

javascriptphpjqueryjson

Scan for every header tag present and verify the existence of an id attribute within each tag. If the id attribute is absent, insert

Looking to locate all header tags within the content and verify if each tag has an id attribute. If not, then jQuery should be used to add the id attribute. Here is the code snippet: var headings = $("#edited_content").find("h1,h2,h3,h4,h5,h6"); $.each( ...

javascriptjquery

Converting SHA1 function from JavaScript to Python

Can you help with translating this Javascript code to Python? def sha1(str1, raw): hexcase = 0 chrsz = 8 str1 = utf16to8(str1) def utf16to8(str): out = "" len = len(str) i = 0 while i < len: ...

javascriptpython

"Jquery's .append function may sometimes display as undefined when

$("#clckjson").click(function() { $(document).ready(function() { $.getJSON("fuelj.json", function(data) { $(data).each(function(i, item) { console.log(item.stationID); var $table = $('<table>'); $table.a ...

javascriptjqueryjsonhtml-table

What is the best way to display all of these JSON objects on a webpage given the current AJAX setup?

I need help figuring out how to display all the objects and their contents from a JSON file on a webpage when a button is clicked. I don't want to use console.log, I actually want it to show on the webpage but I'm unsure of how to do that. Please ...

javascripthtmljsonajax

JavaScript in fullscreen mode for Internet Explorer

I'm trying to make sure that this code snippet... $('#gatewayDimmer').width($('html').width()); $('#gatewayDimmer').height($('html').height()); $('#gatewayDimmer').css('display','block& ...

javascriptajaxinternet-explorer

I have the ability to see HTTP-only cookies within my web browser

So, I always believed that httpOnly cookies could only be accessed during a http request. But the other day, while inspecting Firefox dev tools, I noticed that I could actually view the cookies' values. Is this standard behavior? ...

javascriptreactjscookiesnext.jsweb-development-server

Utilizing JQuery UI autocomplete for dynamically loaded textbox using AJAX

<div id='toolbox'> <div class='placeholder'></div> </div> In my project, I am using a click event to dynamically load a text box into the placeholder. $('#toolbox .placeholder').load('http:// ...

javascriptjqueryajaxjquery-uiautocomplete

The mobile menu functions correctly on Jfiddle but is not functioning on the local server

I was working on a responsive mobile menu and used a toggleClass function to open the menu. It's functioning correctly in Jfiddle and below, but every time I click the nav icon in the live preview within brackets, nothing happens. I even tried it in a ...

javascriptjqueryhtmlcss

Struggling with JavaScript's getElementById function

If anyone has any suggestions or alternative methods, please kindly assist me. I currently have: 1 Textbox 1 Label 1 LinkButton Upon clicking the lnk_NameEdit button, the txtUserName textbox should become visible while the lblusername label should becom ...

c#javascriptasp.netajax

Retrieving information from Firebase using React

Is there a way to retrieve data from Firestore? import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; const firebaseConfig = { apiKey: "AIzaSyCNBAxjeKNoAPPjBV0 ...

javascriptreactjsfirebasegoogle-cloud-firestore

Determine the number of stored values in a specific key by utilizing stringify within localstorage

Is there a way to determine the number of unique values stored under one key in local storage? For instance: Here is the content of my local storage: [{"id":"item-1","icon":"google.com"},{"id":"item-2","icon":"youtube.com"}] In this case, I would like ...

javascriptjquerylocal-storage

Issue with resizing Ionic carousel when making an $http request

In my Ionic project, I am utilizing a plugin to create a carousel (https://github.com/ksachdeva/angular-swiper). The demo of this plugin includes a simple repeat function. However, when I replaced the default repeat with my own using $http, it caused an is ...

javascriptangularjsionic-framework

Runtime Error: Invalid source property detected - Firebase and Next.js collaboration issue

Currently, I am developing a Next.js application that retrieves data from a Firestore database. The database connection has been successfully established, and the data is populating the app. However, I am facing an issue with displaying the image {marketpl ...

javascriptfirebasegoogle-cloud-firestorenext.js

Does a .innerXML exist?

Is anyone knowledgeable in XML able to offer some assistance? I have a function that I use to parse XML data, and you can find the XML file I am working with here. function dialogXML(varName,url){ if (window.XMLHttpRequest){ r[varName]=new XML ...

javascriptxmlajaxdom