---
# System prepended metadata

title: Pannellum lesson2
tags: ['360']

---

{%hackmd uPan7DkRQeaRZyTbmKU7Hw %}
# Pannellum lesson2
![IMG_1060](https://hackmd.io/_uploads/rkiIYzg7Je.png)

## 300.html 原範例換圖
```htmlembedded=
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hot spots</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
    <style>
    #panorama {
        width: 600px;
        height: 400px;
    }
    </style>
</head>
<body>

<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "/pics/scu1.jpg",
    /*
     * Uncomment the next line to print the coordinates of mouse clicks
     * to the browser's developer console, which makes it much easier
     * to figure out where to place hot spots. Always remove it when
     * finished, though.
     */
    //"hotSpotDebug": true,
    "hotSpots": [
        {
            "pitch": 14.1,
            "yaw": 1.5,
            "type": "info",
            "text": "Baltimore Museum of Art",
            "URL": "https://artbma.org/"
        },
        {
            "pitch": -9.4,
            "yaw": 222.6,
            "type": "info",
            "text": "Art Museum Drive"
        },
        {
            "pitch": -0.9,
            "yaw": 144.4,
            "type": "info",
            "text": "North Charles Street"
        }
    ]
});
</script>

</body>
</html>
```

### 熱點格式說明
```htmlembedded=30
    "hotSpots": [
        {
            "pitch": 14.1,
            "yaw": 1.5,
            "type": "info",
            "text": "Baltimore Museum of Art",
            "URL": "https://artbma.org/"
        },
    ]
```
![image](https://hackmd.io/_uploads/B17uTe7fJg.png)

### online tool momento360
![image](https://hackmd.io/_uploads/rJNOoZXz1g.png =300x)

* 範例中有三個熱點設定
* 熱點符號i，滑鼠懸停時，出現提示文字
* pitch 上下(逆時針為正，右手定則)角度
* yaw 左右(逆時針為正，右手定則)角度
* type 熱點符號
* text 提示文字 
* URL 外連網址(這個可以運用，連結到自訂網址)


---
:::spoiler ChatGPT 美化熱點
>貼上300.html
>美化熱點
:::
## 301.html 全螢幕+美化熱點
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全螢幕+美化熱點</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>

    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }	
    #panorama {
        width: 100%;
        height: 100%;
    }
    /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */
    .custom-hotspot {
        height: 30px;
        width: 30px;
        background: #ff6347;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }
    .custom-hotspot:hover {
        transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */
    }
    div.custom-tooltip span {
        visibility: hidden;
        position: absolute;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.8); /* 添加透明度 */
        color: #000;
        text-align: center;
        max-width: 200px;
        padding: 8px 12px;
        cursor: default;
        font-size: 14px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    div.custom-tooltip:hover span {
        visibility: visible;
    }
    div.custom-tooltip:hover span:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */
        bottom: -20px;
        left: 50%; /* 箭頭在工具提示的正中央 */
        transform: translateX(-50%);
    }
    </style>
</head>
<body>

<div id="panorama"></div>

<script>
// 創建視圖
viewer = pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "pics/street1.jpg",
    "hotSpots": [
        {
            "pitch": 14.1,
            "yaw": 1.5,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": "Baltimore Museum of Art"
        },
        {
            "pitch": -9.4,
            "yaw": 222.6,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": "Art Museum Drive"
        },
        {
            "pitch": -0.9,
            "yaw": 144.4,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": "North Charles Street"
        }
    ]
});

// 熱點生成函數
function hotspot(hotSpotDiv, args) {
    hotSpotDiv.classList.add('custom-tooltip');
    var span = document.createElement('span');
    span.innerHTML = args;
    hotSpotDiv.appendChild(span);
    span.style.width = span.scrollWidth - 20 + 'px';
    span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px';
    span.style.marginTop = -span.scrollHeight - 12 + 'px';
}
</script>

