1

我需要将尺寸/文本数据添加到右侧的特色图像中。我打算将它添加到另一个图像并交换它......或者可能隐藏带有图像数据的标题并将它们显示在特色上？对此的最佳方法有什么想法吗？非常感谢你帮助我！

http://test.pillarsoflifebook.com/ottomans/

目前它只是一行尺寸，但我希望这是可扩展的，以防客户希望其他页面具有描述或比单行更深入的文本。

非常感谢！这是我目前用于交换的 JQuery：

function myFunction2() {
    var $large = jQuery('#largeImage1');

    //store the default image as the data src
    $large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');
    jQuery('#thumbs1 img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        //on mouse leave put back the original value
        //$large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction2);
});
4

2 回答 2

1

首先将此代码用于最底部的 4 个图像（设计选项）并告诉它是否正确地提醒项目名称？

并将鼠标悬停在 4 个最底部的图像上

function myFunction() {
    var $large = jQuery('#largeImage');

    //store the default image as the data src
    //$large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');


    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
        var altText =jQuery(this).attr("alt");

        //alert(jQuery(this).parent().text());
        var existsClass=$large.parent().children().hasClass("prodName");
        //alert(existsClass);
        if(existsClass)
            //$large.parent().children().remove(".prodName");
            $large.parent().find("div").remove(); 

$large.parent().append('<div class="prodName" style="margin-left:220px">'+jQuery(this).parent().text()+'<br/>'+altText+'</div>');

    }, function () {
        //on mouse leave put back the original value
        $large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction);
});

检查这个新代码

于 2014-03-12T05:42:39.220 回答
1

有几点需要考虑：-

  • 多张图片，有两张（或更多张）图片，每个维度一张。对于多个图像，明显的第一个缺点是页面将需要更长的时间来加载（至少在图像被缓存之前）。一种选择是立即加载需要的图像，然后在后台加载其他图像。

    现在，您也可以只拥有一个图像并允许浏览器为您缩放它。如果您这样做，那么您需要确保保留纵横比。其次，您可能希望跨浏览器和操作系统对其进行测试，因为有些人在这方面比其他人更好。

    您还可以将图像加载到画布中并自己进行一些裁剪和调整大小。

    最后一个转折点，取决于您想要支持的浏览器版本，您可以在 HTML 5 中使用可缩放矢量图形 (SVG)。我不会详细介绍，但 SVG 特别擅长缩放到不同的大小。在此处查看 MDN 源代码。

    网络上有很多关于调整大小的信息，作为示例，请参见此处、此处和此处。

  • 嵌入图像中的文本。好吧，除非您想对浏览器无法完成的文本进行特别花哨的处理，否则我不建议这样做。每次要生成新的文本简介时，都需要生成新图像。每当客户说“我们可以将文本向左移动一点”时，您都需要创建一个新图像。更不用说对SEO的影响了。

  • 存储文本。您可以将文本放在alt标签中，只要它符合 alt 的意图tag。如果文本是对图像的描述，那么它可以放在 alt 标签中。如果它超出了描述图像的范围并且支持文本，则将其放在单独的标题或范围中。

  • 显示/样式。这取决于您的客户喜欢什么，以及在遵循标准可用性指南的情况下看起来最好并与您的网站融合得最好的东西。通常这涉及反复试验，与您的客户坐下来决定他们喜欢什么。他们喜欢图片上方、上方或下方的文字吗？他们喜欢它立即显示、淡入、滑入、反弹、旋转、循环通过彩虹的颜色并爆炸吗？

于 2014-03-12T06:05:07.533 回答