Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    embedding anchor within document.write

    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>

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    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

  • #3
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    See lack of opening angle bracket highlighted below:
    Code:
    <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>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #4
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •