1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Spolight tags. image map and onClick event

         

SilverLining

9:08 am on Apr 23, 2010 (gmt 0)

10+ Year Member



I need to implement a spotlight tag on an onClick event. They way I've been advised to do it, is by use of an imageMap.

JavaScript Code: 

<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function spotTag() {
var axel = Math.random()+"";
var a = axel * 10000000000000;
document.write('<IMG SRC="http://example.com/test.gif='+ a + '?" WIDTH=1 HEIGHT=1 BORDER=0/>');
}
</script>
</head>
<body>
<img alt="" src="placeholder.gif" width="126" border="0" height="19" alt="Img" usemap="#download_form" onClick="spotTag()" />
<div>
<map id="img_map" name="img_map">
<area shape="rect" coords="1,0,126,17" target="_blank" href="example" onClick="spotTag();"/>
</map>
</div>
</body>
</html>


On my implementation on our CMS the link (PDF) opens correctly in a new window in Firefox, but the original window displays a blank page with a message "Transferring data from example.com" and does not complete loading. In IE the link opens in the same window and does not complete loading the PDF. Message displayed is "Downloading picture http://example.com..."

This example code does not load the PDF at all, in both browsers.

How can I get this to work? (I think the problem is with the document.write) I have placed the code supplied to me inside a function, so that the code is only executed on click, but when tested the spotTag is not set. Setting an alert on the function shows that at least the function is reached.

Lastly, when does one add "return false;" ?

I would really appreciate a quick response, if anyone can give me a tip in the right direction. I've validated the code on W3C, but there were loads of errors.

Thanks in advance.

[edited by: Fotiman at 12:49 pm (utc) on Apr 27, 2010]

SilverLining

10:02 am on Apr 23, 2010 (gmt 0)

10+ Year Member



I've changed 


document.write('<IMG SRC="http://example.com/test.gif='+ a + '?" WIDTH=1 HEIGHT=1 BORDER=0/>');


to 

document.write('<iframe src="http://example.com/activity;src=blah;type=blah;cat=blah;ord=1' + a + '?" width="1" height="1" frameborder="0"></iframe>');


Not sure the IFRAME will work, because it does not "sit" in a page, but at least now the PDF opens in a new window in both browsers, although IE is comlaining. Here's the error:

Message: Expected '}'
target="_blank" onclick="spotTag();"

Does it matter if one uses onclick="spotTag();" or onclick="javascript:spotTag();" ?

Still need to get the tag functionality tested.

Thanks

rocknbil

4:09 pm on Apr 23, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



edited, oops missed something, doh.

I'm not sure of the intent here, but can see a couple things. First, I'm not sure where the document.write is intended to write to. But it's loading a blank screen, I think, because of this.

document.write('<IMG SRC="http://example.com/test.gif='+ a + '?" WIDTH=1 HEIGHT=1 BORDER=0/>');

It appears your intent is to add a query string to the image file to insure it doesn't load a cached image. But what it's really doing is creating a munged file extension, like

test.gif=12345345345?

what you want is

test.gif?12345345345

so

document.write('<IMG SRC="http://example.com/test.gif?'+ a + '" WIDTH=1 HEIGHT=1 BORDER=0/>');

should do that.

Second, you have two onclicks, only one is needed, in the image map.

<area shape="rect" coords="1,0,126,17" target="_blank" href="example" onclick="spotTag()"/>

Note onclick, not onClick, for XHTML, and you have an extra alt in the image, you can remove it.

Does it matter if one uses onclick="spotTag();" or onclick="javascript:spotTag();" ?


Technically, no, it still works with the deprecated javascript: , but javascript: is not a valid URL/URI. So you never need to use it.

when does one add "return false;" ?


Whenever you want to stop the default action of an event to allow Javascript to take over. The explanation below is a good example of usage on an anchor: it stops navigation to the link in the href. It's also useful in form validation, stopping the submit until JS decides the data is ok, in which case you can return true or use form.submit() within the validation function.

A side note: if your intent is to replace placeholder.gif with test.gif, there is an easier way. Assign an id to placeholder.gif,

<a href="example" onclick="return spotTag(this.href);"><img id="placeholder" src="placeholder.gif" width="126" border="0" height="19" alt="Img"/></a>

then just overwrite the source of it, something like 


function spotTag(url) { 
 if (document.getElementById('placeholder')) { 
 var img = document.getElementById('placeholder'); 
 var axel = Math.random()+""; 
 var a = axel * 10000000000000; 
 img.src='test.gif?'+a; 
 } 
 var day = new Date(); 
 var id = day.getTime(); 
 var params = 'width=600,height=600,scrollbars,resizable'; 
 var win = open(url,id,params); 
 return false; 
}


This has the added features of, and eliminates problems with,

- If JS is disabled, visitors can still access the content.
- target= is deprecated in XHTML (but is coming back in HTML 5)
- When you open a new window using target, it (generally) opens a new tab, and uses may not realize what has happened ,navigating away from your site. The new window approach above opens a window smaller than the viewport, and becomes obvious.

I tested this, it works, but I didn't test with a file that has spaces in the file name. Spaces in file names are evil. :-)

[edited by: Fotiman at 12:51 pm (utc) on Apr 27, 2010]

SilverLining

4:34 am on Apr 26, 2010 (gmt 0)

10+ Year Member



Rocknbill, thank you for taking the time to reply and for all the valuable information.

In the end I found a much easier (and better) way to get this working. I created a new page and embedded a PDF object in there. The tracking tag will only be picked up when the page is loaded. I noticed that when one prints the PDF page now, it prints a blank page. I added width and height properties (in pixels, as % seemed to collapse the div) to the object, but will need to figure out why it's not printing.

The code I posted was very sloppy; some of the things you mentioned I noticed. I added the second onclick to the img tag, because I read somewhere that IE needed this. The spaces in the file name was something I only picked up later, as this was saved by someone else and Firefox automatically adds plus (+) signs, however this did cause a small problem.

I realise "target" is deprecated, but it's always seemed to still work well, which I know is not a good reason to still be using it, but I look forward to this being supported in HTML5 again.

Lastly, the intention was not to replace test.gif with placeholder.gif, but merely to ping the 1x1 pixel for tracking purposes.

Thanks for the new window code - I will definitely look at using this.

tangor

4:42 am on Apr 26, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



About 25% of the web running NoScript will not see your page (Firefox and others also running PDF/java blockers) Stats here: [webmasterworld.com...]

HTML pure runs everywhere... combination of source beyond that reduces presentation.

SilverLining

7:07 am on Apr 26, 2010 (gmt 0)

10+ Year Member



Thanks for the link, tangor - very interesting. Our site is heavily dependent on JavaScript, so supporting JS is not a business priority, though it would be interesting to see what % of the bounce rate have JS disabled.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 12:45 am May 14, 2026