We Keep Coding

Combine 7 images into one, one on top of each other and output as single image?

I've tried aligning all images on top of each other, it worked but because it was position:absolute; the final result was floating all around page. (It's in my other question I asked today on SO)
So I am thinking alternative ways,
I have a web page which dynamically loads images like this:
<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/images/char_elements/base_dark.png">
<img src="http://chaterix.com/public/images/char_elements/eyes/blue.png">
<img src="http://chaterix.com/public/images/char_elements/hair/blond.png">
<img src="http://chaterix.com/public/images/char_elements/mouth/happy.png">
<img src="http://chaterix.com/public/images/char_elements/pants/patrick.png"><img src="http://chaterix.com/public/images/char_elements/shoes/bleu2.png">
<img src="http://chaterix.com/public/images/char_elements/torso/google.png"></div>
I am wondering - is it possible to use JavaScript (like PHP GD) to combine all 7 images into one image and output on page using javascript?
So say instead of printing out the above code, it would do something like this:
<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/tempGenerated/character.png">
</div>
Is this possible? I am just sick of position absolute and stuff floating around, so if JS could combine 7 images and make it as 1 that would fix the problem.

This should be really simple with CSS and position absolute. I know you said you are looking for a different way, but this should be doable. Are you setting top, bottom, right and left position for the images? Don't forget that you need to add the px after the number. Also don't forget to set the position property on your parent element, or position absolute gets wonky.

if you use position: absolute correctly, things shouldn't be 'floating around the page'. Give the parent position: relative and they will be relative to this div. Give it a top and a left value, if you give it all 4 it will skew when you resize the page/div

How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?

How do you create a perfectly scalable button in HTML/CSS3/jQuery+Plugins using images to provide borders and corners?
I have thought of a method that is absolutely messy, and I believe there are much better ways to solve the problem.
My method involves something like this:
<div class="button-container">
// The corners are all the same image, just rotated for the specific corner
// (using CSS)
<div class="top-right"></div>
<div class="bottom-right"></div>
<div class="top-left"></div>
<div class="bottom-left"></div>
// The (height, width) of the top/bottom edge are (5px,1px), so they can
// repeat-x (or be stretched infinitely with no loss of quality), likewise
// for the left/right edges, they can repeat-y (or again be stretched).
<div class="top-edge"></div>
<div class="bottom-edge"></div>
<div class="left-edge"></div>
<div class="right-edge"></div>
// This simply fills the center of the button, with padding on every
// edge to allow for transparency on the corners.
<div class="center-fill"></div>
</div>
People who can solve my problem see where that is going.
More info/clarification provided on request.
Edit: Not sure why you'd need a fiddle, my method is pretty self explanatory, and if you can't figure it out Smart way to add corner image to DIV border on all four corners
That doesn't solve my problem though, my method is exactly what I do not what to use. I am trying to make an button that is scalable, similarly to how pure CSS3 buttons are scalable. If I want the top edge border of my image to be a 1-pixel wide 5-pixel high image that is stretched horizontally or repeated on the x-axis, I must use an image. I want an elegant solution to constructing a button out of images and CSS 'tricks'.

Try using border images, an great example is given here:
http://www.css3.info/preview/border-image/
border-image: url(border.png) 27 27 27 27 stretch stretch;
You can use different images for the corners like this:
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

javascript - rollover effect on overlapping transparent images

I want to add rollover effect on overlapping transparent images.
For example:
The following image is divided into 5 parts and I want to add rollover effect (different image) on each of them
When O tried with div or img tag, the image is rendered as a rectangle so rollover effect is not proper. When i rollover on green part between yellow, the yellow image gets highlighted because its z-index is high.
Following is the code that I tried:
<body>
<br />
<img src="part1.png" onclick="console.log('test1');"/>
<img src="part2.png" onclick="console.log('test2');" style="position:absolute; left:30px; top: 19px;"/>
<img src="part3.png" onclick="console.log('test3');" style="position:absolute; left:70px; top: 15px;"/>
<img src="part4.png" onclick="console.log('test4');" style="position:absolute; left:95px; top: 16px;"/>
<img src="part5.png" onclick="console.log('test5');" style="position:absolute; left:123px; top: 24px;"/>
</body>
images => , , , ,
I don't want to use jQuery, if possible.

