Canvas and easel question

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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:
<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 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.

Csaba Gabor from Vienna

Re: Canvas and easel question

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)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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";
<BODY background="image.jpg" style="margin:0" onload="adjustIFrame()">
<iframe id="iFrame" src="IFrameIE.htm" frameborder=0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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"
bgcolor=yellow>This is the easel</body></html>'">
        <FRAME src="about:blank">
    <FRAME src="about:blank">

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

You'll have to get your own picture

With thanks to the ideas contributed at:

Csaba Gabor from Vienna

Site Timeline