Change one image to 27 different images

Discussion in 'Javascript' started by Spike, Jan 29, 2004.

  1. Spike

    Spike Guest

    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
     
    Spike, Jan 29, 2004
    #1
    1. Advertising

  2. Spike

    @SM Guest

    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:
    Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
    http://perso.wanadoo.fr/stephane.moriaux/internet/
    **************************************************************
     
    @SM, Jan 30, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    5
    Views:
    572
    Thomas J. Gritzan
    Oct 6, 2006
  2. Nospam
    Replies:
    6
    Views:
    481
    Bergamot
    Mar 23, 2007
  3. John
    Replies:
    4
    Views:
    119
  4. vj
    Replies:
    3
    Views:
    254
  5. Leoa
    Replies:
    7
    Views:
    225
    -Lost
    Jun 20, 2007
Loading...

Share This Page