[RESOLVED] teleporting images [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

View Full Version : [RESOLVED] teleporting images

babno

12-11-2008, 11:11 AM

I am making a joke site, as horrible and annoying as I can possibly make it. I want to know how I would get images to randomly teleport or bounce around the page.

GarrettW

12-11-2008, 11:42 AM

Say you have this HTML code for an image:
<img src="images/annoying.gif" id="image01">
then you could modify the position of the image with this Javascript: (I think. haven't tested it.)

curImg = document.getElementById("image01")
curImg.style.position = "absolute"

// and then, one of the following lines, using whatever number you want:

curImg.style.top = "125px"
curImg.style.bottom = "382px"

// then one of these lines, with any number:

curImg.style.left = "42px"
curImg.style.right = "83px"

but the "px" must stay in there. only change the number in front of it.

i think that should work.

babno

12-11-2008, 11:44 AM

thank you very much I will try that.

coothead

12-11-2008, 01:03 PM

Hi there babno,

and a warm welcome to these forums. :agree:

You can see a fairly silly example here...
http://www.coothead.co.uk/up_dn_lt_rt.html
...and the code here...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>ball moves</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">

<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#container {
height:100%;
background-image:url(images/diag_stripe.jpg);
}
#ball {
position:absolute;
z-index:1;
width:204px;
height:204px;
background-image:url(images/ball.gif);
background-repeat:no-repeat;
}
#butt_container {
position:absolute;
bottom:0;
width:300px;
text-align:center;
background-color:#474383;
color:#333354;
border:2px solid #000;
}
#butt_container input {
width:58px;
background-color:#cecee0;
color:#333354;
margin:10px 5px;
font-family:verdana,sans-serif;
font-size:13px;
}
</style>

<script type="text/javascript">

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
var x=0;
var y=0;
var right,left,ball,db,up,down;
var speed=10;
function init() {
ball = document.getElementById("ball");
db=document.body;
moverRight();
moverDown();
}
function moverRight() {
clearTimeout(left);
x+=8;
if(x>=db.offsetWidth-ball.offsetWidth) {
clearTimeout(right);
moverLeft();
}
else {
ball.style.left=x+'px';
right=setTimeout("moverRight()",speed);
}
}
function moverLeft() {
clearTimeout(right);
x-=8;
if(x<=0) {
clearTimeout(left);
moverRight();
}
else {
ball.style.left=x+'px';
left=setTimeout("moverLeft()",speed);
}
}
function moverUp() {
clearTimeout(down);
y-=8;
if(y<=0) {
clearTimeout(up);
moverDown();
}
else {
ball.style.top=y+'px';
up=setTimeout("moverUp()",speed);
}
}
function moverDown() {
clearTimeout(up);
y+=8;
if(y>=db.offsetHeight-ball.offsetHeight) {
clearTimeout(down);
moverUp();
}
else {
ball.style.top=y+'px';
down=setTimeout("moverDown()",speed);
}
}
</script>

</head>
<body>

<div id="container">

<div id="ball"></div>

</div>

</body>
</html>

¥åßßå

12-11-2008, 01:56 PM

as horrible and annoying as I can possibly make it

You need to use the <blink> tag, preferably inside a <marquee> block and with a hallucination inducing background :D

¥

babno

12-11-2008, 02:21 PM