</body>
</html>
```
:::spoiler ChatGPT 熱點加上縮圖
>貼上301.html
>熱點加上圖片
:::
## 302.html 加上縮圖 + 改變文字
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加上縮圖+改變文字</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>

    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }	
    #panorama {
        width: 100%;
        height: 100%;
    }
    /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */
    .custom-hotspot {
        height: 30px;
        width: 30px;
        background: #ff6347;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }
    .custom-hotspot2 {
        height: 30px;
        width: 30px;
        background: #63ff47;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }
    .custom-hotspot:hover {
        transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */
    }

    /* 提示氣泡樣式 */
    div.custom-tooltip span {
        visibility: hidden;
        position: absolute;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.9); /* 添加透明度 */
        color: #000;
        text-align: center;
        max-width: 300px;
        padding: 10px;
        cursor: default;
        font-size: 14px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* 當滑鼠懸停時，顯示提示內容 */
    div.custom-tooltip:hover span {
        visibility: visible;
    }

    /* 提示內的圖片樣式 */
    div.custom-tooltip img {
        width: 100%;
        height: auto;
        border-radius: 3px;
        margin-bottom: 10px;
    }

    /* 提示箭頭 */
    div.custom-tooltip:hover span:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */
        bottom: -20px;
        left: 50%; /* 箭頭在工具提示的正中央 */
        transform: translateX(-50%);
    }
    </style>
</head>
<body>

<div id="panorama"></div>

<script>
// 創建視圖
viewer = pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "pics/street1.jpg",
    "hotSpots": [
        {
            "pitch": -1,
            "yaw": 110,
            "cssClass": "custom-hotspot2",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "餅乾店",
                "imgSrc": "pics/icon.png"
            }
        },
        {
            "pitch": -9.4,
            "yaw": 222.6,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "Art Museum Drive",
                "imgSrc": "pics/icon.png"
            }
        },
        {
            "pitch": -0.9,
            "yaw": 144.4,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "網紅咖啡廳",
                "imgSrc": "pics/icon.png"
            }
        }
    ]
});

// 熱點生成函數，當滑鼠懸停時顯示圖片與文字
function hotspot(hotSpotDiv, args) {
    hotSpotDiv.classList.add('custom-tooltip');
    var span = document.createElement('span');

    // 添加圖片與文字
    var img = document.createElement('img');
    img.src = args.imgSrc;
    span.appendChild(img);

    var text = document.createElement('div');
    text.innerHTML = args.text;
    span.appendChild(text);

    hotSpotDiv.appendChild(span);
    
    // 設置提示框的位置
    span.style.width = span.scrollWidth - 20 + 'px';
    span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px';
    span.style.marginTop = -span.scrollHeight - 12 + 'px';
}
</script>

</body>
</html>
```
## 303.html 設計縮圖尺寸 
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加上縮圖+改變文字</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>

    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }	
    #panorama {
        width: 100%;
        height: 100%;
    }
    /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */
    .custom-hotspot {
        height: 30px;
        width: 30px;
        background: #ff6347;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }
    .custom-hotspot2 {
        height: 30px;
        width: 30px;
        background: #63ff47;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }
    .custom-hotspot:hover {
        transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */
    }

    /* 提示氣泡樣式 */
    div.custom-tooltip span {
        visibility: hidden;
        position: absolute;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.9); /* 添加透明度 */
        color: #000;
        text-align: center;
        max-width: 300px;
        padding: 10px;
        cursor: default;
        font-size: 14px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* 當滑鼠懸停時，顯示提示內容 */
    div.custom-tooltip:hover span {
        visibility: visible;
    }

    /* 提示內的圖片樣式 */
    div.custom-tooltip img {
        width: 100px;
        height: auto;
        border-radius: 3px;
        margin-bottom: 10px;
    }

    /* 提示箭頭 */
    div.custom-tooltip:hover span:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */
        bottom: -20px;
        left: 50%; /* 箭頭在工具提示的正中央 */
        transform: translateX(-50%);
    }
    </style>
</head>
<body>

<div id="panorama"></div>

<script>
// 創建視圖
viewer = pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "pics/street1.jpg",
    "hotSpots": [
        {
            "pitch": -1,
            "yaw": 110,
            "cssClass": "custom-hotspot2",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "餅乾店",
                "imgSrc": "pics/scene1.png"
            }
        },
        {
            "pitch": -9.4,
            "yaw": 222.6,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "Art Museum Drive",
                "imgSrc": "pics/scene2.png"
            }
        },
        {
            "pitch": -0.9,
            "yaw": 144.4,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "網紅咖啡廳",
                "imgSrc": "pics/scene3.png"
            }
        }
    ]
});

