Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Change one image to 27 different images

Reply
Thread Tools

Change one image to 27 different images

 
 
Spike
Guest
Posts: n/a
 
      01-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
 
Reply With Quote
 
 
 
 
@SM
Guest
Posts: n/a
 
      01-30-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.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 : (E-Mail Removed)
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
************************************************** ************
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Use one frame to change images in another frame. Leoa Javascript 7 06-20-2007 05:04 AM
how to change images based on action.Even clicking changed images should do respective actions? vj Javascript 3 01-12-2007 12:26 PM
Different tuples to one container? (One type of a pointer to point to different kinds of tuples?) fff_afafaf@yahoo.com C++ 5 10-05-2006 11:17 PM
A Paradise DNS address change? What change? There was no change. Tony Neville NZ Computing 7 09-22-2006 01:02 PM
Rotating images and different image dimensions John Javascript 4 06-01-2004 05:59 PM



Advertisments