Playing with HTML (1)

Last updated on:July 1, 2022

Making image areas clickable even when screen resizes

It is not recommended to embed HTML code in Markdown. Doing this just for fun…

在文档中插入流程图时,希望做成交互形式,点击相应框框跳到不同的文档位置。

测试用的SVG图片为宽度为750。

Using image map

Image map是在图片上多加了一层map,但使用的坐标是针对750宽度的固定值。一旦页面缩小,点击区域就会错位。

这里因为主题自带fancybox效果,鼠标移动到图片任何位置都会有悬浮提示,但特定区域会出现不同的链接。

1
2
3
4
5
6
7
<figure>
<img usemap="#map1" border="0" class="image" src="test-image.svg" width="750" />
</figure>
<map name="map1" id="map1">
<area href="https://realhestia.github.io/" alt="Green box" title="Green box" shape="rect" coords="80, 80, 360, 360" />
<area href="https://realhestia.github.io/" alt="Blue box" title="Blue box" shape="rect" coords="390, 390, 670, 670" />
</map>
Green box Blue box

Using SVG tag

插入inline SVG,即将svg图标代码当成普通的HTML元素使用。

图片缩放时,可点击的区域随之变化。同时可插入<title>作为悬浮提示。

1
2
3
4
5
6
7
8
9
<figure>
<svg viewBox="0 0 750 750" preserveAspectRatio="xMinYMin meet">
<image width="750" height="750" href="test-image.svg"></image>
<a href="https://realhestia.github.io/" target="_blank"><rect x="80" y="80" width="280" height="280" opacity="0"/>
<title>Green box</title></a>
<a href="https://realhestia.github.io/" target="_blank"><rect x="390" y="390" width="280" height="280" opacity="0"/>
<title>Blue box</title></a>
</svg>
</figure>
Green box Blue box

Putting everything into SVG file…

大胆猜测——

既然<svg>是把SVG当成HTML代码,那岂不是也可以把热点区域的代码直接加入到SVG源文件中,再把这个文件当成普通图片插入文档?

(1) 使用<img>,插入的还是静态图片,需要新窗口打开图片才能点击。

1
2
3
<figure>
<img border="0" class="image" src="test-image-coded.svg" />
</figure>

(2) 使用<object>可以插入交互多媒体!

发现链接在图片内部打开了 -> 是因为<a>忘了加target="_blank"

发现图片不会缩放以至于溢出了屏幕 -> 强行加入style保护一下

1
2
<object data="test-image-coded.svg" type="image/svg+xml" style="width:100%">
</object>

Fixing image size

换个思路!既然图片缩放时会错位,不如干脆让它不要缩放?

回到Image map,加了两个style:

  • min-width用于防止图片缩小
  • overflow-x: scroll用于防止图片溢出,使多余部分滚动显示

可以看到

1
2
3
4
5
6
7
<figure style="overflow-x: scroll">
<img usemap="#map1" border="0" class="image" src="test-image.svg" style="min-width: 750px; max-width:750px"/>
</figure>
<map name="map1" id="map1">
<area href="https://realhestia.github.io/" alt="Green box" title="Green box" shape="rect" coords="80, 80, 360, 360" />
<area href="https://realhestia.github.io/" alt="Blue box" title="Blue box" shape="rect" coords="390, 390, 670, 670" />
</map>
Green box Blue box

Note

  • <img>链接用的attribute是src

  • <svg><image>链接用的attribute是href

  • <object>链接用的attribute是data

如果不能保证采用同样的方法解析相对位置,引用图片时就要注意url/href/src的区别

References