help to add html code to variable in JavaScript array

I have this variable...

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks"}
};


I want to add an image at the end so it display Tasks - myImage

How I do that, I try without luck ...

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks - <img src=myImage>" }
};

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks &lt;img src=myImage&gt;" }
};

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks" + document.write('<img src=myImage>"); }
};

please advice... thanks!
LVL 8
a0k0a7Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

husker475Commented:
Try:
var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": 'Tasks - <img src="myImage.ext">' }
};

Open in new window

0
a0k0a7Author Commented:
it didn't work for me...
0
David S.Commented:
If that didn't work, we'll need to see more of your code to be able to help you.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

AFUEGOCommented:
here is....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Custom</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key="
      type="text/javascript"></script>
 
    <LINK href="menu.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    body {
      font-family: Arial, sans serif;
      font-size: 11px;
    }
    </style>
    <script type="text/javascript" src="menu.js"></script>
    <script type="text/javascript"> 
var map;
var userAdded = 1;
    var centreLat=0.0;
    var centreLon=0.0;
    var initialZoom=1;
 
var layers = {
 "activities": 
 {"url": "http://google.com",
  "name": "Activities"}  ,
 "tasks": 
 {"url": "http://google.com",
  "name": "Tasks" }
};
 
function customGetTileURL(a,b) {
      //converts tile x,y into keyhole string
 
      var c=Math.pow(2,b);
 
        var d=a.x;
        var e=a.y;
        var f="t";
        for(var g=0;g<b;g++){
            c=c/2;
            if(e<c){
                if(d<c){f+="q"}
                else{f+="r";d-=c}
            }
            else{
                if(d<c){f+="t";e-=c}
                else{f+="s";d-=c;e-=c}
            }
        }
        return "portal/"+f+".jpg"
    }
 
    function getWindowHeight() {
        if (window.self&&self.innerHeight) {
            return self.innerHeight;
        }
        if (document.documentElement&&document.documentElement.clientHeight) {
            return document.documentElement.clientHeight;
        }
        return 0;
    }
 
    function getWindowWidth() {
        if (window.self&&self.innerWidth) {
            return self.innerWidth;
        }
        if (document.documentElement&&document.documentElement.clientWidth) {
            return document.documentElement.clientWidth;
        }
        return 0;
    }
 
    function resizeMapDiv() {
        //Resize the height of the div containing the map.
        //Do not call any map methods here as the resize is called before the map is created.
    	var d=document.getElementById("map");
    	var e=document.getElementById("sidebar");
        var offsetTop=0;
        for (var elem=d; elem!=null; elem=elem.offsetParent) {
            offsetTop+=elem.offsetTop;
        }
        var height=getWindowHeight()-offsetTop-16;
        if (height>=0) {
            d.style.height=height+"px";
            e.style.height=height+"px";
        }
        var width=getWindowWidth()-offsetTop-16-150;
        if (width>=0) {
            d.style.width=width+"px";
        }
    }
 
 
 
function onLoad() {
  //map = new GMap2(document.getElementById("map")); 
 
  //map.setCenter(new GLatLng(37.422341, -122.085018), 5);
  //map.addControl(new GSmallMapControl());
 
        resizeMapDiv();
        var copyright = new GCopyright(1,
                              new GLatLngBounds(new GLatLng(-90, -180),
                                                new GLatLng(90, 180)),
                              0,
                              "<a href=\"https://google.com\">G-Fuck</a>");
        var copyrightCollection = new GCopyrightCollection("(c) Company, 2008");
        copyrightCollection.addCopyright(copyright);
 
        //create a custom picture layer
        var pic_tileLayers = [ new GTileLayer(copyrightCollection , 0, 17)];
        pic_tileLayers[0].getTileUrl = customGetTileURL;
        pic_tileLayers[0].isPng = function() { return false; };
        pic_tileLayers[0].getOpacity = function() { return 1.0; };
        var pic_customMap = new GMapType(pic_tileLayers, new GMercatorProjection(6), "Pic",
            {maxResolution:5, minResolution:0, errorMessage:"Data not available"});
            
        pic_customMap.getProjection().tileCheckRange = function(a, b, c){
                var d = Math.pow(2,b); 
                if (a.y < 0 || a.y >= d)
                        return false;
                if (a.x < 0 || a.x >= d)
                        return false;
                return true
        }
        
        pic_customMap.getProjection().getWrapWidth = function() {
                return 1024 * 1024 * 1024;
        }
 
        //Now create the custom map. Would normally be G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP
        map = new GMap2(document.getElementById("map"),{mapTypes:[pic_customMap]});
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
	map.addControl(new GOverviewMapControl());
        map.enableDoubleClickZoom();
	map.enableContinuousZoom();
	map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(centreLat, centreLon), initialZoom, pic_customMap);
 
  //document.getElementById("url").value = "http://";
      new ContextMenu(map);
  
  for(var layer in layers) {
    addTR(layer, layers[layer].name);
    document.getElementById(layer).checked = true;
    toggleGeoXML(layer, true);
    }
} 
 
 
 
function addGeoXML() {
  var theUrl = document.getElementById("url").value;
  theUrl = theUrl.replace(/^\s+/, "");
  theUrl = theUrl.replace(/\s+$/, "");
  if (theUrl.indexOf(' ') != -1) {
    alert('Error - that address has a space in it');
  } else {
    var id = "userAdded" + userAdded;
    layers[id] = {};
    layers[id].url = theUrl;
    layers[id].name = "User Layer " + userAdded;
 
    addTR(id);
    document.getElementById(id).checked = true;
    toggleGeoXML(id, true);
    userAdded++;
  }
}
 
