Change one image to 27 different images

Spike · Jan 29, 2004

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

@SM · Jan 29, 2004

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.backgroundColor=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:[email protected]
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Image shifts to the right when export the page to pdf	4	May 5, 2023
How to properly insert a landing page within same container beneath an image element?	1	Oct 6, 2024
Pyautogui, cv2 and cannot find image	0	Feb 7, 2023
Only one table shows up with the information	2	Mar 29, 2023
Put image over the top of another image on hover	3	Feb 7, 2020
Angularjs newbie - second JSON datasource does not display	0	May 18, 2022
How to use ufixed when it involves multiplication a number of times?(VHDL question)	0	Aug 22, 2016

Change one image to 27 different images

Spike

@SM

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads