Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member ndbt's Avatar
    Join Date
    Jul 2005
    Posts
    7
    Member #
    10533
    Dear Web Design Forum,

    I am working on a website which is a guide to a specific set of archival documents. Perhaps the most important feature of the site is where it provides translations of documents found in the collection. I have presented these translations by creating an upper frame which shows a scanned image of the original (non-English) archival document, and a lower frame which has an MS Word-HTLM formatted translation of the document. Iíve made an image map to link portions of the scanned document to corresponding portions of the translation. This allows somebody glance through their original document and easily locate the desired portion of the translation.

    There are several features I would like to add to make the presentation of the translations more functional and user friendly, but as I am a beginner web designer I am not sure how to make these features or even if they are possible. Any advice would be greatly appreciated.

    First, I presently have anchor links from the scanned document to the translation using an image map. I would really like to have links in the other direction as well. I want people who are reading the English translation to be able to click on the text and jump to the corresponding portion of the scanned document in the upper frame. Is this possible? If so, how? Ideally, I would be able to use the regions of the image that are already defined by the image map to serve as anchors for the links in the translation.

    Second, I would like there to be a mouseover effect on the scanned document so that a border appears around the region of the image that constitutes the image map link. This is functionally important so that people know how much text is being lumped together as a single section.

    Third, it would be helpful for users if, after clicking an image map link on the scanned document, the corresponding region of the translation were highlighted. I have found an article (http://www.htmldog.com/articles/suckerfish/target/) which explains how to highlight page anchors using a combination of css and javascript, but this method only works within a single page. Since I am linking from one frame to another (meaning I am actually linking between pages) I canít get this method to work. If anyone could tell me how to adapt the suckerfish method to frames, or give me another method to produce the highlighting, I would be very appreciative.

    Thanks in advance for your help!

    ~Avi

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Can you give us a link to the page as it is now so we can look at the code and see how you might achieve what you want?

  4. #3
    Junior Member ndbt's Avatar
    Join Date
    Jul 2005
    Posts
    7
    Member #
    10533
    source for upper frame

    Unfortunately the page is not online yet. Below is the HTML for a sample document page. This is the page the appears in the upper frame. The lower frame contains only the text of the translation. (Of course, the page won't look like much without the css and the image of the document, but the structure is all there).

    Let me know if you need to see anything else.

    Thanks,
    Avi

    ***
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">



    <head>

    <title>Sworn Statement of Witness</title>

    <link rel="stylesheet" type="text/css" href="../../URO1.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    </head>

    <body>
    <div id="container">

    <div id="headerbar">


    </div>

    <div id="menu">

    <p>
    <a target="_top" id="home" href="../../home.htm">Introduction</a>
    <a target="_top" id="guide" href="../guide.htm">Guide to Documents</a>
    <a target="_top" id="access" href="../../access/access.htm">Access to Documents</a>
    <a target="_top" id="references" href="../../references/references.htm">Links/References</a>
    <a target="_top" id="glossary" href="../../glossary/glossary-de-en-master.htm">Glossary</a>
    </p>

    <div id="guidemenu">
    <p> <a target="_top" href="documents-BEG-general.htm">BEG-general documents</a>
    <a target="_top" href="background-BEG-general.htm">BEG-general background</a>
    <a target="_top" href="glossary-BEG-general.htm">BEG-general glossary</a>
    </p>
    </div>

    </div>



    <div id="pagelinks">
    <ul>
    <li><a target="_top" href="frameset-sworn-statement-witness.htm">Restore Frames</a></li>
    <li><a target="_top" href="zz-sworn-statement-witness-de.htm">German original without
    frames</a></li>
    <li><a target="_blank" href="zz-sworn-statement-witness-en.htm">English translation
    in new window</a></li>
    <li><a target="_top" href="###">PDF file for printing</a></li>
    </ul>
    </div>

    <h1>Sworn Statement of Witness</h1>

    <div id="mainbody">


    <p> Scroll down in the upper frame to see the scanned image of the German document. Click on a part of the image to be taken to the corresponding section of the English translation in the lower frame.</p>



    <map name="scanlinks">

    <area shape="rect" href="zz-sworn-statement-witness-en.htm#anchor1" target="english" coords="233,77 478,122">

    <area shape="rect" href="zz-sworn-statement-witness-en.htm#anchor2" target="english" coords="120,123 630,216">

    <area shape="rect" href="zz-sworn-statement-witness-en.htm#anchor3" target="english" coords="120,217 630,266">

    <area shape="rect" href="zz-sworn-statement-witness-en.htm#anchor4" target="english" coords="120,267 630,322">

    <area shape="rect" href="zz-sworn-statement-witness-en.htm#anchor5" target="english" coords="120,323 630,348">

    <area shape="rect" href="zz-sworn-statement-witness-en.htm#anchor6" target="english" coords="120,349 630,380">

    <area shape="rect" href="zz-sworn-statement-witness-en.htm#anchor7" target="english" coords="120,381 630,460">

    <area shape="rect" href="zz-sworn-statement-witness-en.htm#anchor8" target="english" coords="120,461 630,554">

    <area shape="rect" href="zz-sworn-statement-witness-en.htm#anchor9" target="english" coords="120,555 630,583">



    </map>
    <img usemap="#scanlinks" src="documents/sworn-statement-witness-full.gif" border="0">
    </div>

    </div>
    </body>

    </html>

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    The reason I asked for this, by the way, was so I could see whether you could do the reverse-linking you were talking about. I'm not entirely sure that you can do it with an image map. This is due to the fact that you can't really refer to a specific part of an imagemap. There's a possibility that you could use anchors in conjunction with the map to refer to specific areas, but I find myself doubting it.

    Are the imagemap shaps regular -- e.g., are the rectangles all the same size? If so, you may be able to split the image into multiple images and use a table. If you do that, it is far more likely that you'll be able to refer to specific areas.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com