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.

closed as off-topic by Robert Lindgren May 4 '17 at 8:51

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Programming questions not specific to SharePoint are off-topic here, but can be asked on Stack Overflow." – Robert Lindgren
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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. – Mike Rooker May 4 '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 4 '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 – Mike Rooker May 6 '17 at 5: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 7 '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. – Mike Rooker May 7 '17 at 17:46
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?

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');
  • 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? – Mike Rooker May 4 '17 at 0:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.