This is my website so far (haven't had a chance to expiriment with your code yet). TUR YOUR SOUND DOWN epileptic ppl beware.
http://web.vtc.edu/users/cjb06271/CIS-1151/final/badness.html
Thanks for the welcome Coothead. That is the kind of movement i would like, but i don't want to give the user any choice.

GarrettW

12-11-2008, 02:31 PM

You need to use the <blink> tag, preferably inside a <marquee> block and with a hallucination inducing background :D

¥

yes to the hallucination-inducing background but the others... that's just plain wrong. :eek:

coothead

12-11-2008, 05:25 PM

Hi there babno,
That is the kind of movement I would like, but I don't want to give the user any choice.

Please recheck the link...
http://www.coothead.co.uk/up_dn_lt_rt.html
...and the code in my original post, you will find that the only option available to your visitor(s) is to disable javascript. :agree:

babno

12-11-2008, 08:01 PM

ok thanks the first time i went there were left, right, up, down, buttons that would prompt the movement. Thank you very much its perfect

coothead

12-11-2008, 08:07 PM

No problem, you're very welcome. :agree:

Pegasus

12-11-2008, 08:34 PM

What? No shaking page?

babno

12-11-2008, 11:05 PM

oo shaking? how would I do that?

Pegasus

12-11-2008, 11:27 PM

<SCRIPT type="text/javascript">



</script>

¥åßßå

12-12-2008, 04:05 AM

You're a sick sick puppy for bringing that script back to life :P

¥

Pegasus

12-12-2008, 10:10 AM

*lol* Well, he did want examples of what not to use on a website.

babno

12-12-2008, 10:37 AM

I think I'm going to make the subject of the time "epilepsy awareness" in support of finding a cure. I am having a few problems. http://web.vtc.edu/users/cjb06271/CIS-1151/final/bounce2.html thats what I get when I try the bounce thing pretty good but doesn't have everything else up with it (I couldn't get it to work while I used CSS or this happened http://web.vtc.edu/users/cjb06271/CIS-1151/final/bouncybadness.html ). the shaking just plain didn't seem to work probably something stupid on my part, though I did try to make a new website with only that code plus 1 image to verify shaking. I got a button to shake it(I don't want buttons people won't inflict this pain upon themselves) but the button didn't even work. I suppose I could put some buttons that say turn off music or exit, and have them not work.

coothead

12-12-2008, 12:28 PM

Hi there babno,

the shaking script that Peg posted is not guaranteed to work in all the modern browsers. :disagree:
They tend to have built in protection against aggravation. :agree:
Nevertheless the code needs a few extra lines to get it to work automatically...

<script type="text/javascript">



if(window.addEventListener){
window.addEventListener('load',shake,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',shake);
}
}

function shake() {

var n=20; /* increase this value for more shaking */

if(self.moveBy) {
for(i=10;i>0;i--) {
for(j=n;j>0;j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}

</script>

¥åßßå

12-12-2008, 12:39 PM

coothead

12-12-2008, 01:04 PM

Hi there ¥åßßå,
You should be shot for posting that
You are, as usual, totally correct in you judgement. :agree:

I was going to offer the OP an infinite alert script - ((:supereek:)) - to entertain his/her friends
but just knew that you would have had me hung, drawn and quartered for my sins. :D

GarrettW

12-12-2008, 01:08 PM

most certainly. we could not condone that kind of coding behavior.

¥åßßå

12-12-2008, 01:12 PM

entertain

Sarcasm at it's finest ;)

.... although you missed out flaying, vats of overly warm oil, irritating insects that annoy you when vertically sunbathing in some exotic desert

¥

*edit*
bugger, I can't even get a rep point right, sorry Garrett :P

GarrettW

12-13-2008, 07:14 PM

so what did you mean to do??

babno

12-15-2008, 08:50 AM

Hi there ¥åßßå,

You are, as usual, totally correct in you judgement. :agree:

I was going to offer the OP an infinite alert script - ((:supereek:)) - to entertain his/her friends
but just knew that you would have had me hung, drawn and quartered for my sins. :D
Thanks for yer help. castrated is another nice words. anyways, infinite alert script? is that like the 6 sound files I have playing on loop that you can't turn off? or something better?

coothead

12-15-2008, 10:09 AM

Hi there babno,

If you are hell bent on losing your friends, I can give you the script but be prepared to run for the hills. :agree:

babno

12-15-2008, 10:29 AM

Hi there babno,

If you are hell bent on losing your friends, I can give you the script but be prepared to run for the hills. :agree:

indeed I am, what have they ever done for me. although at this point in time I would be more interested in answer for my other thread if possible.
http://www.htmlforums.com/html-xhtml/t-forms-causing-image-problems-also-sizing-problems-111036.html

its my final for class, due today. If you could help me there as well I would be most thankful.

coothead

12-15-2008, 01:16 PM

Hi there babno,

here is the example that you requested, it is initiated by an onclick handler for safety.
For maximum aggravation, the highlighted code can be removed. :agree:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></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">

<style type="text/css">
#clickit {
width:260px;
border:3px double #f00;
color:#f00;
text-align:center;
cursor:pointer;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',mytest,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',mytest);
}
}

function mytest(){
document.getElementById('clickit').onclick=function() {
num=4;
for(c=0;c<num;c++) {
alert('This is alert number '+(c+1)+'.\nYou have '+(num-c-1)+' alerts to come.');
}
}
}
</script>

</head>
<body>

<div id="clickit">
<h1>Warning</h1>
<h2>Do not click here</h2>
</div>

</body>
</html>

Sorry ¥åßßå. :o :o :o

¥åßßå

12-18-2008, 12:19 PM

There are days when even an elephant gun isn't big enough :|

May you burn in hell forever .... assuming you believe in hell .... if not then try and feel uncomfortable for a while :D

¥

Pegasus

12-18-2008, 11:43 PM

Hey guys, lay off Coot. He's doing the right thing by supplying this code. Go back and read the posts again. Sounds like this is a class assignment of what NOT to do for a web page. We're teaching not just him but others that'll see the page what NOT to do by example. How are they going to know *for sure* what's good if they don't see what bad looks like?

We're also teaching something else. When you put a lot of javascript on one page, it not only slows the page loading down, but the various scripts can interfere with each other. We're teaching a bit of programming thinking, too.

¥åßßå

12-19-2008, 01:36 PM

uhuh ..... I'm still gonna shoot him .... there's low and there's LOW, and that's scraping the bottom of the barrel ( not to be confused with the barrel of the elephant gun I'm gonna use to shoot him :| )

¥

Pegasus

12-19-2008, 03:32 PM

You're going to shoot him with an elephant gun. I only have one question. How are you going to get the bullet to go through the small wires from your computer to his and out his monitor? It's physically impossible.

Now if you were to consider getting a laser..... ;)

GarrettW

12-19-2008, 03:51 PM

you can use my green laser pointer!

Pegasus

12-19-2008, 04:04 PM

You can only use green laser pointers if you live outside Calgary and it's only for shooting at airplanes. (And yes, some **** is doing that.)

coothead

12-19-2008, 04:26 PM

Hi there ¥åßßå and GarrettW,
do not waste your time trying to eliminate 'coothead'. :disagree:
Many have tried and all have failed. :disagree:
What you do not seem to understand is that 'coothead' does not exist other than as a figment of your imagination. :agree:

Pegasus

12-19-2008, 05:01 PM

Not quite dear. You're a pigment of our imaginations - a horse of a different colour. ;)