Image Swapping and Size Issues

[trelos]

I apologize if this is maybe more of a CSS type question, I went back and forth on which forum to post it in.That said I've got some images in a line that are centered. I've got one of them setup to swap for another larger (in width) image than the original (this is intentional) onmouseover using a simple

document.image.src="secondimage.jpg"

replacement.However it will "push" the images to the right of it to the left. Is there a way I can force it to keep it's right edge and push extra image area to the left? It breaks the centering techincally so I understand why its doing that. I was playing around specifying relative positioning and changing that via javascript when I did my swap and it worked in theory in firefox but it didn't work in IE and some versions of Firefox it acted kinda funky. That was probably the wrong approach but it didn't really work anyways.I'm sorry I don't have a link that I can point to an example. But I think I hopefully described what I'm trying to do in enough detail that someone can give some suggestions.

[Jesdisciple]

I think I get what you're saying; my only problem is this:

However it will "push" the images to the right of it to the left.

Do you mean "to the right of it to the right"?If so, have you tried right-aligning the strip of images in some element (i.e., the body or a table cell) where it has room to its left? By default, it's left-aligned with room to its right, so that's where it goes. If its new width is wider than its container, it will make room to its right and go there anyway (using the overflow policy).

[trelos]

I think I get what you're saying; my only problem is this:Do you mean "to the right of it to the right"?If so, have you tried right-aligning it in some element (the body or a table cell) where it has room to its left?

Yes I meant to say that it pushing the images to the right further to the right.Here's a simplified sample with the idea of what it's doing. http://quamper.com/sample/sample.htmI'd like to keep the position of the red and the blue square constant rather than shifting further to the right.Like I said I tried messing with relative positioning using javascript to change the pixel values but it didn't work in some browsers.

[Jesdisciple]

Here's what I'm thinking:

<div id="center" align="right" width="100%"><img name="image1" onmouseover=swapimage() onmouseout=revertimage() src="image1.jpg"><img src="image2.jpg"></div>

Just make sure the div is at least as wide as the strip will get (not necessarily 100%, of course), and the right side will stay fixed.

[trelos]

Here's what I'm thinking:

<div id="center" align="right" width="100%"><img name="image1" onmouseover=swapimage() onmouseout=revertimage() src="image1.jpg"><img src="image2.jpg"></div>

Just make sure the div is at least as wide as the strip will get (not necessarily 100%, of course), and the right side will stay fixed.

Yeah that did that for my sampleI apologize however as mistakenly I over simplified my problem with that sample. My real scenario is slightly more complicated, I have 3 images like the following.http://quamper.com/sample/sample.htmThe idea being that the red/blue/yellow don't move.I've tried all kinds of CSS to get it to work by wrapping it in a div with the left specified and padding but nothing seems to do the trick with it.Should I be asking this in the CSS area, since my javascript is actually working?