2

我正在为我正在构建的网站使用 Jquery 中的图像切换功能。有很多项目，所以我大量压缩了很多这些图像。然而，其中一些看起来不像 .gifs 那样好看，而且制作 .jpg 真的才有意义。

我的问题是此代码仅将一个图像交换为另一个名称不同但前缀相似的图像。有没有办法只交换文件的名称，这样如果我有一个 .gif 或 .jpg，它只是将名称从 _static 交换为 _rollover 就没有关系了？

这是我正在使用的代码：

//Image Switch
$(document).ready(function(){
    $(".projectThumb img").hover(
            function(){
                    var iconName = $(this).attr("src");
                    var origin = iconName.split("_static.")[0];
                    $(this).attr({src: "" + origin + "_rollover.gif"});
            }, 
            function(){
                    var iconName = $(this).attr("src");
                    var origin = iconName.split("_rollover.")[0];
                    $(this).attr({src: "" + origin + "_static.gif"});
            });
});

和图像开关的 HTML

<div class="projectThumb">
    <img src="/img/mr_button_static.gif" class="button" name="mr">
    <p class="title">Title &ndash; Poster</p>
</div>

要切换的图像命名为/img/mr_button_rollover.jpg

谢谢！

4

1 回答 1

2

只需使用字符串替换在图像名称中的静态和翻转之间切换。

//Image Switch
$(document).ready(function(){
    $(".projectThumb img").hover(
            function(){
                    var iconName = $(this).attr("src");
                    var rollover = iconName.replace( /static/, 'rollover' );
                    $(this).attr({ src: rollover });
            }, 
            function(){
                    var iconName = $(this).attr("src");
                    var static = iconName.replace( /rollover/, 'static' );
                    $(this).attr({ src: static });
            });
});

如果您可以在图像前缀中静态/翻转，只需在搜索和替换字符串中包含下划线并匹配/替换文件扩展名之前的点。

于 2009-09-06T15:01:04.800 回答