2

EDIT: I am not sure why this "may not be SharePoint related" SharePoint Designer lets you place ImageMaps and hot spots natively. This directly applies on how to modify that code via parameters.

I have an image map that goes line by line like this:

<area data-key="4059" class="blue" href="/specs.aspx?Office+Room=4059" shape="rect" coords="81, 385, 117, 419" />

Is there a way to add a parameter to the URL of the image map page itself that can change the class above from "blue" to "red"? Perhaps with JQuery as well? Not sure if it possible at all.

Chuck Farley
  • 1,159
  • 1
  • 14
  • 26
  • EDIT: I am not sure why this "may not be SharePoint related" SharePoint Designer lets you place ImageMaps and hot spots natively. This directly applies on how to modify that code via parameters. – Chuck Farley May 04 '17 at 14:22
  • Because you can put this on any web page, outside of SharePoint, and your question and answer will not change. SharePoint should have no impact on this. If it does, then you should update your question with how SharePoint is affecting it. – wjervis May 04 '17 at 16:51
  • Wow. How subjective. It's amazing when you give people some power. What would had been more appreciated was if you had a solution instead of pushing authority. We have to endure the president we have here , please show some charity – Chuck Farley May 06 '17 at 05:16
  • Just trying to point you somewhere more appropriate, where you'll more likely get answers. SO has a much larger user base, so you'll not only get more people ready to answer your question, you'll more likely get varied answers. Oh, and not that it matters, but I had nothing to do with the closing of your question, I'm just explaining why this was closed. – wjervis May 07 '17 at 15:22
  • Thank you wjervis I stand corrected and show sincere gratitude. Thank you. I just wanted to address those who have experienced working in JQuery and Image Maps within SharePoint as opposed to outside ( reg web pages ) since we all know SharePoint can be quite exacting. – Chuck Farley May 07 '17 at 17:46

2 Answers2

2

select DOM element by attribute

No need for jQuery,

element (CSS) selectors work in the native JavaScriptdocument.querySelector function

Also note classList.add('blue') does not remove the existing 'red' class

function changeAreaClass( datakey , newclass ){
    var selector =  "area [data-key=' "+ datakey +" ']" ;
    var el=document.querySelector( selector );
    if (el) el.setAttribute("class" , newclass );
}

changeAreaClass( '4059' , 'blue' );

Learn:

and you can do everything without loading a 90 KB jQuery library

Get QueryString variable

SharePoint provides at least 3 functions for you:

What does this code getQueryStringParameter do?

Danny '365CSI' Engelman
  • 21,176
  • 7
  • 35
  • 79
1

Try first to get the query string value from your image page url as mentioned at stackoverflow jquery get querystring from URL

To change the tag class name

if it's the only area tag that has the class blue try te following: (Note: you can loop to change all tags with blue class)

var list = document.getElementsByClassName("blue")[0].classList.add('red');

if there is multiple tags with class blue try to set id for your tag and change its class as the following :

var list = document.getElementById("id1").classList.add('red');
Community
  • 1
Mohamed El-Qassas MVP
  • 45,382
  • 9
  • 53
  • 96
  • Hello M.Qassas thank you again. Actually I wanted to use the data -key to match the URL parameter and then change the class from "Blue" to "Red". Si int he case above if ID=4959 then I'd like the class to turn to "red". I am a novice programmer , how would I go about that? – Chuck Farley May 04 '17 at 00:59