Javascript and images

thenextbesthang · Share | #1 (**permalink**) 11-19-2006, 01:05 PM

Heres the deal : I need to write a javascript code that essentially flips a given image over the x-axis. I keep getting an error "error in parsing value for property 'top'. I want to take a picture that is on the screen, make a new div like 100 pixels below it, and then output the upside down picture.

Here's the code:

Code:


<html>
<head>
 <style type="text/css">
  div {overflow:hidden; position:absolute;}
  span {position:absolute;}
 </style>
		<script type = "text/javascript">
			
			



</script>


</head>
	<body>

			
		<span style="left:0px; top:150px; width:750px; height:71px">
		<img src="project2.jpg"/>
		</span>
		
		<script type = "text/javascript"><!--
			for(var k=71;k>0;k--)
				
				{
		document.write("<div style='left:0; top: (300 + "+k+"); width:750; height:1'>");//create the div block
		document.write("<span style='left:0; top: -("+k+" - 71);'>");//create the span block inside the div block
		document.write("<img title='newpic' src='project2.jpg'/>");//put the image in the span
		document.write("</span></div>");//close everything
				}
//-->
</script>
</body>
</html>

Izzmo · #2 (**permalink**) 11-20-2006, 11:06 AM

Lol.. I didn't even know you could do this javascript.

I just learned something new today !!

StupidScript · #3 (**permalink**) 11-20-2006, 03:48 PM

How about performing the calculation before attempting to use it?

Code:

for(var k=71;k>0;k--)
{
t1=300+k;
t2=k-71;
document.write("<div style='left:0; top: "+t1+"px; width:750; height:1'>");//create the div block
document.write("<span style='left:0; top: -"+t2+"px;'>");//create the span block inside the div block
document.write("<img title='newpic' src='project2.jpg'/>");//put the image in the span
document.write("</span></div>");//close everything
}

thenextbesthang · #4 (**permalink**) 11-20-2006, 05:28 PM

it creates a picture that is the same size as the original, but I don't think that it is flipping it. It essentially just creates 71 of the first line in the image; in this case, just a lot of blue, not blue with text.

thenextbesthang · #5 (**permalink**) 11-20-2006, 05:32 PM

nevermind! Thank you very much for this useful insight!!!!

thenextbesthang · #6 (**permalink**) 11-20-2006, 05:32 PM

oh just so you know, i did what you suggested, but also took out the minus sign around t2. hehe.