function addTR(id) {
  var layerTR = document.createElement("tr");
 
  var inputTD = document.createElement("td");
  var input = document.createElement("input");
  input.type = "checkbox";
  input.id = id;
  input.onclick = function () { toggleGeoXML(this.id, this.checked) };
  inputTD.appendChild(input);
 
  var nameTD = document.createElement("td");
  var nameA = document.createElement("a");
  //nameA.href = layers[id].url;
  var name = document.createTextNode(layers[id].name);
  nameA.appendChild(name);
  nameTD.appendChild(nameA);
 
  layerTR.appendChild(inputTD);
  layerTR.appendChild(nameTD);
  document.getElementById("sidebarTBODY").appendChild(layerTR);
}
 
function notzoomToGeoXML(geoXml) {
  var center = geoXml.getDefaultCenter();
  var span = geoXml.getDefaultSpan();
  var sw = new GLatLng(center.lat() - span.lat() / 2,
                       center.lng() - span.lng() / 2);
  var ne = new GLatLng(center.lat() + span.lat() / 2,
                       center.lng() + span.lng() / 2);
  var bounds = new GLatLngBounds(sw, ne);
  map.setCenter(center);
  map.setZoom(map.getBoundsZoomLevel(bounds));
}
 
function toggleGeoXML(id, checked) {
  if (checked) {
    var geoXml = new GGeoXml(layers[id].url);
    GEvent.addListener(geoXml, 'load', function() {
      if (geoXml.loadedCorrectly()) {
        //geoXml.gotoDefaultViewport(map);
        layers[id].geoxml = geoXml;
        document.getElementById("status").innerHTML = "";
      }
    });
    layers[id].geoXml = geoXml;
    map.addOverlay(layers[id].geoXml);
    document.getElementById("status").innerHTML = "Loading...";
  
  } else if (layers[id].geoXml) {
    map.removeOverlay(layers[id].geoXml);
  }
}
 
  </script>
 
</head>
<body onload="onLoad()" onresize="resizeMapDiv()" onunload="GUnload()">
    <br/>
    <div id="map" style="width: 800px; height: 600px; float:left; border: 1px solid black;"></div>
    <div id="sidebar" style="float:left; overflow-vertical:scroll; height: 600px; width:150px; border:1px solid black">
    <div style="font-size: 14px;"><br/>&nbsp;Available:</div>
    <table id="sidebarTABLE">
    <tbody id="sidebarTBODY">
    </tbody>
    </table>
    <div id="status" style="text-align:center; color: #ff0000"></div>
    <div style="font-family: Arial, sans serif; font-size: 14px;"><br/><br/>&nbsp;Add to map:</div>    
    &nbsp;<input id="url" value="http://"/>
    &nbsp;<input type="button" value="Add" onClick="addGeoXML();"/>
    </div>
 
  </body>
</html>
 
      

Open in new window

0
a0k0a7Author Commented:
What I would like to do it is to add an image icon to next to the layer definition.

It currently have ID and Name, I am not sure if I have to extend the function addTR()....


 
0
AFUEGOCommented:
You need the following changes to the code....

#1 change variable definitions
#2 update AddGeoXML function
#3 update AddTR function

-Good Luck
var layers = {
 "activities": 
 {"url": "http://www.afuego.com",
  "name": "Activities" ,
  "image": "http://www.afuego.com/img/logo.gif" }  , 
 "tasks": 
 {"url": "http://www.afuego.com",
  "name": "Tasks",
   "image": "http://www.afuego.com/img/logo.gif" }
};
 
 
function addGeoXML() {
  var theUrl = document.getElementById("url").value;
  var theImage = document.getElementById("image").value;
  
  theUrl = theUrl.replace(/^\s+/, "");
  theUrl = theUrl.replace(/\s+$/, "");
  
  theImage = theUrl.replace(/^\s+/, "");
  theImage = theUrl.replace(/\s+$/, "");
  
  if (theUrl.indexOf(' ') != -1 && theImage.indexOf(' ') != -1) {
    alert('Error - that address has a space in it');
  } else {
    var id = "userAdded" + userAdded;
    layers[id] = {};
    layers[id].url = theUrl;
    layers[id].image = theImage;
    layers[id].name = "User Layer " + userAdded;
 
    addTR(id);
    document.getElementById(id).checked = true;
    toggleGeoXML(id, true);
    userAdded++;
  }
}
 
function addTR(id) {
  var layerTR = document.createElement("tr");
  
  var inputTD = document.createElement("td");
  var input = document.createElement("input");
  
  //Add Legend to sidebar -  display marker icons
  var image = document.createElement("img");
  image.src = layers[id].image;
  
  input.type = "checkbox";
  input.id = id;
  input.onclick = function () { toggleGeoXML(this.id, this.checked) };
  inputTD.appendChild(input);
 
  var nameTD = document.createElement("td");
  var nameTD2 = document.createElement("td");
  
  var nameA = document.createElement("a");
  //nameA.href = layers[id].url;
  var name = document.createTextNode(layers[id].name);
  nameA.appendChild(name);
  nameTD.appendChild(nameA);
  nameTD2.appendChild(image);
 
  layerTR.appendChild(inputTD);
  layerTR.appendChild(nameTD);
  layerTR.appendChild(nameTD2)
  document.getElementById("sidebarTBODY").appendChild(layerTR);
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.