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.

Improve this question
5
  • 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 4, 2017 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, 2017 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 6, 2017 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, 2017 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 7, 2017 at 17:46

2 Answers 2

Reset to default
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?

Improve this answer
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');
Improve this answer
1
  • 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 4, 2017 at 0:59

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