edom18/eg.html

## eg.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rollover テスト</title>
</head>
<body>

<p><a class="hoge" href="http://example.com/"><img src="img/test.gif" alt="test">hoge</a></p>
<p><a class="hoge" href="http://example.com/"><img src="img/test.png" alt="test">hoge</a></p>
<p><a class="hoge" href="http://example.com/"><img src="img/test.gif" alt="test"><img src="img/test.png" alt="test">hoge</a></p>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="rollover.js"></script>

</body>
</html>

## rollover.js
(function() {
    var target  = 'a.hoge';
    var postfix = '_o';

    $(target).find('img').each(function() {
        var elem  = this;
        var src   = elem.src;
        var src_o = elem.src.replace(/\.\w+$/, postfix + '$&');
        var img   = new Image();
        img.src   = src_o;

        $.data(elem, 'src', src);
        $.data(elem, 'src_o', src_o);
    });

    $(target).hover(
        function() {
            $(this).find('img').each(function() {
                var img = $(this).get(0);
                this.src = $.data(img, 'src_o');
            });
        },
        function() {
            $(this).find('img').each(function() {
                var img = $(this).get(0);
                this.src = $.data(img, 'src');
            });
        }
    );
})();
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>rollover テスト</title>
	</head>
	<body>

	<p><a class="hoge" href="http://example.com/"><img src="img/test.gif" alt="test">hoge</a></p>
	<p><a class="hoge" href="http://example.com/"><img src="img/test.png" alt="test">hoge</a></p>
	<p><a class="hoge" href="http://example.com/"><img src="img/test.gif" alt="test"><img src="img/test.png" alt="test">hoge</a></p>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="rollover.js"></script>

	</body>
	</html>
	(function() {
	var target = 'a.hoge';
	var postfix = '_o';

	$(target).find('img').each(function() {
	var elem = this;
	var src = elem.src;
	var src_o = elem.src.replace(/\.\w+$/, postfix + '$&');
	var img = new Image();
	img.src = src_o;

	$.data(elem, 'src', src);
	$.data(elem, 'src_o', src_o);
	});

	$(target).hover(
	function() {
	$(this).find('img').each(function() {
	var img = $(this).get(0);
	this.src = $.data(img, 'src_o');
	});
	},
	function() {
	$(this).find('img').each(function() {
	var img = $(this).get(0);
	this.src = $.data(img, 'src');
	});
	}
	);
	})();