The way I did this sort of thing is to place all the image elements, then put one big invisible (transparent) image over the top ("big" in the CSS, the file is actually 1x1 pixel). Then apply an imagemap to the topmost image. Result can be seen here: http://pokefarm.org/

Thanks Kolink and others for their responses. I tried to create image map as Kolink suggested but it was too difficult and also if i made a slight change to the image, then i would have to create a new image map.
I replaced this part with a flash swf file. It was far easier for me to create this kind of thing in flash.

Expand Image Vertically Without Disrupting the Flow with Javascript & CSS

My Progress is # http://codebucket.webatu.com/code/portfoliotest/index.html
Code on JSfiddle: http://jsfiddle.net/warmlaundry/qJbG4/70/
I want to make the edges of the 'f' and 'l' stretch to the edge of the page. I'm just expanding the height of two images that sandwich the word.
I want the word itself to stay put, and I don't want the expanding images to displace any other elements.
Is there an easy way to achieve this? I imagine it has to do with positioning correctly, but I still don't have a full grasp of the subtleties of CSS positioning.
I apologize if this question is a repost; I couldn't think of a good way to phrase the question without posting my own example.
edit: here's my code (since the link seems to be bad)
<html>
<head>
<style type="text/css">
#portfolioBottom{position:relative;top:-1px;}
#portfoliotop{position:relative;top:1px;}
</style>
<script type="text/javascript">
var heightBottom;
var heightTop;
var interval;
function addHeight(){
document.getElementById("portfolioBottom").style.width="249px";
heightBottom = parseInt(document.getElementById("portfolioBottom").style.height);
heightBottom=heightBottom + 5;
document.getElementById("portfolioBottom").style.height=heightBottom;
document.getElementById("portfolioTop").style.width="210px";
heightTop = parseInt(document.getElementById("portfolioTop").style.height);
heightTop=heightTop + 5;
document.getElementById("portfolioTop").style.height=heightTop;
}
</script>
</head>
<body>
<button onclick="interval=self.setInterval('addHeight()',1);">Start</button><button onclick="interval=window.clearInterval(interval)">Stop</button><br /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio top.png" id="portfolioTop" style="height:6px;" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio.jpg" id="portfolio" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio bottom.png" id="portfolioBottom" style="height:6px;" />
</body>
</html>

I've gone with positioning the two extended bits and also I put the images as a background image to divs which then did the work.
Have just used your images (with positioning it could probably be done with a single image doing both bits, and sorry I didn't correct the missing pixel off the main image, I just overlapped the pixel for now, hence the cutoff look corrected the missing pixel on the main image would fix that ;) -
then, once positioned - I just animated the height and top/bottom negative positions simultaneously
I can't do JS so the demo's with jQuery, but hopefully the logic of the positioning will help you do the same in JS
also in mine I restricted the body height to stop it scrolling on forever, this might not be practical in real terms, but becasue the two images always go to the same height, the reverse effect brought them back together too.. so advantages maybe?
the live example

What about just using CSS and positioning it as a background image?
html {
margin:0;
padding:0;
height:100%;
background:#fff url("//imgur.com/qJMrs.png") 2em 50% fixed no-repeat;
}
Demo: jsfiddle.net/Marcel/SMs9j (fullscreen)

How to have screen revert to BLACK between pages?

0
Hi - I tried out the Background Image Scaling script and with Cybr's update it works like magic. It SCALES the image perfectly. No distortion.
BUT, my image isn't "computer friendly". I.e.: Not 1024 X 768 or even close to that. (Heck, my monitor has a wide screen, so it isn't 1024 X 768 either! Is anybody's anymore?)
Anyhow, this creates a problem inasmuch as, unless I size the window from the bottom up it ends up with a white "stripe" beneath it.
What I would REALLY like for it to do is have that white to be BLACK.
My "usual" BG color/text etc. code is like:
<body bgcolor="#000000" text="#fcba1e" link="#0000ff" vlink="#800080" alink="#ff0000">
(Site won't let me add the arrows here.)
I've tried inserting this in various places with no success. Any ideas for a workaround would surely be appreciated !
Thanks ! Bill

Before trying anything, I recommend you replace your
<body bgcolor="#000000" text="#fcba1e" link="#0000ff" vlink="#800080" alink="#ff0000">
with css.