src属性の「hover.gif」の拡張子の前に「_on」を追加して「hover_on.gif」に変更する。

<img class="roll1" src="/images/hover.gif" />

<script type="text/javascript">
//<![CDATA[
    $(function(){
        $('.roll1').sm_hovereplace({
            rolltext : '_on' // 初期値：'_o'
        });
    });
//]]>
</script>

data属性に追加文字を指定する。

<img class="roll2" data-rolltext="_on" src="/images/hover.gif" />

<script type="text/javascript">
//<![CDATA[
    $(function(){
        $('.roll2').sm_hovereplace();
    });
//]]>
</script>

INPUTタグのvalue属性の値を置換する。

<input class="roll3" type="text" value="/images/hover.gif" />

<script type="text/javascript">
//<![CDATA[
    $(function(){
        $('.roll3').sm_hovereplace({
            rolltype : 'value'
        });
    });
//]]>
</script>

Hoverでカラー変更

class属性を置換して、カラーを変更する。
class属性の「blue」と「red」を置換する。

<style type="text/css">
    .red{ color:#f33; }
    .blue{ color:#33f; }
</style>

<p class="roll4 blue" data-rolltype="class" data-rolltext='["blue", "red"]'><b>Hoverでカラー変更</b></p>

<script type="text/javascript">
//<![CDATA[
    $(function(){
        $('.roll4').sm_hovereplace();
    });
//]]>
</script>