简体   繁体   中英

Print image instead of text

I have this snippet of code that I have been using to check to see if a user is online on hitbox.tv or not. However I would like to make it so instead of printing out a text string it would print out an image to display whether the user is online of not. Is there a way to use a default image and display it with the username overlay-ed on it?

http://jsfiddle.net/foz3dL53/

$(document).ready(function () {
    $("#formButton").click(function () {
        var channel = $("#channelName").val();
        $.getJSON("http://api.hitbox.tv/media/live/" + channel.toLowerCase(), function (data) {
            var mediaIsLive = data.livestream[0].media_is_live;
            if (mediaIsLive == 1) {
                return $("#liveNotification").text(channel + " is online");
            }
            return $("#liveNotification").text(channel + " is offline");
        }).error(function () {
            $("#liveNotification").text("I'm not sure :o");
        });
    });
});


<p>Stream status: <span id="liveNotification">-</span>
</p>
<form>
    <p>Type the channel's name below</p>
    <input type="text" value="gravvy" id="channelName" />
    <input type="button" value="Check if live" id="formButton" />
</form>

Use .html() instead of text() . Also no need to return it.

if (mediaIsLive == 1) {
    $("#liveNotification").html('<img src="image_source" alt="Online">');
}else{
    $("#liveNotification").html('<img src="image_source" alt="Offline">');
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM