|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Codewalkers Forums Sponsor:
|
|
|
|
#1
September 27th, 2009, 02:03 PM
|
|||
|
|||
|
Layering multiple images
Hi,
In my spare time I've been writing a game in php. For character creation I've currently got a form running where the user can select (via dropdown) the different features (color, eyes, outfit, backround, etc..) which then pulls the individual images, merges them, and saves back to the server so it doesn't need to be dynamically created all the time. I'd like to be able to display the images on the form as the user is selecting them. I'm just not sure where to start.. (images are all transparent pngs and, for example, if the user selects one of everything then changes their skin color selection, it would need to change the 'body' image and not just load on top of everything else) If someone could just point me in a direction I'd appreciate it. I'm at a loss as to where to even begin.. Thanks Joe
|
|
#2
September 27th, 2009, 04:39 PM
|
|||||||
|
|||||||
|
I would think you could just place the images right next to one another and use like a negative margin to "stack" them. this of course works best when all images are the same size. I did a little test of this by making 4 images, each 200px by 200px and just put them next to each other and all but the first have a margin-left of -200px. it worked fine. I made a little select box and a javascript image changer that changes an image based on the select box. replace the images with your images and this should work.
Code:
<html>
<head>
<style type="text/css">
img { height: 200px; width: 200px; }
</style>
<script type="text/javascript">
function changeIt(sel, eID){
img = document.getElementById(eID);
img.src = sel.value+'.png';
}
</script>
</head>
<body>
Image 1: <select onChange="changeIt(this, 'image1');">
<option value='T'>T</option>
<option value='E'>E</option>
<option value='S'>S</option>
<option value='T2'>T</option>
</select>
Image 2: <select onChange="changeIt(this, 'image2');">
<option value='T'>T</option>
<option value='E'>E</option>
<option value='S'>S</option>
<option value='T2'>T</option>
</select>
Image 3: <select onChange="changeIt(this, 'image3');">
<option value='T'>T</option>
<option value='E'>E</option>
<option value='S'>S</option>
<option value='T2'>T</option>
</select><br />
<img src='T.png' id='image1'><img src='T.png' style='margin-left: -200px;' id='image2'><img src='T.png' style='margin-left: -200px;' id='image3'>
</body>
</html>
also, each image should be on the same line or else they won't line up all the way from the new lines adding a space between the images. you can also set the z-index of each image so that they layer correctly. so for example if you know the body goes in back always then you can set that lower than the eyes which should be on top.
|
|
#3
September 30th, 2009, 08:33 PM
|
|||
|
|||
|
Thank you!
I only know the basics of Javascript and CSS (I know.. a travesty, but everything is self taught..) so I probably would've still been sitting here trying to figure it out otherwise. I really appreciate the code samples and suggestions. Joe
|
|
| Viewing: Codewalkers Forums > Other Technologies > Client Side Things > Layering multiple images |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
