Networking | Hardware | Software | Multimedia | System | Unix&Linux | MBA

Home>>Hardware>>Drag n drop Thumbnail Images to iFrame, with Original Size

Drag n drop Thumbnail Images to iFrame, with Original Size

Santhi.Thavasi
11-23-2004, 07:20 AM
Hi,

I'm currently facing a problem with dragging and dropping a thumbnail image onto an iFrame.

This is my requirement:

I have a popup window, from where i upload some images to a webserver. On Closing the popup window, i am showing the thumbnail versions of the uploaded images in the parent window.

This is the code i used to show the thumbnail version:
<img src = "someImage.gif" width=100 height=100>
This <img> tag lies inside a <td>

Now, i have an iFrame just below this thumbnail preview. I need to drag and drop this image onto the iFrame, But, i want the ORIGINAL SIZE OF THE IMAGE to be shown in the iFrame.

The problem i am facing is that, when i drag and drop, i get the image in the reduced size (with the height and width i've specified in the <img> preview tag).

Please help me out on this....I'm really stuck ! :confused:

Thanks a ton,
-Santhi.

p.s: I've attached a screenshot, to give a better picture of what i need....
(Had to set the file type as monochrome, cuz of file size limit, kindly bear with me)

Kor
11-23-2004, 12:53 PM
Ok I'll put here the solution we've both found it following a messenger discution (Shanti will probably insert it in the forum he also asked for help)

The method is object.removeAttribute()
The event is ondragend


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
function resize(){
var oImg= top.frames['ifr'].document.getElementById('ima');
if(oImg != null){
oImg.removeAttribute('height');
oImg.removeAttribute('width');
}
}
onload = function(){top.frames['ifr'].document.designMode = 'On';}
</script>
</head>
<body>
<img src=http://www.codingforums.com/archive/index.php/"00.jpg" width="50" height="50" id="ima" ondragend="resize()"><br>
<iframe name="ifr" id="ifr" src=http://www.codingforums.com/archive/index.php/"new.html"></iframe>
</body>
</html>


 

TOP

For more info

setting a minimum size
Auto Preview of Image 
Refresh with a query s
JS Validation obsolete
Javascript Pop up func
Slide show transitions
I'm a newbie...please!
how to write coding in
Advanced Debug Info 
.js file doesn't work 

News Archive

Adding Graphic To Text
re-direct form after s
pop up window controls
Clock on homepage - He
passing a param from a
Password Procection wi
document.title in same
focus onload 
Counting Wrong from Ri
Help needed on how to 

Related stories:

Help with an online order form using drop down boxes
Check to see if a page exists in Javascript.
variable scope
absolutely positioned scrollable area code wont work for me...
multiple slideshows on one page with linkable pics?
Math
Get an Error I don't recognize?

Copyright@2004-2005 www.zzcoke.com All Right Reserved

advanced web statistics