So as most people know i don't profess to be a developer or know much about code, I can look at code and see what it is doing and change it but starting from scratch is just something i cannot do. I have been working with a Dev friend on this to expand on some code that i found online. (https://neilparkhurst.com/2016/12/04/dynamics-365-icons-in-views/)

I had 2 goals i was looking to achieve.

1) Show a web resource based on a numeric range

/*********************************************
* Library Header - Email *
* specify which entity                       *
* provide guidance on naming conventions etc.*
**********************************************/

/**********************************************************************
* Global Variables                               *
* Please restrict use to only detect changes since OnLoad event,   *
* or to revert back to the old value if there is a requirement for it *
***********************************************************************/


/************************************************************************************
* Functions Definitions                       *
* feel free to write long and informative descriptions per function     *
* a reference to a specific requirement proves helpful especially on large projects *
*************************************************************************************/


/**********************************************
* Event Handlers - OnLoad Event      *
***********************************************/

// Programmer:  Mark Christie, 10/11/2017
// Purpose: show grid icons
function displayProbabilityIcon(rowData, userLCID)
{   
    var str = JSON.parse(rowData);
    var col_data = parseInt( str.closeprobability_Value );
    var imgName = "";
    var tooltip = "{" + col_data +"}";

    if ( col_data >= 0 && col_data <=19 )
    {
      imgName = "tmc_1star";
      tooltip = "Rubbish";
    }
    else if ( col_data >= 20 && col_data <= 39 )
    {
      imgName = "tmc_2star";
      tooltip = "Poor";
    }
    else if ( col_data >= 40 && col_data <= 59 )
    {
       imgName = "tmc_3star";
       tooltip = "Average";
    }
    else if ( col_data >= 60 && col_data <= 79 )
    {
       imgName = "tmc_4star";
       tooltip = "Good";
    }
    else if ( col_data >= 80 && col_data <= 100 )
    {
      imgName = "tmc_5star";
      tooltip = "Excellent";
    }
    else
    {
      imgName = "tmc_unknown";
      tooltip = "Unknown " + col_data ;
    }
 
    var resultarray = [imgName, tooltip];
    return resultarray;

} // END

2) Show a web resource based on an option set value

/*********************************************
* Library Header - Email *
* specify which entity                       *
* provide guidance on naming conventions etc.*
**********************************************/

/**********************************************************************
* Global Variables                               *
* Please restrict use to only detect changes since OnLoad event,   *
* or to revert back to the old value if there is a requirement for it *
***********************************************************************/


/************************************************************************************
* Functions Definitions                       *
* feel free to write long and informative descriptions per function     *
* a reference to a specific requirement proves helpful especially on large projects *
*************************************************************************************/


/**********************************************
* Event Handlers - OnLoad Event      *
***********************************************/

// Programmer:  Mark Christie, 10/11/2017
// Purpose: show grid icons

function displayIconTooltip(rowData, userLCID) {   

    var str = JSON.parse(rowData);
    var col_data = str.leadqualitycode_Value;
    var imgName = "";
    var tooltip = "{" + col_data +"}";

    switch (col_data) {
       case 1:
         imgName = "tmc_greenicon";
         tooltip = "Hot";
         break;
       case 2:
          imgName = "tmc_orangeicon";
          tooltip = "Warm";
          break;
       default:
         imgName = "tmc_yellowicon";
         tooltip = "Cold";
         break;
    }
    var resultarray = [imgName, tooltip];
    return resultarray;
} // END