// 熱點生成函數，當滑鼠懸停時顯示圖片與文字
function hotspot(hotSpotDiv, args) {
    hotSpotDiv.classList.add('custom-tooltip');
    var span = document.createElement('span');

    // 添加圖片與文字
    var img = document.createElement('img');
    img.src = args.imgSrc;
    span.appendChild(img);

    var text = document.createElement('div');
    text.innerHTML = args.text;
    span.appendChild(text);

    hotSpotDiv.appendChild(span);
    
    // 設置提示框的位置
    span.style.width = span.scrollWidth - 20 + 'px';
    span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px';
    span.style.marginTop = -span.scrollHeight - 12 + 'px';
}
</script>

</body>
</html>
```
:::spoiler ChatGPT 修改顏色為Marker 圖示
>貼上
>    .custom-hotspot2 {
        height: 30px;
        width: 30px;
        background: #63ff47;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }
>將顏色換成marker圖示
:::
## 304.html 放大縮圖 + Marker 
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加上縮圖+改變文字</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>

    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }	
    #panorama {
        width: 100%;
        height: 100%;
    }
    /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */
    .custom-hotspot {
        height: 30px;
        width: 30px;
        background: #ff6347;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }
    .custom-hotspot2 {
    height: 60px;
    width: 40px;
    background-image: url('pics/marker-icon.png'); /* 替換為 marker 圖示的檔案路徑 */
    background-size: cover; /* 確保圖片完全覆蓋元素 */
    background-repeat: no-repeat; /* 防止圖片重複 */
    background-position: center; /* 圖片居中顯示 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 保留陰影效果 */
    transition: transform 0.3s ease;
    }
    .custom-hotspot:hover {
        transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */
    }

    /* 提示氣泡樣式 */
    div.custom-tooltip span {
        visibility: hidden;
        position: absolute;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.9); /* 添加透明度 */
        color: #000;
        text-align: center;
        max-width: 300px;
        padding: 10px;
        cursor: default;
        font-size: 14px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* 當滑鼠懸停時，顯示提示內容 */
    div.custom-tooltip:hover span {
        visibility: visible;
    }

    /* 提示內的圖片樣式 */
    div.custom-tooltip img {
        width: 400px;
        height: auto;
        border-radius: 3px;
        margin-bottom: 10px;
    }

    /* 提示箭頭 */
    div.custom-tooltip:hover span:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */
        bottom: -20px;
        left: 50%; /* 箭頭在工具提示的正中央 */
        transform: translateX(-50%);
    }
    </style>
</head>
<body>

<div id="panorama"></div>

<script>
// 創建視圖
viewer = pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "/pics/street1.jpg",
    "autoLoad": true,
    "autoRotate": -2,
    "hotSpots": [
        {
            "pitch": -1,
            "yaw": 110,
            "cssClass": "custom-hotspot2",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "餅乾店",
                "imgSrc": "pics/scene1.png"
            }
        },
        {
            "pitch": -9.4,
            "yaw": 222.6,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "Art Museum Drive",
                "imgSrc": "pics/scene2.png"
            }
        },
        {
            "pitch": -0.9,
            "yaw": 144.4,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "網紅咖啡廳",
                "imgSrc": "pics/scene3.png"
            }
        }
    ]
});

// 熱點生成函數，當滑鼠懸停時顯示圖片與文字
function hotspot(hotSpotDiv, args) {
    hotSpotDiv.classList.add('custom-tooltip');
    var span = document.createElement('span');

    // 添加圖片與文字
    var img = document.createElement('img');
    img.src = args.imgSrc;
    span.appendChild(img);

    var text = document.createElement('div');
    text.innerHTML = args.text;
    span.appendChild(text);

    hotSpotDiv.appendChild(span);
    
    // 設置提示框的位置
    span.style.width = span.scrollWidth - 20 + 'px';
    span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px';
    span.style.marginTop = -span.scrollHeight - 12 + 'px';
}
</script>

</body>
</html>
```

:::spoiler ChatGPT 切換熱點時自動顯示資訊
貼上304.html
切換至熱點時，顯示熱點資訊
:::

