jQuery plugin to show alt attribute in img elements by inserting text after the img

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

kanasys.com > Economizing Technology > jQuery plugin to show alt attribute in img elements by inserting text after the img