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

我需要将尺寸/文本数据添加到右侧的特征图像中。我打算把它添加到另一个图像中，然后交换它。。。或者在图片上隐藏带有数据的标题，并在专题网站上显示？你有什么想法吗？非常感谢你帮助我

目前它只是一行维度，但我希望这是可伸缩的，以防客户端希望其他页面有一个描述或比一行更深入的文本

非常感谢！以下是我目前用于交换的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个图像（设计选项），并告知它是否正确地提醒了项目的名称

并将鼠标悬停在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);
});

函数myFunction（）{
var$large=jQuery（“#largeImage”）；
//将默认图像存储为数据src
//$large.data（'src'，$large.attr（'src'）；
var src=jQuery（'#largeImage'）.attr（'src'）；
jQuery（'#thumbs img'）。悬停（函数（）{
$large.attr（'src'，jQuery（this.attr（'src'））.replace（'thumb'，'large'）；
var altText=jQuery（this.attr（“alt”）；
//警报（jQuery（this.parent（）.text（））；
var existsClass=$large.parent（）.children（）.hasClass（“prodName”）；
//警报（existsClass）；
if（existsClass）
//$large.parent（）.children（）.remove（“.prodName”）；
$large.parent（）.find（“div”）.remove（）；
$large.parent（）；
}，函数（）{
//鼠标左键返回原始值
$large.attr（'src'，$large.data（'src'）；
});
}
jQuery（文档）.ready（函数（）{
jQuery（myFunction）；
});

---

检查此新代码

需要考虑以下几点：-

• 多个图像，具有两个（或多个）图像，每个维度一个。对于多个图像，第一个明显的缺点是页面加载时间较长（至少在缓存图像之前）。一个选项是立即加载所需的图像，然后加载背景中的其他图像
  现在，您也可以只拥有一个图像，并允许浏览器为您缩放它。如果这样做，则需要确保保留纵横比。其次，您可能希望在浏览器和操作系统之间测试它，因为有些浏览器和操作系统在这方面比其他浏览器和操作系统更好
  您还可以将图像加载到画布中，自己进行裁剪和调整大小
  最后一个转折点是，您可以在HTML5中使用可伸缩矢量图形（SVG），这取决于您希望支持的浏览器版本。我不会详细介绍，但是SVG特别擅长扩展到不同的大小。请参阅MDN源代码
  web上有很多关于调整大小的信息，例如，请参见和

• 嵌入在图像中的文本。好吧，除非你想用浏览器做不到的文本做一些特别奇特的事情，否则我不建议这样做。每次你想要生成一个新的文本模糊，你都需要生成一个新的图像。每次客户说-‘我们可以把文本移到左边一点吗？’时，您都需要创建一个新图像。更不用说对搜索引擎优化的影响了

• 存储文本。您可以将文本放入

  alt

  标记中，只要它符合alt

  标记的意图即可。如果文本是对图像的描述，那么它可以放在alt标记中。如果它超出了描述图像和支持文本的范围，则将其放在单独的标题或跨距中
  

• 显示/样式。这取决于你的客户喜欢什么，什么看起来最好，什么与你的网站融合得最好，同时遵循标准的可用性准则。通常，这需要反复试验，与客户坐下来决定他们喜欢什么。他们喜欢图片上方、上方还是下方的文字。他们喜欢它立即显示、淡入、滑入、反弹、旋转、在彩虹的颜色中循环和爆炸吗

---

那么您想在图像中显示产品名称？您想在图像的右侧显示什么文本？文本将从何处获取？我需要显示产品名称和尺寸。我不确定是否将文本添加为ALT。。。添加标题。。。或者只是将文本添加到右侧显示的另一个图像中。你推荐什么？例如，第一个图像的名称是图像名称，下面是15x15x30。我将其添加到Jquery文件中，但我一直看到一个弹出窗口，上面显示图像的alt名称。请检查：我已将#largeimage2更改为#largeimage2，拇指也是如此，因此我只能暂时在此页面上使用。很抱歉，是的，它报告了正确的图像名称。因此您希望弹出窗口中的值显示在图像的右侧？请参阅。将样式修改为=>并告诉我您还需要什么：）欢迎，发布Qestions，这样我就可以解决它了nutandevjoshi@gmail.com，如果有任何问题，请发送给我堆栈溢出链接，或您有问题的网站的链接。谢谢。我不喜欢在图像中嵌入文本，因为我需要加载一组额外的图像（或者在缩略图中隐藏同一图像的一部分），而且文本对图像中的SEO没有任何作用。我认为存储文本是最好的选择，但是格式化它可能是一个问题。我将如何列出产品名称，然后是尺寸，然后是描述（例如）？这可能是个问题。