I have an image with size 3000 X 3000, I want to display it with in <Iframe> tag with size 500 X 400 without scrolling, but I need to move(scroll) the image with mouse ,how can I do it??
any help please
I said the life is a sense of victory and no victory without efforts
fdi
Member
55 Points
106 Posts
Iframe with mouse scrolling
May 28, 2008 09:27 PM|LINK
hello
I have an image with size 3000 X 3000, I want to display it with in <Iframe> tag with size 500 X 400 without scrolling, but I need to move(scroll) the image with mouse ,how can I do it??
any help please
Lance Zhang ...
All-Star
33091 Points
2361 Posts
Re: Iframe with mouse scrolling
May 31, 2008 04:27 AM|LINK
Hi fid
For your information, I think you want put a large image into a iframe on the page, and you can drag the image just like google map, is right?
If so, As far as I can see, that can be done by this way:
First. make your iframe no scroll just like the following code:
<IFRAME id=Viewer height=400 src="Photo.aspx?id=1" frameBorder=no width=600 scrolling=no></IFRAME>
Second. In your Photo.aspx, make sure it can support the drag and drop by mouse:
<SCRIPT language=JavaScript>
drag = 0
move = 0
function init() {
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(dragObj.style.left)
clicktop = window.event.y - parseInt(dragObj.style.top)
dragObj.style.zIndex += 1
move = 1
}
}
function mouseStop() {
window.event.returnValue = false
}
function mouseMove() {
if (move) {
dragObj.style.left = window.event.x - clickleft
dragObj.style.top = window.event.y - clicktop
}
}
function mouseUp() {
move = 0
}
</SCRIPT>
In the code above, the variable "drag" and "move" is a flag to the mouse state, hope this helps.
If I’ve misunderstood your problem, feel free to reply.
Thanks.
fdi
Member
55 Points
106 Posts
Re: Iframe with mouse scrolling
Jun 08, 2008 05:00 PM|LINK
it's work, thank you