制作网页焦点图，浏览网页时只有一张图片，图片右下角上有3个小图标，第一个是圆角矩形，后面两个是圆形。示意图如下： 当鼠标移到图片上时，左右两侧各浮现一个透明的导航，示意图如下： 点击左右两侧导航箭头，可以实现页面的图片切换（实现：跳转到另外的页面，加载不同的图片）。

制作网页焦点图通常涉及到HTML、CSS和JavaScript等前端技术。以下是实现这个效果的一般步骤：

1. HTML结构：
- 创建一个`<div>`作为主容器，包含焦点图图片和底部的导航图标。图片元素可能是`<img>`，每个导航按钮可以用`<a>`标签包裹，加上相应的class（如`.nav-left`和`.nav-right`）。

<div class="focus-image-container">
  <img src="" alt="图片" id="focus-image">
  <div class="navigation-icons">
    <a href="#" class="nav-icon nav-left circle"><i></i></a>
    <a href="#" class="nav-icon nav-right circle"><i></i></a>
    <a href="#" class="nav-icon nav-bottom rectangle"><i></i></a>
  </div>
</div>

2. CSS样式：
- 设置焦点图容器和图片的基本样式，添加悬停效果，以及透明度变化和定位导航图标。
- 使用`:hover`伪类为鼠标悬停状态添加样式。

.focus-image-container {
  position: relative;
}

#focus-image {
  display: block;
  width: 100%;
  height: auto;
}

.nav-icon {
  position: absolute;
  bottom: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-icon:hover {
  opacity: 1;
}

3. JavaScript/jQuery (可选)：
- 监听导航按钮的点击事件，当用户点击左/右导航图标时，更新图片源，并可能通过`window.location.href`实现页面跳转。

$(".nav-left").click(function() {
  var newImage = "path/to/new/image.jpg";
  $("#focus-image").attr("src", newImage);
});

$(".nav-right").click(function() {
  var newImage = "path/to/next/image.jpg";
  $("#focus-image").attr("src", newImage);
});