Shifting images in Html

[Eonwë]

Hail!

I'm looking for commands to shift images in html. Can the column and rows command be used this way, or need I use some sort of command that shifts in pixel measurements?

[Maglor]

Do you have an example, or perhaps a more descriptive way of explaining what you are attempting?

Maglor

[Eonwë]

Put simply, I'm looking for a way to move images up, down, left, and right in html.

[Maglor]

Hmm, sounds a bit too dynamic for plain html. If it is possible I hope you find what you are looking for, sounds beyond my scope .

Maglor

[arathorn]

Well, if you mean in regards to the size of a window, you could use javascript and CSS (cascading style sheets) to figure out the current size of the window, then calculate how many pixels (or percentage) horizontally and vertically that you want to place a picture based on the window (and even screen size). This can get dicey though depending on which resolution people are using on their PC.

Tables could be used to a certain extent too, but really depends how many pictures, their size, whether they are surrounded by text or not...

As Maglor suggested, can you give a more detailed situation/example of what you are looking to accomplish?

[Eonwë]

Well, I don't want to get too detailed in my descriptions :}

I want to be able to place an image, then move it in a particular direction until I get it in place with a part of the background.

That's about as detailed as I can get without spoiling anything :}

[arathorn]

hmm... do you mean you want the person to actually see the image move across the browser window/page to a certain location then stop?

If so, you might be able to reload the page a number of times with the picture in a different place simulating movement. That seems exessive though. Could be done in Flash if it was its own page i.e. all Flash 'movie'.

Don't think I've seen this done in Javascript, but could be possible. But reloading would be the only way to simulate movement in html as the page doesn't change unless you reload it or another.

hmmm...

[arathorn]

Ok, I found an example of a page that allows you to move images yourself along the background (using javascript). You can click a button to rotate them or drag the images around:

www21.brinkster.com/sashwin/survey/moving.html

If this looks like something that may help you, I could look further into which code you would need to have the image move on its own and stop at a particular point, if that's what you need. Tough to figure out without knowing the details

[Eonwë]

lol, I was apparently clearer in my first two posts :}

What I want is to have a background image, then place another image on the page, and adjust it so that the final result is the image overlapping a spot on the background. The image will not appear to move in the page, I just want to be able to adjust it, just like changing a font size: you notice the difference when you change it, but the person viewing the page only sees the final font.

Hope that's much clearer :}

[arathorn]

Ok, well the problem you might encounter here is that the background won't move (you can fix it), but when the window is resized the picture on top might. If the picture is in a table cell, the table readjusts with the window size. You could position the overlay picture with absolute values (and pixel references) but this may be a problem with different screen resolution sizes people might have.

Sounds to me like all you really want is one picture overlaying another at an exact point. Why not just paste one over the other and then just use the new pic as the background... UNLESS you are going to be changing the overlay pic at random or occasionally?

If the latter (overlay changes), then using CSS is most likely the best bet. I have seen some html code around that sets the absolute horizontal/vertical values, but think it only worked for Netscape/Mozilla browsers. Internet Explorer may require a bit of coding to do the same. One thing about coding for the net... too many variables <g>. I'll see if I can dig it (or something similar) up.

[arathorn]

Ok, I put together something simple. It's a fixed background picture with a superimposed foreground picture positioned at a specific spot over the background. I've zipped it up and sent it to you. Just unzip the 4 files into a single dir and dbl-click the 'position.htm' file. It basically uses a cascading style sheet (css file) that gets linked to, in the html.
I simply used a DIV tag and set the left and top margins.

Note, how the picture of the band superimposes itself over the background picture of the medieval characters in a specific place and does not move even if you resize the window. Looks fine in other resolutions too. I'll post the code here in case it helps anyone else:

---

POSITION.HTM file:

<html>
<head>
<title>Position Test</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>

< DIV class="one"><img src="band.jpg" border="0" alt=""></div>

</body>
</html>

---

STYLE.CSS file:

/* Class tags */

DIV.one { position : absolute; margin-left: 150px; margin-top: 300px; }

body
{
background-image: url(bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: 000000;
}

---

Hope that helps. Let me know if you have any problems or questions.