Deanna475
03-21-2003, 03:02 PM
Hello all. I've come across a script that needs to be modified to suit my purpose, which is to act as a background image swapper, if you will, except the background images are coming from the user's hard drive.
The script originally was intended to select an image from the visitor's hard drive and the script will give the size of that image and also allow you to change the size and see what it looks like. IE only. The original script can be found here:
http://javascript.internet.com/equivalents/image-resizer.html
I modified the script to the point where I eliminated the references to changing the size of the image and the image does "swap" with an image selected from my hard drive. But what I need is for the image to appear in the table's cell as a *background* so that it is under the contents of the cell and tiles as a background image should. Here's the damage I caused:
<HTML><HEAD
<SCRIPT language=JavaScript>
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function showimg(form)
{
adres = form.image_file.value;
index = adres.indexOf(".gif");
index = index + adres.indexOf(".jpg");
index = index + adres.indexOf(".png");
index = index + adres.indexOf(".bmp");
if (form.image_file.value == "")
{alert("No image found");
}
else
{if (index == -3){alert("Unknown image type");
form.width.value=0;
form.height.value=0;}
else
{
var img_obj = new Image();
img_obj = form.image_file.value;
document.changing.src = img_obj;
document.changing2.src= img_obj;
document.changing.width = document.changing2.width;
document.changing.height = document.changing2.height;
set();
}
}
}
function set(){
}
// End -->
</SCRIPT>
</HEAD>
<BODY onload=set()>
<FORM name=f1>
<INPUT type="file" name="image_file"><br>
<INPUT type="button" name="show" value="Apply" onclick=showimg(this.form)>
<br>
<TABLE border=0 >
<TR>
<TD><IMG src="temple-small.jpg" name=changing></TD>
</TR>
</TABLE>
</FORM>
<DIV style="position:absolute; top:0px; left:-5000px; height:0px; width:0px">
<IMG src="temple-small.jpg" name=changing2>
</DIV>
</CENTER>
</BODY>
</HTML>
For what it's worth, my table cell that I want the image applied to has an id of "canvas". My page structure looks like this:
<DIV class="canvas">
<table border=0 cellpadding=10 cellspacing=0 width=533 height=384 >
<tr><td id="leftside" width=125 valign=top align=center bgColor="#A29876">
<td id="canvas" valign=top style="background:#DDD2C1">
<DIV><IMG SRC="images/gemicon.gif" border=0 height=72 width=90>Lorem ipsum dolor sit amet ...
</DIV>
</td></tr></table>
</DIV>
I think it's important to note that I know next to nothing about JS and if I modify a script without causing any errors, I think I'm doing great!! *S* So if I totally butchered the JS language, forgive me, for I know not what I do. *S*
Anyone want to help me fix this mess? Your assistance or feedback is greatly appreciated.
D.
The script originally was intended to select an image from the visitor's hard drive and the script will give the size of that image and also allow you to change the size and see what it looks like. IE only. The original script can be found here:
http://javascript.internet.com/equivalents/image-resizer.html
I modified the script to the point where I eliminated the references to changing the size of the image and the image does "swap" with an image selected from my hard drive. But what I need is for the image to appear in the table's cell as a *background* so that it is under the contents of the cell and tiles as a background image should. Here's the damage I caused:
<HTML><HEAD
<SCRIPT language=JavaScript>
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function showimg(form)
{
adres = form.image_file.value;
index = adres.indexOf(".gif");
index = index + adres.indexOf(".jpg");
index = index + adres.indexOf(".png");
index = index + adres.indexOf(".bmp");
if (form.image_file.value == "")
{alert("No image found");
}
else
{if (index == -3){alert("Unknown image type");
form.width.value=0;
form.height.value=0;}
else
{
var img_obj = new Image();
img_obj = form.image_file.value;
document.changing.src = img_obj;
document.changing2.src= img_obj;
document.changing.width = document.changing2.width;
document.changing.height = document.changing2.height;
set();
}
}
}
function set(){
}
// End -->
</SCRIPT>
</HEAD>
<BODY onload=set()>
<FORM name=f1>
<INPUT type="file" name="image_file"><br>
<INPUT type="button" name="show" value="Apply" onclick=showimg(this.form)>
<br>
<TABLE border=0 >
<TR>
<TD><IMG src="temple-small.jpg" name=changing></TD>
</TR>
</TABLE>
</FORM>
<DIV style="position:absolute; top:0px; left:-5000px; height:0px; width:0px">
<IMG src="temple-small.jpg" name=changing2>
</DIV>
</CENTER>
</BODY>
</HTML>
For what it's worth, my table cell that I want the image applied to has an id of "canvas". My page structure looks like this:
<DIV class="canvas">
<table border=0 cellpadding=10 cellspacing=0 width=533 height=384 >
<tr><td id="leftside" width=125 valign=top align=center bgColor="#A29876">
<td id="canvas" valign=top style="background:#DDD2C1">
<DIV><IMG SRC="images/gemicon.gif" border=0 height=72 width=90>Lorem ipsum dolor sit amet ...
</DIV>
</td></tr></table>
</DIV>
I think it's important to note that I know next to nothing about JS and if I modify a script without causing any errors, I think I'm doing great!! *S* So if I totally butchered the JS language, forgive me, for I know not what I do. *S*
Anyone want to help me fix this mess? Your assistance or feedback is greatly appreciated.
D.