SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Java Script

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    UK, Scotland
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, i'm hoping someone might be able to help me.

    I require to create an interactive online training module this includes some interactive selecting of images i.e.

    Take a look at this site this is what I would hope to achieve something a long those lines.

    http://learn.caim.yale.edu/ysc/demo/...p/dressup.html


    It allows the user to select an image and it responds with the correct answer. Is there possibly anyone who knows if there is a FREE available Java Script which could perform this function?

    I would be very grateful for any help on this one.

    Thanks,

    - Donna_F


  2. #2
    Hi there! Owen's Avatar
    Join Date
    Jan 2000
    Location
    CA
    Posts
    1,165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know how to do it, but that's a very nifty site. Never thought someone would make something like that for a lab tutorial. Cool!

    Owen

  3. #3
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I didn't peek at the site's code, but it can be implemented by using image rollovers and simple dHTML. Clicking the images of gloves, shoes, etc should do 2 things:

    1) rollover the main image (if correct)
    2) rewrite a hidden div and then display it.

    The code would look something like the following:

    <a href="javascript:doIt(1)"><img src='gloves.gif'></a>
    ....as many clickable images as you want...

    <img src="mainImage.gif" name="mainPic">

    <div id="myDiv" style="position:absolute;visibility:hidden">
    some text
    </div>

    function doIt(imageClicked)
    {
    switch (imageClicked)
    {
    case 1:
    mainPic.src = someSrc;
    writeDiv(1);
    case 2:
    mainPic.src = someSrc;
    writeDiv(2);
    }
    }

    The writeDiv function should check the browser, select the text to be written and write it (using innerHTML for IE or document.open, write, close for NN), and then display it.

    If you are new to dHTML, see the "dHTML: an Introduction" script/tutorial at my site.

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •