Question

我需要在右侧的精选图片中添加尺寸/文字数据。我打算将它添加到另一个图像并交换它...或者隐藏字幕上的图像数据并在特色上显示它们？有关最佳方法的任何想法吗？非常感谢帮助我！

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);
});

Answer 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);
});

检查此新代码

Answer 2

有几点需要考虑： -

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

现在，您还可以只拥有一张图片，并允许浏览器为您缩放图片。如果您这样做，那么您需要确保保留纵横比。其次，您希望在浏览器和操作系统中对其进行测试，因为有些人比其他人更擅长。

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

最后一点，取决于您要支持哪些浏览器版本，您可以在HTML 5中使用可缩放矢量图形（SVG）。我不会详细介绍，但SVG特别擅长扩展到不同的大小。请参阅MDN来源here。

有很多关于在网络上调整大小的信息，作为示例，请参阅here，here和here。
图片中嵌入的文字。好吧，除非你想对浏览器无法完成的文本做一些特别奇怪的事情，否则我不建议这样做。每次要生成新的文本模糊时，都需要生成新图像。每当客户说 - “我们可以将文本稍微向左移动”时，您将需要创建一个新图像。更不用说对SEO的影响了。
存储文字。您可以将文字放在alt标记中，只要它符合alt tag的意图即可。如果文本描述图像，则它可以进入alt标记。如果它不仅仅是描述图像并支持文本，那么请将其放在单独的标题或范围内。
展示/风格。这取决于您的客户喜欢什么，什么看起来最好，并与您的网站融为一体，同时遵循标准的可用性指南。通常这涉及反复试验，与客户坐下来决定他们喜欢什么。他们喜欢图像上方，上方还是下方的文字。他们是否喜欢立即显示，淡入，滑入，反弹，旋转，循环通过彩虹的颜色并爆炸？

悬停时的特色图像显示该图像的数据未在缩略图上显示

2 个答案: