mouseover - 如何在 Rails 中使用 link_to 制作 image_tag 超链接，鼠标悬停？

Question

我将 *image_tag* 图像放在 *link_to* 元素中，并尝试进行鼠标悬停图像交换。除了没有抓取备用图像的鼠标悬停外，一切正常。在更一般的说明中，我是否正确地制作了超链接图像？抱歉，Rails 新手。非常感激！

<%= link_to (image_tag("#{product.prod_img}.jpg", alt: product.prod_name, class: 'img_prod_thumb', mouseover: "#{product.prod_img}_over.jpg")), "/products/#{product.id}" %>

Answer 1

几个指针：

1. 不要动态地将 img 扩展添加到您的代码中（尤其是在视图中），除非有充分的理由这样做（？）
2. 您可以使用 simpleproduct作为路径，而不是硬编码的 url

这是我要做的：

>>> move product image name construction to the model, helper, or decorator
# model (for simplicity)

def prod_img_full
  "#{prod_img}.jpg"
end

def prod_img_over
  "#{prod_img}_over.jpg"
end

>>> update and clean up link_to

<%= link_to image_tag(product.prod_img_full, 
            alt: product.prod_name, 
            class: 'img_prod_thumb', 
            mouseover: product.prod_img_over), 
            product %>

您可以轻松地将 移动image_tag到装饰器，这将允许在您的视图中执行此操作：

<%= link_to product.hover_image, product %>