Re-using a link URL on a page

I'd like to recycle URLs that occur on a page in a second set of hrefs

[Edouard_H]

I currently have a series of six URLs as links in an image map. These will now also occur in a div that will be seen by mobile users. We use this format for several pages & would like to save time by not having to paste them in twice.

I'm not adept at javascript by any means, but am usually able to patch something together when the need arises. I'd rather not use an array with the URLs - trying not to disrupt current work flow.

I've tried a few things, but it's hardly worth posting the code here. I'd just appreciate being pointed in the right direction. I assume image maps can be assigned an id, which I have done.

[coopster]

I'd rather not use an array with the URLs - trying not to disrupt current work flow.

Are you saying you want to just have some JavaScript that will locate image maps with a certain id and then update a div on the same page with anchor elements? You wouldn't necessarily have to post full code but perhaps if you gave an example of the image map and the div we can assist with potential solutions.

[lucy24]

Are your pages literally hard-coded-- that is, the HTML you see in your editor is the same HTML that gets sent to the user's browser? Or is there an element of php-or-similar?

The question reminds me vaguely of an issue I had with links in my art studio's site. The same information appeared several times on the page, in different forms. I finally realized that it doesn't matter if the same variables are sent to javascript more than once, or appear in the page HTML more than once. What matters that the original php reads the variables only once-- so no copying-and-pasting involved, and no room for error-- and then reuses them as often as needed to build the page.

How many is "several"? A slightly goofy-- but sometimes effective-- workaround is to build the page in php, open in a server (or anything that can parse php), get the resulting html and upload that. So you only have to do the work once.

[Edouard_H]

coopster here is example HTML for one of the image map areas for desktop version:

<area id="itemOne" coords="571,74,938,110" href="THE_URL" onClick="javascript: clickTracker._trackEvent('event_category', 'event_label');" target="_blank">

...and the HTML for the mobile-friendly version:

<a class="classname" id="itemOneMobile" href="THE_URL(again)" onClick="javascript: clickTracker._trackEvent('event category', 'event_label');" target="_blank"></a>

[Edouard_H]

lucy24 - I wish PHP was an option, but it isn't in this case. Thinking there must be some way to use:

document.links.namedItem("itemOne").href

Just can't quite figure out the js to pull it off!

[lucy24]

What's the objection to arrays? Seems like Option B would be to put the information into a global variable (for javascript purposes, "global" means "available to all scripts used by the page") and then refer to thisURL[1] thisURL[2] et cetera.

[Edouard_H]

So far this somewhat works, though it seems to be quite slow, seems not to work until a second click on the link and the target is ignored:

function itemOnelink() {
var a = document.links.namedItem("ItemOne").href;
document.getElementById("item1").setAttribute("href",a).setAttribute("target","_blank");
}

<a id="item1" href="javascript:itemOnelink();" onClick="javascript: clickTracker._trackEvent('event_category', 'event_label');">Test Link</a>

And..

I'm somewhat on the right track, but any advice gladly accepted!

[coopster]

I hope I am misunderstanding you correctly in that you want to automatically add links from an image map into your div. I threw together a simple example after grabbing a sample map element off the web. It should be a working example but you can tweak it from here:

JavaScript

  var getandsetareamaplinks = function(){
   var areas = document.getElementsByName('planetmap')[0].children;
   for (var i = 0; i < areas.length; i++) {
   var a = document.createElement('a');
   a.setAttribute('id',  'item' + i);
   a.setAttribute('href', areas[i].href);
   a.setAttribute('target', '_blank');
   a.setAttribute('class', 'myclass');
   a.innerHTML = areas[i].alt || 'Click here :)'; // set alt!
    document.getElementById('mydiv').appendChild(a);
    a.addEventListener('click', function() {
     alert("hello!");
     return false;
     //clickTracker._trackEvent('event_category', 'event_label');
    });
   }
  };
  // If you have your own onload handler you can get rid of the rest
  // of this simple onload handler stuff
  function addLoadEvent(func)
  {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
    window.onload = func;
   } else {
    window.onload = function()
    {
     if (oldonload) {
      oldonload();
     }
     func();
    };
   }
  }
  addLoadEvent(getandsetareamaplinks);

HTML

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
 <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
 <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
 <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
<div id="mydiv"></div>

[Edouard_H]

Thanks Coopster - I will experiment with that - one drawback I think I'll face is that each of six links has unique tracking code where it says in the example 'event_category' & event_label - I'll check it out though.