I'd like to accomplish the following using javascript & css:
Open a webpage, and in that webpage:
Load a separate document into an iframe with no scrollbars.
The separate document loaded in the iframe, is a basic html doc
containing 1 large image (several times larger than the iframe)
Arrange so that a user may click on any currently visible part of the
image, and drag the whole image around within the iframe using the
mouse.
I'm not neccessarily looking for 100% working code, just a logical
description of what javascript functions / css declarations / html
tags I would need to use.
- The answer 'this is not possible' backed up by references is fine,
but will only collect the question fee.
- An answer containing a basic run down of all the required code
components will collect additional $5 tip
- a working code example, written by a researcher, or linked from a
web resource, which I could easily modify to suit (i.e. dimensions,
position of iframe) will collect additional $10 tip |
Clarification of Question by
gan-ga
on
15 Aug 2003 09:04 PDT
Basic code I have so far:
In the parent window, to create the iframe:
<iframe width="400" height="200" scrolling=no
src="../myurl/xyz.htm"></iframe>
& in xyz.htm:
<html><head>
<title>title</title>
<meta http-equiv="imagetoolbar" content="no">
</head>
<body>
<img style="container:positioned;position:absolute;top:0;left:0"
src="largepicture.jpg">
</body></html>
& the part I'm asking for help with, is in 'clutching' the image with
a mouse click, & then being able to move the image about within the
iframe by dragging the mouse.
|
Clarification of Question by
gan-ga
on
15 Aug 2003 09:07 PDT
- let me know if the question fee would warrant being raised, I
imagined this to be fairly simple but if it is not.... :)
|
Clarification of Question by
gan-ga
on
15 Aug 2003 09:35 PDT
using this script, I can track the mouse pointer position.. (the
example gives the result in the status bar in ie6) but I still could
do with some assistance getting it all together ;)
<script language="JavaScript"><!--
if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mtrack;
function mtrack(e) {
var text = 'Coordinates: ';
if (document.layers) text += e.pageX + ',' + e.pageY
else text += event.x + ',' + event.y;
window.defaultStatus = text;
}
//--></script>
|
Clarification of Question by
gan-ga
on
15 Aug 2003 10:11 PDT
Okay, I put the following halfway-stage code into the document with
the image, which is loaded in the iframe. The image is identified
within that document as 'id=map'.
<script type="text/javascript">
<!--
if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mtrack;
function mtrack(e) {
if (document.layers)
{
xc = e.pageX;
yc = e.pageY;
}
else
{
xc = event.x;
yc = event.y;
}
//tie the middle of the image to the pointer - clumsy method
map.style.left=(xc-1250);
map.style.top=(yc-800);
}
//-->
</script>
this works fine if you pass the mouse pointer over the iframe - the
image moves, following the mouse.
problems:
I only want it to follow the pointer when there is a left-click
present.
As it stands, it positions the image relative to the absolute pointer
position which leads to the image 'jumping' when the pointer leaves
the iframe then returns at at different point. some code is needed to
make the image 'echo' the motion of the mouse pointer, without
absolutely positioning itself at the precise x-y coords all the time..
if you follow, I know I'm being vague!
help!
|
Clarification of Question by
gan-ga
on
15 Aug 2003 11:00 PDT
& this might come in handy..
detecting the mouse button
http://www.webreference.com/js/tips/010111.html
(this link is for netscape but perhaps there is an equivalent for IE)
Okay, my time's up, gotta leave it :(
Question fee & $10 tip if you can figure it all into a coherent whole. TIA.
|
Clarification of Question by
gan-ga
on
15 Aug 2003 17:29 PDT
Closing this question shortly, any researcher who has put in time and
effort thus far make yourself and your preparatory research known, in
order to be compensated. I would not like to 'pull the rug' from under
the feet of someone who can demonstrate they had already begun to make
enquiries :)
Reason for closing question: solution found.
|
