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?
$(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.