Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

moving images

Status
Not open for further replies.
mackey333

mackey333

Technical User
May 10, 2001
563
US
This is a piece of code I found and I'm not sure how to modify it for what I need to do:

I'm not sure if this board formats html, so I put xmp tags on, this script moves the picture around in the upper left corner of the page, I need the picture to move down a colum of a table, how should I modify this code, or would it be better just to start over from scratch?

Code: 
<xmp>


<SCRIPT TYPE=&quot;TEXT/JAVASCRIPT&quot; LANGUAGE=JAVASCRIPT>
		<!-- Hide script from older browsers

		firstTime = true

		function moveIt() {
			if (firstTime) {
				if (document.all) {
					maxHeight = document.body.clientHeight-40
					maxWidth = document.body.clientWidth-40
				}
				else {
					maxHeight = window.innerHeight-40
					maxWidth = window.innerWidth-40
				}
				firstTime = false
			}
			
			if (document.all) {
				topPos = document.all.mover.style.pixelTop
				leftPos = document.all.mover.style.pixelLeft
			}
			else {
				topPos = document.mover.top
				leftPos = document.mover.left
			}
	
			chgXBy = Math.floor(Math.random() * 10)
			if ((halfChance() || topPos >= maxHeight) && topPos > 5) {
				topPos -= chgXBy
			}
			else { 
				topPos += chgXBy
			}
	
			chgYBy = Math.floor(Math.random() * 10)
			if ((halfChance() || leftPos >= maxWidth) && leftPos > 5) {
				leftPos -= chgYBy
			}
			else {
				leftPos += chgYBy
			}

			if (document.all) {
				 document.all.mover.style.pixelTop = topPos
				 document.all.mover.style.pixelLeft = leftPos
			}
			else {
				 document.mover.top = topPos
				 document.mover.left = leftPos
			}
	
			setTimeout(&quot;moveIt()&quot;,20)
		} 
		
		function halfChance() {
			if (Math.random() < .5) {
				return true
			}
			return false
		}

		// End hiding script -->
	</SCRIPT>
	<STYLE TYPE=&quot;TEXT/CSS&quot;>
		#mover {position: absolute; left: 5; top: 5;}
	</STYLE>	
</HEAD>
<BODY BGCOLOR=WHITE onLoad=&quot;moveIt()&quot;>
<DIV ID=&quot;mover&quot;>
	<IMG SRC=&quot;images/butterfly.gif&quot; WIDTH=32 HEIGHT=32>
</DIV>


</xmp>

thanks for any help - Greg
 
Sort by date Sort by votes
hi!

if u want to move the image in table - i think, u shuld use relative positioned layers (for IE - div with style=&quot;position:relative&quot; for NN - ilayer) but it looks a little bit weird for me (especially in NN): it is *a little* buggy and in this layer (lets say 'FatherDiv') u shuld neste your layer with picture. then - u may use any code to move this nested layer in FatherDiv

best regards, vic
 
Upvote 0 Downvote
ok, here is how I think you wanted the div's lined up:

Code: 
<div align=&quot;center&quot; id=&quot;testDiv1&quot; style=&quot;position: relative; background-color: #FFFFFF;  height: 100%; width: 100%&quot;> 

	<table align=&quot;center&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot;>
	
		<tr>
		
			<td>
            
            <div align=&quot;center&quot; id=&quot;testDivImg&quot;>
            
            	<img border=&quot;0&quot; src=&quot;testPic.gif&quot; width=&quot;24&quot; height=&quot;69&quot;>
            
            </div>
		
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
		
			</td>
		
		</tr>
		
	</table>
		
</div>

ok, now how do I access these div's with javascript
 
Upvote 0 Downvote
hi!

try this code:

<html>
<head>
<title>movin image in table</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<script language=&quot;JavaScript&quot;>
<!--
function letsMove(){
obj=document.images.bla.style;
obj.pixelTop+=5
setTimeout(&quot;letsMove()&quot;,50)
}
// -->
</script>
</head>

<body bgcolor=&quot;#FFFFFF&quot; onload=&quot;letsMove()&quot; onclick=&quot;alert(obj.pixelTop)&quot;>

<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;2&quot; cellpadding=&quot;2&quot;>
<tr>
<td width=100 height=300 valign=top><div id=&quot;Layer1&quot; style=&quot;position:relative; left:0px; top:0px; width:100%; height:100%; z-index:1; background-color: #0000CC; layer-background-color: #0000CC; border: 1px none #000000&quot;><img name=&quot;bla&quot; src=&quot;booklets.gif&quot; style=&quot;position:absolute; width='222'; height='85'; top='0'; left='0';&quot;> </div></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</body>
</html>

it's workin for me in IE5.0 on PC if u wuld have problems - paste image into another layer (div tag) wich is positioned absolutely & move this div and modify the movin function for your needs...

hope i helped you

best regards, vic
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lupidol
  • Locked
  • Question
Alternate images not working
Replies
2
Views
111
lupidol
lupidol
c0deM0nK424
  • Locked
  • Question
auto detect viewport or screen size and load different images for flexslider carosel ?
Replies
0
Views
134
c0deM0nK424
c0deM0nK424
BrotherArnold
  • Locked
  • Question
Mouseover div problem with swapping images
Replies
2
Views
98
BrotherArnold
BrotherArnold
emozley
  • Locked
  • Question
Inserting images with jQuery
Replies
0
Views
85
emozley
emozley
mwebbo1
  • Locked
  • Question
Multiple backround images
Replies
2
Views
81
darryncooke
darryncooke

Part and Inventory Search

Sponsor

Back
Top