jQuery plugin to show alt attribute in img elements by inserting text after the img
- Download:jquery-showimgalt.js
- GitHub:jquery.showimgalt
Usage
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src='jquery.showimgalt.js' ></script>
<script>
$(document).ready(function(){
$('img').showImgAlt();
});
</script>
</head>
<body>
<img src='flower.jpg' alt='a beautiful flower'></img>
</body>
</html>
results
<img src='flower.jpg' alt='a beautiful flower'></img>
<span class='imgalt'>a beautiful flower</span>
Options
$('img').showImgAlt({before:true}); //inserts before img element
$('img').showImgAlt({tag:'<figcaption>'}); //uses figcaption element instead of span
$('img').showImgAlt({class:'someclass'}); //sets class to someclass,default is imgalt
Another Usage for HTML5
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src='jquery.showimgalt.js' ></script>
<script>
$(document).ready(function(){
$('figure img').showImgAlt({tag:'<figcaption>'});
});
</script>
</head>
<body>
<figure>
<img src='flower.jpg' alt='a beautiful flower'></img>
</figure>
</body>
</html>
results
<figure>
<img src='flower.jpg' alt='a beautiful flower'></img>
<figcaption class='imgalt'>a beautiful flower</figcaption>
</figure>
Popular Articles from This Page
Top Page
Economizing Technology > jQuery plugin to show alt attribute in img elements by inserting text after the img