## 305.html 自動切換熱點顯示資訊
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加上縮圖+改變文字</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>

    <style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }	
    #panorama {
        width: 100%;
        height: 100%;
    }
    /* 修改熱點樣式，讓它變成圓形並添加陰影效果 */
    .custom-hotspot {
        height: 30px;
        width: 30px;
        background: #ff6347;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }
    .custom-hotspot2 {
        height: 30px;
        width: 30px;
        background: #63ff47;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }
    .custom-hotspot:hover {
        transform: scale(1.2); /* 放大熱點，讓使用者更容易看到 */
    }

    /* 提示氣泡樣式 */
    div.custom-tooltip span {
        visibility: hidden;
        position: absolute;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.9); /* 添加透明度 */
        color: #000;
        text-align: center;
        max-width: 300px;
        padding: 10px;
        cursor: default;
        font-size: 14px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* 當滑鼠懸停時，顯示提示內容 */
    div.custom-tooltip:hover span {
        visibility: visible;
    }

    /* 提示內的圖片樣式 */
    div.custom-tooltip img {
        width: 100px;
        height: auto;
        border-radius: 3px;
        margin-bottom: 10px;
    }

    /* 提示箭頭 */
    div.custom-tooltip:hover span:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent; /* 使箭頭顏色一致並加上透明度 */
        bottom: -20px;
        left: 50%; /* 箭頭在工具提示的正中央 */
        transform: translateX(-50%);
    }
    </style>
</head>
<body>

<div id="panorama"></div>

<script>
// 創建視圖
viewer = pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "/pics/street1.jpg",
    "hotSpots": [
        {
            "pitch": -1,
            "yaw": 110,
            "cssClass": "custom-hotspot2",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "餅乾店",
                "imgSrc": "/pics/scene1.png"
            }
        },
        {
            "pitch": -9.4,
            "yaw": 222.6,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "Art Museum Drive",
                "imgSrc": "/pics/scene2.png"
            }
        },
        {
            "pitch": -0.9,
            "yaw": 144.4,
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": {
                "text": "網紅咖啡廳",
                "imgSrc": "/pics/scene3.png"
            }
        }
    ]
});


    // 熱點生成函數，當滑鼠懸停時顯示圖片與文字
    function hotspot(hotSpotDiv, args) {
        hotSpotDiv.classList.add('custom-tooltip');
        var span = document.createElement('span');
    
        // 添加圖片與文字
        var img = document.createElement('img');
        img.src = args.imgSrc;
        span.appendChild(img);
    
        var text = document.createElement('div');
        text.innerHTML = args.text;
        span.appendChild(text);
    
        hotSpotDiv.appendChild(span);
    
        // 設置提示框的位置
        span.style.width = span.scrollWidth - 20 + 'px';
        span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px';
        span.style.marginTop = -span.scrollHeight - 12 + 'px';
    }
    
    // 自動播放熱點
    var hotspotIndex = 0;
    var hotSpots = viewer.getConfig().hotSpots;
    
    // 用於顯示動態提示的容器
    var infoBox = document.createElement('div');
    infoBox.style.position = 'absolute';
    infoBox.style.bottom = '10px';
    infoBox.style.left = '50%';
    infoBox.style.transform = 'translateX(-50%)';
    infoBox.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
    infoBox.style.padding = '10px 20px';
    infoBox.style.borderRadius = '8px';
    infoBox.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
    infoBox.style.display = 'none';
    document.body.appendChild(infoBox);
    
    function autoPlayHotspots() {
        // 聚焦到當前熱點的 pitch 和 yaw
        var currentHotspot = hotSpots[hotspotIndex];
        viewer.lookAt(currentHotspot.pitch, currentHotspot.yaw, 110);
    
        // 顯示動態提示
        infoBox.style.display = 'block';
        infoBox.innerHTML = `
            <img src="${currentHotspot.createTooltipArgs.imgSrc}" alt="Hotspot Image" style="width: 80px; height: auto; margin-right: 10px; vertical-align: middle; border-radius: 4px;">
            <span style="font-size: 16px; color: #333; vertical-align: middle;">${currentHotspot.createTooltipArgs.text}</span>
        `;
    
        // 更新到下一個熱點
        hotspotIndex = (hotspotIndex + 1) % hotSpots.length;
    }
    
    // 設置每3秒自動切換一次熱點
    setInterval(autoPlayHotspots, 3000);
    
    // 隱藏提示框（在未切換時保持簡潔）
    viewer.on('mousedown', function () {
        infoBox.style.display = 'none';
    });
    viewer.on('mouseup', function () {
        infoBox.style.display = 'none';
    });
    </script>
    

</body>
</html>

```