分享
三行代码  ›  专栏  ›  技术社区  ›  Kishore Saldanha

将图像分割成多个分割 - Splitting an image into multiple divs

  •  -1
  • Kishore Saldanha  · 技术社区  · 3 月前

    我正试图把一张照片分成多个凹角。我的主要目标是使这些分区可单击,并用另一个图像替换单击的分区(例如颜色更改为绿色表示“确定”,红色表示“错误”)。如何使分区可单击?

    1 回复  |  直到 3 月前
        1
  •  2
  •   halfer Israfel    3 月前

    我认为,最安全的选择是首先分割图像并创建单独的块(div或td)。

    然后你可以改变图像的来源。

    但是如果你真的想保留一个图像,你可以考虑使用javascript并为整个图像块创建事件监听器,同时它会检查你点击的y,x坐标,在那里它会在上面插入新的DIV,在那里你会放置带有一些属性的图像(例如背景位置,它定义为只显示T的一部分)。他的形象)

    我猜,PHP还具有一些图像切片功能,因此它可能会为您生成“较小”的图像,并且根据位置(同样来自于javascript),您将获得所需子图像的源。

    编辑

    也。。。您可以只为container div设置背景图像,并在其中放置具有指定宽度和高度的div,以便它们覆盖您的背景,但将visibility设置为hidden,为所有这些div应用事件侦听器,这只会切换visibility(或只使用visibility切换类)。