Canvas and easel question

Discussion in 'HTML' started by Csaba2000, Feb 28, 2005.

  1. Csaba2000

    Csaba2000 Guest

    Design goal: I'd like to have a picture or map in the
    background (the canvas) and an easel on top of that whose
    width (possibly height) I can alter by dragging the mouse.
    Sometimes I'll want the easel to disappear so I can let
    the user see what's underneath. The user (me) will be
    able to select actions to perform upon the image when
    I click or click and drag in it.

    Question: What page structure is recommended for this?

    Some ideas:
    1)
    <body onload="window.showModelessDialog(...)">
    <div ...>
    <img src=...>

    This is (structurally) a simple solution, and I can easily size/move
    the easel, but it only works on IE so I'd rather do something else.
    In particular, I'd like my approach to work with Firefox. Perhaps
    I could use window.open(...) and carefully manage who's on top.

    2) I could have a resizeable div as my easel. I've got some
    example code for this but the amount of code seems quite
    large. Perhaps someone could recommend a good example
    (for resizeable divs) for this approach.

    3) What about frames, considering that there is nothing to index?
    Frames already have the resizing built in so this would be a structurally
    simple arrangement, if possible. The idea would be to have a left
    frame and a (transparent) right frame with a background image
    for the entire window. But I have no idea how to set this up since
    a frameset doesn't allow for a <body> or <img> element.


    I am way open to other ideas. Although all of these ideas involve
    some script, I am posting here because what concerns me most is
    the underlying structure of the page. I'll deal with the script part
    separately once this basic issue has been decided.

    Thanks,
    Csaba Gabor from Vienna
     
    Csaba2000, Feb 28, 2005
    #1
    1. Advertising

  2. Csaba2000

    Csaba2000 Guest

    The goal was to have a (top left) docked, adjustable size easel above
    a background canvas. My best solution so far differs from the three
    ideas I had earlier, though closest to the FRAMES approach.

    The below works under IE 6 and Firefox 1.0 Note that Firefox has
    an ugly 1px vertical line artifact extending below the easel, and
    dragging in Firefox produces a huge amount of jitter. Sure would be
    nice to get rid of those.


    To try it, put the following 4 files in the same directory (and mind
    the wrapping, especially on IFrameIE.htm)


    Main.htm:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML><HEAD>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <TITLE>Background image testing</TITLE>
    <SCRIPT type='text/javascript'>
    function adjustIFrame() {
    iFrame = document.getElementById('iFrame');
    if (!document.all)
    iFrame.src = "IFrameFX.htm";
    }
    </SCRIPT></HEAD>
    <BODY background="image.jpg" style="margin:0" onload="adjustIFrame()">
    <iframe id="iFrame" src="IFrameIE.htm" frameborder=0
    style="width:100%;height:100%;FILTER:chroma(color=#FFFFFF)">
    </iframe></BODY></HTML>


    IFrameIE.htm:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>Iframe holder</title></head>
    <FRAMESET frameBorder="0" bordercolor=red border="1" cols="30%,*">
    <FRAMESET frameBorder="0" bordercolor=blue border="1" rows="*,*">
    <FRAME frameBorder="1"
    src="javascript:'<html><head><title>Easel</title></head><body
    bgcolor=yellow>This is the easel</body></html>'">
    <FRAME src="about:blank">
    </FRAMESET>
    <FRAME src="about:blank">
    </FRAMESET>
    </html>


    IFrameFX.htm:
    change frameBorder="0" to frameBorder="1" in IFrameFX.htm

    image.jpg:
    You'll have to get your own picture

    With thanks to the ideas contributed at:
    http://forums.htmlcenter.com/showthread.php?s=bafd4ff50afa51ab921116a5b59f217d&t=649&page=1&pp=15

    Csaba Gabor from Vienna
     
    Csaba2000, Mar 1, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Gary Richardson

    Tk Canvas text question

    Gary Richardson, Aug 26, 2003, in forum: Python
    Replies:
    1
    Views:
    389
    Fredrik Lundh
    Aug 26, 2003
  2. Gary Richardson

    Tkinter Canvas/Grid question

    Gary Richardson, Sep 11, 2003, in forum: Python
    Replies:
    6
    Views:
    3,086
    Jeff Epler
    Sep 12, 2003
  3. Askari
    Replies:
    2
    Views:
    715
    Askari
    Aug 30, 2004
  4. PhilC
    Replies:
    2
    Views:
    896
    PhilC
    Oct 25, 2004
  5. Replies:
    10
    Views:
    268
    Rick Johnson
    Mar 15, 2013
Loading...

Share This Page