Welcome to WebmasterWorld Guest from 54.152.38.154

Forum Moderators: open

Message Too Old, No Replies

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

     
8:06 pm on Mar 31, 2015 (gmt 0)

Full Member

10+ Year Member

joined:Oct 9, 2002
posts: 245
votes: 0


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.
9:12 pm on Mar 31, 2015 (gmt 0)

Administrator

WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 31, 2003
posts:12548
votes: 2


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.
10:15 pm on Mar 31, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15640
votes: 796


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.
6:15 pm on Apr 1, 2015 (gmt 0)

Full Member

10+ Year Member

joined:Oct 9, 2002
posts: 245
votes: 0


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>
6:18 pm on Apr 1, 2015 (gmt 0)

Full Member

10+ Year Member

joined:Oct 9, 2002
posts: 245
votes: 0


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!
8:56 pm on Apr 1, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15640
votes: 796


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.
4:39 pm on Apr 2, 2015 (gmt 0)

Full Member

10+ Year Member

joined:Oct 9, 2002
posts: 245
votes: 0


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!
10:35 pm on Apr 2, 2015 (gmt 0)

Administrator

WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 31, 2003
posts:12548
votes: 2


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>
6:01 pm on Apr 6, 2015 (gmt 0)

Full Member

10+ Year Member

joined:Oct 9, 2002
posts: 245
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members