Basic Image Positioning

John Leeke

How are images positioned on a page?

In particular, how do I adapt the following javascript code:

**********
<img src="officecam0000.jpg" name="myImageName">
<script language="JavaScript">
function reloadImage() {
var now = new Date();
if (document.images) {
document.images.myImageName.src = 'officecam0000.jpg?' +
now.getTime();
}
setTimeout('reloadImage()',10000);
}
setTimeout('reloadImage()',10000);
</script>
**********

so that it positions and sizes the image the same as this html code:

**********
<p align="left"><img border="0" src="officecam0000.jpg" width="150"
height="130"><br>
OfficeCam(10sec.update)</p>
**********

I am new to javascript, so you may have to spell it out for me.

Thanks for your help.

John

Jul 23 '05 #1

Subscribe Post Reply

1515

Grant Wagner

John Leeke wrote:

How are images positioned on a page?
They are positioned according to HTML layout standards... that is, an
image appears inside inline elements inline and if placed in a block
element will be separated from other block elements according to the
default CSS of the specific HTML elements in a particular browser.

So you can test:


Test
<div><img ...></div>
Test


Test
<span><img ...></div>
Test
In particular, how do I adapt the following javascript code:

**********
<img src="officecam0000.jpg" name="myImageName">
Drop this.
<script language="JavaScript">
<script type="text/javascript">
function reloadImage() {
var now = new Date();
if (document.images) {
document.images.myImageName.src = 'officecam0000.jpg?' +
now.getTime();
}
setTimeout('reloadImage()',10000);
}
setTimeout('reloadImage()',10000);
Move this to <body onload="setTimeout('reloadImage()',10000);">
</script>
This script does no "positioning" of the image, it simply attempts to
guarantee (assuming client-side JavaScript) a fresh copy of the image
gets loaded into the user agent approximately every 10 seconds.
**********

so that it positions and sizes the image the same as this html code:

**********
<p align="left"><img border="0" src="officecam0000.jpg" width="150"
height="130"><br>
OfficeCam(10sec.update)</p>
**********

I am new to javascript, so you may have to spell it out for me.

<head>
<title>...</title>
<script type="text/javascript">
function reloadImage() {
if (document.images) {
document.images['myImageName'].src =
'officecam0000.jpg?' + (+new Date());
}
var t = setTimeout('reloadImage()', 10000);
}
</script>
</head>
<body onload="setTimeout('reloadImage()', 10000);">
<img name="myImageName"
border="0" src="officecam0000.jpg"
width="150" height="130">
<br>
OfficeCam (10 second update)</p>
</body>

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #2

Similar topics

list-style-image margin problem

by: Haines Brown | last post by:

I find that when I use list-style-image with galeon or mozilla, padding is inserted between the symbol image and the following list text, while under IE 5.0 it seems to be inserted before the image...

HTML / CSS

Opening image in new window without padding

by: D. Alvarado | last post by:

Hello, I am trying to open a window containing an image and I would like the image to be flush against the window -- i.e. have no padding or border. Can I make this happen with a single call to a...

HTML / CSS

I thought it was "impossible" to precisely dictate image position with html commands?

by: Doc | last post by:

I've read in a couple of different places including the archives of this forum that html doesn't allow you to precisely dictate the position of an image, but I found this command (again in the...

HTML / CSS

Basic image alignmen problem

by: Harry Putnam | last post by:

I keep stumbling around with varius alignment tags, even using STYLE tag with absolute positioning but not getting a simple job done. I have an arrangment like this: ...

HTML / CSS

Centering an image with text

by: Jerry Camel | last post by:

I want to center an image on the screen and have text centered over the image. What's the best way to do this? I've been playing with style tags and I can get the stuff to center automatically...

ASP.NET

Positioning text over image, works with IE but not Firefox

by: Jason | last post by:

I don't usually use CSS positioning very much, but I thought that I understood the concept until I got into this one. The site is using a mixture of tables and CSS (to make sure it works well on...

HTML / CSS

background-image flicker

by: seamlyne | last post by:

The first method I ever used for multiple state buttons was to create a graphic for each button for each state: AboutUs_on, AbooutUs_over, AboutUs_out, etc. That works great when there are just a...

HTML / CSS

Image Problem !

by: mr. ambastha | last post by:

Hello, I have 4 large images ( 1024 x 1024). All four images constitute one large image when kept side by side. I want to show that larger image on a webpage with a smaller image area (say,...

Javascript

Cross Browser Bullet Image Positioning

by: vunet | last post by:

When I use image as a bullet within LI element I have different image positioning results in Firefox and IE6. IE6 puts the image on top and far from left LI's border. Firefox puts it nicely in the...

HTML / CSS

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

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

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware