C
Csaba2000
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
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