Adding title and alt values to every single image on website is not a easy job to anyone. We UI developers add title values to images that carry some meaning along, for the sake of SEO and better usability. However we leave the title and alt attributes empty for the images that are only used for makeup purpose ;).
How about adding these makeup images its name as title value? Instead of leaving them without any value(content). I would say it would be better for the same purpose of SEO and usability. jQuery is making UI development world pretty easy these days. Here goes the code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Setting image names as its title values</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('img').load(function(){
if($(this).attr('title') == ''){
$(this).attr("title", function() {
var takeSRCName = $(this).attr('src').split('/').pop();
return takeSRCName;
});
}
})
//
})
</script>
</head>
<body>
<h1>Adding images its name as title values - Only to those who don't have title values defined to it.</h1>
<p><img src="images/jeneliaD'souza1.jpg" width="181" height="279" alt="" title="defined title - jenelia1" /></p>
<p><img src="images/jeneliaD'souza2.jpg" width="188" height="267" alt="" title="" /></p>
<p><img src="images/jeneliaD'souza3.jpg" width="192" height="262" alt="" title="defined title - jenelia3" /></p>
<p><img src="images/jeneliaD'souza4.jpg" width="183" height="276" alt="" title="" /></p>
</body>
</html>
How about adding these makeup images its name as title value? Instead of leaving them without any value(content). I would say it would be better for the same purpose of SEO and usability. jQuery is making UI development world pretty easy these days. Here goes the code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Setting image names as its title values</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('img').load(function(){
if($(this).attr('title') == ''){
$(this).attr("title", function() {
var takeSRCName = $(this).attr('src').split('/').pop();
return takeSRCName;
});
}
})
//
})
</script>
</head>
<body>
<h1>Adding images its name as title values - Only to those who don't have title values defined to it.</h1>
<p><img src="images/jeneliaD'souza1.jpg" width="181" height="279" alt="" title="defined title - jenelia1" /></p>
<p><img src="images/jeneliaD'souza2.jpg" width="188" height="267" alt="" title="" /></p>
<p><img src="images/jeneliaD'souza3.jpg" width="192" height="262" alt="" title="defined title - jenelia3" /></p>
<p><img src="images/jeneliaD'souza4.jpg" width="183" height="276" alt="" title="" /></p>
</body>
</html>
