By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,853 Members | 842 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,853 IT Pros & Developers. It's quick & easy.

Change one image to 27 different images

P: n/a
Hello!
Im going to make a javascript for changing alot of images. But im not
sure how to do it., where to start..

Ok, first.. this is the isue.

I have 3 images(I call them 1a-3a).
when u click on image 1a u change" image x" to image 1a
when u click on image 2a u change" image x" to image 2a
when u click on image 3a u change" image x" to image 3a

So far Im in the game. But..

Then I have 8 other images(I call them 1b-8b).
So if u click on image 1a u change "image x" to 1a. Then if I click on
image 1b I want image 1a(the changed "imagex") to change.

(click on 1a-3a and change "image x"--> click on image 1b-8b -->
change the images 1a-3a) Messy? I know.

<tr><td>
[1a.gif]-[2a.gif]-[3a.gif]
</td></tr>

<tr><td>
[1b.gif]-[2b.gif]-[3b.gif]-[4b.gif]-[5b.gif]-[6b.gif]-[7b.gif]-[8b.gif]
</td></tr>

<tr><td>
[image x.gif]
</td></tr>

This makes the possibilty og 27 different images(hm.. i think

Do anyone know how to do this or hav anyone done something like this?
"Imagex" is a Box and the 1a-3a changes pattern. The other 1b-8b
changes color. SO it should be possible to first change pattern, then
change color on the pattern u choosed before.

Aight?

Regards

Y-man
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
@SM
Spike a ecrit :

Hello!
Im going to make a javascript for changing alot of images. But im not
sure how to do it., where to start..
very easy indeed !
(won't run on NC4.x)

<html>
<script type="text/javascript">
function init(){
if(document.images)
start = document.images['image_x'];
}
function changeImage(lastImage){
start.src=lastImage.src;
start=lastImage;
}
onload=init;
</script>
<style type="text/css">
body{text-align:center;}
img { width=90px; height=40px;}
table { margin:auto;}
</style>
<h2>First Game</h2>
<table><tr>
<td>Begin with this <br>image ==></td>
<td><img src='ax.gif' onclick="changeImage(this);"></td>
<td>continue with<br>any other image</td>
</tr><tr>
<td><img src='a1.gif' onclick="changeImage(this);"></td>
<td><img src='a2.gif' onclick="changeImage(this);"></td>
<td><img src='a3.gif' onclick="changeImage(this);"></td>
</tr><table>
<table><tr>
<td><img src='a4.gif' onclick="changeImage(this);" name="image_x"></td>
<td><img src='a5.gif' onclick="changeImage(this);"></td>
<td><img src='a6.gif' onclick="changeImage(this);"></td>
</tr></table>

<h2>Second Game</h2>

<script type="text/javascript">
function patern(lastImage){
document.images['image_y'].src=lastImage.src;
}
function changeColor(color) {
if(document.getElementById)
document.getElementById('Ix').style.backgroundColo r=color;
}
</script>
<style type="text/css">
#Ix {background-color:silver;}
</style>

<table><tr>
<td>Choice a color<br>below</td>
<td id='Ix'><img src='empty.gif' name="image_y"></td>
<td>continue with<br>chosing a patern</td>
</tr><tr>
<td><img src='blue.gif' onclick="changeColor('blue');"></td>
<td><img src='red.gif' onclick="changeColor('red');"></td>
<td><img src='yellow.gif' onclick="changeColor('#ff0');"></td>
</tr></table>
<table><tr>
<td><img src='p1.gif' onclick="patern(this);"></td>
<td><img src='p2.gif' onclick="patern(this);"></td>
<td><img src='p3.gif' onclick="patern(this);"></td>
<td><img src='p4.gif' onclick="patern(this);"></td>
</table>
</html>
empy.gif is a transparency gif
p1, p2, pn.gif are paterns gif with transparent background

Do anyone know how to do this or hav anyone done something like this?
"Imagex" is a Box and the 1a-3a changes pattern. The other 1b-8b
changes color. SO it should be possible to first change pattern, then
change color on the pattern u choosed before.


I expect you can only change background color
and change image by one which is tranparent.
if not you must have each pattern in 8 colors ==> 27 possibilities
( white + 8 colors ) * 3 patterns

my example 2 has 3 colors and 4 patterns

--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:st*********************@wanadoo.fr
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
************************************************** ************
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.