www.webdeveloper.com
Results 1 to 4 of 4

Thread: Use of <img src> in js?

  1. #1
    Join Date
    May 2013
    Posts
    2

    Unhappy Use of <img src> in js?

    I have the following in place:

    Code:
     var diff = maxval - ui.value;
            $( "#output").html( diff?"diff. of " + diff : "no diff" );

    Now I'd like to add an image to each, if there's a difference in value or not, ie:

    Code:
    var diff = maxval - ui.value;
            $( "#output").html( diff?"<img src='yes.png' height='50' width='50' /> diff. of " + diff : "<img src='no.png' height='50' width='50' /> no diff" );
    Seeing as though that doesn't work, how can I set an image for each (including the text) in that output div?

    A working jsfiddle demo would be amazing - I can't seem to get this working

    I've also tried this but still no luck.

    Code:
    var diff = maxval - ui.value;
    var img = new Image();
    img.src = (diff > 0 ) ? "yes.png" : "no.png"; // assuming you mean to check positive value
    img.width = "50px";
    img.height = "50px";
    var el = document.getElementById("output");
    el.appendChild(img);
    var text = (diff > 0) ? "diff" : "no diff";
    var txt = document.createTextNode(text);
    el.appendChild(txt);

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    var diff = maxval - ui.value,
    im = (diff > 0) ? 'yes':'no',
    txt = (diff > 0) ? ('diff. of ' + diff) : 'no diff';
    
    $("#output").html('<img src="'+im+'.png" width="50" height="50" alt="" /> '+txt);
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    May 2013
    Posts
    2
    Thank you padonak!

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    you welcome )
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles