Placing something in a random location on a page

Ok, I'm trying to make something appear in a random location on a page. I have an idea how to do it, make a random variable to represent its pixel hieght and width on a page, but I'm not sure how to assign a pixel height or width for a picture. Help plz?
(by the way I may be completely wrong about this)

THANKS!

Apr 19 '07 #1

Subscribe Post Reply

7735

Suudsu2200

Is there any way to make a picture apear on a random location on a page? I was thinking 2 random variables to represent the x and y location, but I dont know if thats possible, and if it is, I have no idea how to do it.

THANKS FOR YOUR HELP!

Apr 19 '07 #2

devsusen

136

100+

Hi,

I think u should go for DHTML effects that uses css. To be more specific u can use div and put the image within the div. Now using style tag for the div u can mention the height, width, positions of the div within the page. U can change the positions randomly using script to display the image at random places within the page.

susen

Apr 20 '07 #3

mrhoo

428

256MB

I wouldn't worry about size and position-
just use insertBefore a random element of the document.

Expand|Select|Wrap|Line Numbers

 function randomPlace(what){

    tag='*', pa= document.body;

    if(what.nodeType!=1) return false;

    var A= pa.getElementsByTagName(tag);

    var who;

    while(!who) who=A[Math.floor(Math.random()*A.length)] ;

    try{

        who.parentNode.insertBefore(what,who);

    }

    catch(er){

        who=false;

    }

    if(!who) arguments.callee(what);

}

var what=document.images[0];// reference some element
randomPlace(what)

Apr 20 '07 #4

mrhoo

428

256MB

If you are careful or careless you can skip the error handling:

Expand|Select|Wrap|Line Numbers

 function randomPlace(what){    

    var A= document.body.getElementsByTagName('*');

    var who;

    while(!who) who=A[Math.floor(Math.random()*A.length)] ;

    who.parentNode.insertBefore(what,who);    

}

Apr 20 '07 #5

Suudsu2200

Does anyone know how to place a picture on a random location on a page? I know how to specify where it goes but do you know how to make that random? Could you combine javascript and CSS to make a random number for the pixel location?

(P.S. If you can combine javascript and CSS plz tell it would help me a ton!)

THANKS!

Apr 26 '07 #6

iam_clint

1,208

Expert 1GB

sample code i wrote up for ya

Expand|Select|Wrap|Line Numbers

 
<script>

function RandomPlaceImg(img) {

 var img_holder = document.createElement("<div id=\"img_holder\" name=\"img_holder\">");

 img_holder.innerHTML = "<img src=\""+img+"\" id=\"theimage\" border=0>";

 img_holder.style.position = "absolute";

 document.body.appendChild(img_holder);

 var grab_image = document.getElementById("theimage");

 var x = document.body.offsetHeight-grab_image.height-5;

 var y = document.body.offsetWidth-grab_image.width-5;

 var randomx = Math.floor(Math.random()*x+1);

 var randomy = Math.floor(Math.random()*y+1);

 img_holder.style.top = randomx + 'px';

 img_holder.style.left = randomy + 'px';

 }

</script>

<body onload="RandomPlaceImg('http://images.google.com/intl/en_ALL/images/images_hp.gif');">

<input type="button" onclick="RandomPlaceImg('http://images.google.com/intl/en_ALL/images/images_hp.gif');" value="put more images randomly">

</body>

Apr 27 '07 #7

iam_clint

1,208

Expert 1GB

var x = document.body.offsetHeight-grab_image.height-5;
var y = document.body.offsetWidth-grab_image.width-5;this line here keeps the images completely visible , so it don't generate an image off the screen.

Apr 27 '07 #8

Suudsu2200

thx guys!!!!!!!!

Apr 27 '07 #9

Similar topics

random link form current page

by: Papa Legba | last post by:

I have huge page of links, to whcih I am currently adding. I would like to add a "random link" button which would parse the current page, extract all URLs then load a random link. Before I start...

PHP

calling a php script using img src ="random.php"

by: bhennon | last post by:

Hey all, I have a small php script that calls a random image at the following page. http://www.2006ymcanationals.com/random.php IT WORKS IF I go directly to the above link. I am trying to...

PHP

Bookmarklet for random url

by: Martin | last post by:

I've found examples of bookmarklets that select a URL from a page at random, but I'd like one that generates part of the URL at random. If you have a bunch of images that are named:...

Javascript

Error when placing Validators on a DataList Control.

by: Art Kedroski | last post by:

We are using .NET validators on most of our aspx pages. When the validator is contained within a datalist (i.e. the EditItemTemplate) the WebUIValidation.js file location tag is not rendered on...

ASP.NET

How can I do something like Google adverts?

by: Alan Silver | last post by:

Hello, Seems everyone's site nowadays has those "Ads by Goooooogle" boxes on them. I would like to do something similar, so I can provide an affiliate scheme. I don't want to supply HTML for...

ASP.NET

VS8 bug? something corrupted my Default.aspx

by: Beemer Biker | last post by:

I started seeing huge amounts of error messages such as "Validation (XHTML 1.0 Transitional):" Element schema is not supported". There was nothing wrong with that for 3 weeks and suddenly there...

ASP.NET

Placing a picture on a page randomly

by: Suudsu2200 | last post by:

Does anyone know how to place a picture on a random location on a page? I know how to specify where it goes but do you know how to make that random? Could you combine javascript and CSS to make a...

HTML / CSS

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice