I mentioned in my previous post “Using jQuery to tidy up missing Images” that I had a couple of ideas on how we could take this simple implementation further. Well here is 1 of those ideas.
Allowing users to report missing images
First off I have re-factored the code so it looks alot nicer and well saves me repeating code where it’s not needed. I have added in a function that adds a span on top of the missing photograph like so:
When a user clicks anywhere on the photograph a function is called and in this case an alert showing what image is missing.
For a demo and full source check out :
The function that has the alert in it could easily be an ajax call to the server logging the image that’s 404’ing, once logged it could even hide the image that was clicked. Lots and lots of options, and it’s so simple. Now on to the code:
[code lang=”js”]
$(function () {
if ($.browser.msie) {
$(‘img’).each(function () {
if (this.readyState == ‘uninitialized’) {
AssignReportSpan($(this));
}
});
} else {
$(‘img’).error(function () {
AssignReportSpan($(this));
});
}
});
function AssignReportSpan(obj) {
var beforesource = $(obj).attr(‘src’);
$(obj).attr(‘alt’, ‘image not found’).attr(‘src’, ‘images/not-found-image.jpg’).after(‘<span class="rmessageh bottomc trans">Click photo to report missing.</span>’).bind(‘click’, function () {
SubmitMissing(beforesource);
});
}
function SubmitMissing(src) {
alert(src + " has been reported missing");
}
[/code]
Am sure the above code could be slightly improved. A couple lines of css and javascript and the user experience is lifted from red crosses to, “yeah am not here please report I am missing”.
For full source code and a demo check out : http://dev.siphilp.co.uk/jQuery-Check-Image-User-Report-Missing.htm
1 Comment