embedding anchor within document.write

cmdline

06-24-2009, 06:55 AM

I have not been able to embed an anchor with an href link within the document .write code below. This is part of an image map. On the html parent page, is a small thumbnail image used as an imagemap target that when mouse clicked, first opens up a window and second using the document.write function write that window with html including the full image again including formatting and text of whatever else I might include on that window. However when I attempt to write in an anchor with an HREF link, the window never opens and instead the raw code is written out on the parent window. In other words I am trying to put an html link into the opened window and may be running into a syntax issue. The below code without an anchor runs fine:

<map id="pic101"name="pic101">
<area shape="rect" coords="1,1,250,280" onClick="pic101_win=window.open('101.jpg', 'pic101_win', 'toolbar=no, directories=no, location=no, status=no, menubar=no, resizable=no, scrollbars=no, top=20, left=20, width=740, height=800');
pic101_doc=pic101_win.document;
pic101_doc.write('<body bgcolor=#777777><img src=101.jpg><br><p>GR0684 </p></body>');
return false;"></map>

While the below does not per above:

<map id="pic101"name="pic101">
<area shape="rect" coords="1,1,250,280" onClick="pic101_win=window.open('101.jpg', 'pic101_win', 'toolbar=no, directories=no, location=no, status=no, menubar=no, resizable=no, scrollbars=no, top=20, left=20, width=740, height=800');
pic101_doc=pic101_win.document;
pic101_doc.write('<body bgcolor=#777777><img src=101.jpg><br><p>some text blah blah.</p> <a href="abc.html" target="_top" > link to another page</a> body>');
return false;"></map>

Actinia

06-24-2009, 03:57 PM

It is difficult to see how your code fits into the page as a whole without the rest of your HTML. Could you give us a link? Or could you give us the whole page (within CODE tags, use the # sign on the bar).

If I were trying to do something like this, I would use a hidden DIV (display='none') with my HTML already in there. The onclick function would just set the display to 'block'.

I suspect that your problem could be that the HTML that you write to the window has not been fully parsed by the browser, which might explain the lack of response. My experience is that links within a DIV which is hidden then displayed work perfectly.

John

itsallkizza

06-24-2009, 04:32 PM

See lack of opening angle bracket highlighted below:

<map id="pic101"name="pic101">
<area shape="rect" coords="1,1,250,280" onClick="pic101_win=window.open('101.jpg', 'pic101_win', 'toolbar=no, directories=no, location=no, status=no, menubar=no, resizable=no, scrollbars=no, top=20, left=20, width=740, height=800');
pic101_doc=pic101_win.document;
pic101_doc.write('<body bgcolor=#777777><img src=101.jpg><br><p>some text blah blah.</p> <a href="abc.html" target="_top" > link to another page</a> body>');
return false;"></map>

cmdline

06-25-2009, 03:47 AM

Opps missing bracket was a typo copying into the board editor. The below are two code test pages. squareT.jpg is a 100x100 pixel simple one color square and square.jpg similar at 400x400 pixels. Without including href="test2.html target="_top" in the anchor it works fine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<style type="text/css">
table.gallery {border-collapse:collapse;empty-cells:show;;height:100%;width:100%; }
td.gallery {
font-family: "Times New Roman";
vertical-align:top;
text-align:center;
</style>

<body class="gallery" >

<map id="pic101"name="pic101">
<area shape="rect" coords="1,1,250,280" onClick="pic101_win=window.open('square.jpg', 'pic101_win', 'toolbar=no, directories=no, location=no, status=no, menubar=no, resizable=no, scrollbars=no, top=20, left=20, width=500, height=500');
pic101_doc=pic101_win.document;
pic101_doc.write('<body bgcolor=#777777><img src=square.jpg><br><p>This is a jpg image.<a href="test2.html target="_top" >test page 2</a></p></body>');
return false;"></map>

<table class="gallery"><tr><td class="gallery" colspan="4" style="height:125px; width:100%;">

</td></tr><tr><td class="gallery" colspan="4" style="height:125px; width:100%; text-align:left; background-color:#ddf;">

<p>This is the parent page.</p>

</td></tr><tr><td class="gallery" height="120 px" width="25%" ><img src="squareT.jpg" usemap="#pic101" width="100" ><br> imagemap thumbnail for square.jpg
</td></tr></table>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test2</title>
<body bgcolor=#fdd>
<p> This is the test 2 page.</p>
</body>
</html>