SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up When text is entered correctly, image lights up/changes?

    Ok, here is what I am trying to do, here is a preview of my design from Photoshop that I did or view attachment if the link does not work : http://japanesefriend.zxq.net/webapp/hiraganaquiz2.jpg


    I am trying to have it when the user types in box the correct pronunciation for the Japanese symbol light up/change "images". Because regular text is a bit boring, I basically want the image to rollover/change to to red like in my preview above when the correct text is entered in the box. So again, for example

    なまえ

     when "na" is typed, i wish to have the image of "な change. Here is a code I have, but I cannot figure out how to have images instead of just text? If you have any additional code/text I would greatly appreciate it! Thank you so much.


    http://jsfiddle.net/MTVtM/2/


    Sincerely,
    Anthony
    Attached Images Attached Images
    Last edited by TelepathyDesigns; May 3, 2012 at 16:55. Reason: preview image did not work

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Instead of changing the background color, how about changing a background-image?

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's exactly what I need. Take a look at this preview/set up here. http://jsfiddle.net/adeneo/PT523/3/
    My main problem is I am not sure exactly where all the codes are supposed to go/what order. Can someone set up the a document/the right order for me so I can understand? Thanks!

    HTML
    Code:
    <ul>
        <li><img src="http://files.sharenator.com/grumpy_cat_Grumpy_Cats-s492x305-51794-580.jpg" />na</li>
        <li><img src="http://sleepycathollow.files.wordpress.com/2010/09/funny-pictures-cat-is-grumpy.jpg?w=500&h=374" />ma</li>
        <li><img src="http://www.adoptapetfenton.com/userfiles/grumpy%20cat.jpg" />ba</li>
    <ul>
        
    <br /><br />
    
    <input type="text" id="test" />
        
    <br /><br />
    Type the text in the boxes into the input, and see them change.


    Javascript

    Code:
    var text = ['na', 'ma', 'ba'];
    
    var happy = ['http://1.bp.blogspot.com/_QQ6fUQG95io/TUYo-3Crs-I/AAAAAAAAAAM/o9kvQGaaKps/s1600/675_smiling+cat.gif',
                 'http://www.all4humor.com/images/files/Cat%20Smiling%20Huge.jpg',
                 'http://img.photobucket.com/albums/v607/yrduckie/Emoticons/CatKittySmiley-1.jpg'
                ];
    
    var grumpy = $('img').map(function(){ return this.src; }).get(); //gets the original images from the HTML
    
    $("#test").on('keyup', function() {
        var typed = this.value;
        $.each(text, function(index, item) {
            if (typed.indexOf(item)!=-1) {
                $('li', 'ul').eq(index).find('img').attr('src', happy[index]);
            }else{
                $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
            }
        });
    });
    CSS

    Code:
    li {position: relative; height: 100px; width: 160px; display: inline-block; background: red; text-align: center; vertical-align: middle; margin: 20px;}
    
    img {height: 100px; width: 160px;}


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
  •