Basic Image Positioning

John Leeke

How are images positioned on a page?

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

**********
<img src="officecam0 000.jpg" name="myImageNa me">
<script language="JavaS cript">
function reloadImage() {
var now = new Date();
if (document.image s) {
document.images .myImageName.sr c = 'officecam0000. jpg?' +
now.getTime();
}
setTimeout('rel oadImage()',100 00);
}
setTimeout('rel oadImage()',100 00);
</script>
**********

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

**********
<p align="left"><i mg border="0" src="officecam0 000.jpg" width="150"
height="130"><b r>
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 Reply

1535

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="officecam0 000.jpg" name="myImageNa me">
Drop this.
<script language="JavaS cript">
<script type="text/javascript">
function reloadImage() {
var now = new Date();
if (document.image s) {
document.images .myImageName.sr c = 'officecam0000. jpg?' +
now.getTime();
}
setTimeout('rel oadImage()',100 00);
}
setTimeout('rel oadImage()',100 00);
Move this to <body onload="setTime out('reloadImag e()',10000);">
</script>
This script does no "positionin g" 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"><i mg border="0" src="officecam0 000.jpg" width="150"
height="130"><b r>
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.image s) {
document.images['myImageName'].src =
'officecam0000. jpg?' + (+new Date());
}
var t = setTimeout('rel oadImage()', 10000);
}
</script>
</head>
<body onload="setTime out('reloadImag e()', 10000);">
<img name="myImageNa me"
border="0" src="officecam0 000.jpg"
width="150" height="130">
<br>
OfficeCam (10 second update)</p>
</body>

--
Grant Wagner <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

Jul 23 '05 #2

Similar topics

16074

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 instead of after it. li.up { list-style-image: url(../bin/arrow.png); height: 1.4em; margin-left: -0.4em; }

HTML / CSS

11100

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 window.open function? I would prefer not to create a separate HTML page. So far all I have is the basic var cwin = window.open('images/KJV-THANKS.gif', 'Thanks', 'width=243,height=420,'); cwin.focus();

HTML / CSS

7991

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 archives of this forum) that apparently allows you to do exactly that. <img src="whateveryourfilelocationis" style="position:absolute; left:Xpx; top:Xpx"> What do you call this command? The responder of the particular message where I found it...

HTML / CSS

2452

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: ____________________________________________ | | | Large headline that is really an image | | of Elaborate text created in photoshop. | | This is presente in terms of % of page so |

HTML / CSS

2325

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 OR have the text appear on top of the image. But in the second case, the image and text aren't centered properly. Any help is appreciated... Jerry

ASP.NET

2318

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 older browsers; CSS is mainly used for fine-tuning), and I'm trying to get an image to overlap a table. The main table is centered on the screen, though. Here's the simplified layout that I'm using:

HTML / CSS

5671

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 few buttons. I'm creating interfaces now with many more buttons than "just a few". I solved the maintenance problem by having generic button images, one for each state, and having them be background images for text containers, DIVs in this...

HTML / CSS

1276

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, 256 x 256). I don't want to change the zoom level or even I dont want any scaling function. I just want to navigate the large image from top to bottom, either

Javascript

3506

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 middle and very close to left border. How do I control bullet image positioning? Please advise a nice hack. Thanks

HTML / CSS

9571

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10561

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10302

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9132

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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5505

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5639

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4277

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3803

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2976

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General