Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Canvas and easel question

Reply
Thread Tools

Canvas and easel question

 
 
Csaba2000
Guest
Posts: n/a
 
      02-28-2005
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


 
Reply With Quote
 
 
 
 
Csaba2000
Guest
Posts: n/a
 
      03-01-2005
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/showthr...9&page=1&pp=15

Csaba Gabor from Vienna


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to couper contenier of a canvas in an outer canvas??? olsr.kamal@gmail.com Python 10 03-15-2013 08:46 PM
Canvas with scrollbars - how to get correct canvas coordinate when the scroll bars have moved? PhilC Python 2 10-25-2004 11:57 AM
Canvas scrolling - scrollBar become "disabled" on change in canvas Askari Python 2 08-30-2004 02:56 PM
Tkinter Canvas/Grid question Gary Richardson Python 6 09-12-2003 12:21 PM
Tk Canvas text question Gary Richardson Python 1 08-26-2003 08:01 AM



Advertisments