Skip to content

Commit 4979d52

Browse files
danielchen3danielchen3
committed
fix some bugs
1 parent 4e7c8bd commit 4979d52

File tree

5 files changed

+63
-86
lines changed

5 files changed

+63
-86
lines changed

‎index.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,8 @@
4545
<h1>Welcome to My Github</h1>
4646
<p>This is a guide</p>
4747
<div class="button-container">
48-
<!-- 按钮1：弹出提示框 -->
4948
<button onmouseover="changeColor(this)" onmouseout="resetColor(this)" onclick="showMessage()">Show Message</button>
5049

51-
<!-- 按钮2：跳转到另一个网页 -->
5250
<a href="https://danielchen3.github.io/usa_map" target="_blank">
5351
<button onmouseover="changeColor(this)" onmouseout="resetColor(this)">Go to Map</button>
5452
</a>
@@ -59,12 +57,10 @@ <h1>Welcome to My Github</h1>
5957
alert('Hello! This is a Heat Alert Warning!');
6058
}
6159

62-
// 改变按钮背景色
6360
function changeColor(button) {
6461
button.style.background = 'linear-gradient(90deg, #45a049, #32a89f)';
6562
}
6663

67-
// 恢复按钮背景色
6864
function resetColor(button) {
6965
button.style.background = '#4CAF50';
7066
}

‎usa_map/AZ/index.html‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@
2828
gap: 20px;
2929
}
3030
#usaMap {
31-
width: 60%; /* 增加宽度占比 */
32-
height: 80vh; /* 使用视口高度单位 */
33-
min-height: 500px; /* 设置最小高度 */
31+
width: 60%;
32+
height: 80vh;
33+
min-height: 500px;
3434
border: 1px solid #ddd;
3535
}
3636

@@ -49,30 +49,22 @@
4949
<h1>Welcome to Arizona</h1>
5050
<p>This is the Arizona map:</p>
5151

52-
<!-- 嵌入外部 SVG 文件 -->
5352
<div class="map-container">
5453
<object id="usaMap" data="usa_az.svg" type="image/svg+xml" style="width: 60%; max-width: auto; height: auto; border: 1px solid #ddd;"></object>
5554
<div id="stateInfo"></div>
5655
</div>
5756

5857
<script>
59-
// 定义特定的州 ID 列表
60-
// const targetStates = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"]; // 替换为你需要的州 ID
61-
62-
// 添加鼠标交互
6358
const svgObject = document.getElementById('usaMap');
6459
svgObject.addEventListener('load', () => {
65-
const svgDoc = svgObject.contentDocument; // 获取嵌入的 SVG 文档
66-
const states = svgDoc.querySelectorAll('path'); // 假设地图中的州使用 <path> 标签
60+
const svgDoc = svgObject.contentDocument;
61+
const states = svgDoc.querySelectorAll('path');
6762

68-
69-
// 遍历每个州，并添加交互
7063
states.forEach(state => {
71-
// if (targetStates.includes(state.id)) { // 只处理特定 ID 的州
7264
state.addEventListener('mouseover', () => {
73-
state.style.fill = '#FF0000'; // 鼠标悬停时高亮
65+
state.style.fill = '#FF0000';
66+
7467

75-
// 显示州名
7668
const stateInfo = document.getElementById('stateInfo');
7769
stateInfo.style.display = 'block';
7870
stateInfo.innerHTML = `
@@ -81,11 +73,11 @@ <h3>${state.id}</h3>
8173
`;
8274
});
8375
state.addEventListener('mouseout', () => {
84-
state.style.fill = '#cccccc'; // 恢复原样
76+
state.style.fill = '';
8577
});
8678
state.addEventListener('click', () => {
87-
const targetUrl = `https://danielchen3.github.io/usa_map/${state.id}`; // 替换为你需要跳转的网址
88-
window.location.href = targetUrl; // 跳转到指定网页
79+
const targetUrl = `https://danielchen3.github.io/usa_map/${state.id}`;
80+
window.location.href = targetUrl;
8981
});
9082
//}
9183
});

‎usa_map/CA/index.html‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -56,40 +56,38 @@ <h1>Welcome to California</h1>
5656
</div>
5757

5858
<script>
59-
// 定义特定的州 ID 列表
60-
// const targetStates = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"]; // 替换为你需要的州 ID
61-
62-
// 添加鼠标交互
6359
const svgObject = document.getElementById('usaMap');
6460
svgObject.addEventListener('load', () => {
65-
const svgDoc = svgObject.contentDocument; // 获取嵌入的 SVG 文档
66-
const states = svgDoc.querySelectorAll('path'); // 假设地图中的州使用 <path> 标签
61+
const svgDoc = svgObject.contentDocument;
62+
const regions_1 = svgDoc.querySelectorAll('path');
63+
const regions_2 = svgDoc.querySelectorAll('polyline');
6764

65+
regions = [regions_1, regions_2];
66+
67+
regions.forEach(region_ => {
68+
region_.forEach(region => {
69+
if (region.id && !region.id.includes("path")) {
70+
region.addEventListener('mouseover', () => {
71+
region.style.fill = '#FF0000';
6872

69-
// 遍历每个州，并添加交互
70-
states.forEach(state => {
71-
if (state.id && !state.id.includes("path")) { // 只处理特定 ID 的州
72-
state.addEventListener('mouseover', () => {
73-
state.style.fill = '#FF0000'; // 鼠标悬停时高亮
74-
75-
// 显示州名
76-
const stateInfo = document.getElementById('stateInfo');
77-
stateInfo.style.display = 'block';
78-
const processedId = state.id.substring(state.id.lastIndexOf('_') + 1);
79-
stateInfo.innerHTML = `
80-
<h3>${processedId}</h3>
81-
<p>这里是关于 ${processedId} 的详细信息</p>
82-
`;
83-
});
84-
state.addEventListener('mouseout', () => {
85-
state.style.fill = '#cccccc'; // 恢复原样
86-
});
87-
state.addEventListener('click', () => {
88-
const targetUrl = `https://danielchen3.github.io/usa_map/${state.id}`; // 替换为你需要跳转的网址
89-
window.location.href = targetUrl; // 跳转到指定网页
90-
});
91-
}
73+
const stateInfo = document.getElementById('stateInfo');
74+
stateInfo.style.display = 'block';
75+
const processedId = region.id.split('_').slice(3).join('_'); stateInfo.innerHTML = `
76+
<h3>${processedId}</h3>
77+
<p>这里是关于 ${processedId} 的详细信息</p>
78+
`;
79+
});
80+
region.addEventListener('mouseout', () => {
81+
region.style.fill = '';
82+
});
83+
region.addEventListener('click', () => {
84+
const targetUrl = `https://danielchen3.github.io/usa_map/${region.id}`;
85+
window.location.href = targetUrl;
86+
});
87+
}
88+
});
9289
});
90+
9391
});
9492
</script>
9593
</body>

‎usa_map/NY/index.html‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -74,32 +74,26 @@ <h1>Welcome to New York</h1>
7474
</a>
7575
</div>
7676

77-
<!-- 嵌入外部 SVG 文件 -->
7877
<div class="map-container">
7978
<object id="usaMap" data="Map_of_New_York_County_Outlines.svg" type="image/svg+xml" style="width: 60%; max-width: auto; height: auto; border: 1px solid #ddd;"></object>
8079
<div id="stateInfo"></div>
8180
</div>
8281

8382

8483
<script>
85-
// 定义特定的州 ID 列表
86-
// const targetStates = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"]; // 替换为你需要的州 ID
87-
const targetRegions = ["Bronx", "Suffolk", "Westchester","New_York", ]; // 替换为你需要的州 ID
88-
// 添加鼠标交互
84+
const targetRegions = ["Bronx", "Suffolk", "Westchester","New_York", ];
8985
const svgObject = document.getElementById('usaMap');
9086
svgObject.addEventListener('load', () => {
91-
const svgDoc = svgObject.contentDocument; // 获取嵌入的 SVG 文档
92-
const paths = svgDoc.querySelectorAll('path'); // 假设地图中的州使用 <path> 标签
93-
const regions = svgDoc.querySelectorAll('polygon'); // 假设地图中的州使用 <g> 标签
87+
const svgDoc = svgObject.contentDocument;
88+
const paths = svgDoc.querySelectorAll('path');
89+
const regions = svgDoc.querySelectorAll('polygon');
9490

95-
96-
// 遍历每个州，并添加交互
9791
regions.forEach(region => {
98-
if (region.id && !region.id.includes("path")) { // 只处理特定 ID 的州
92+
if (region.id && !region.id.includes("path")) {
9993
region.addEventListener('mouseover', () => {
100-
region.style.fill = '#FF0000'; // 鼠标悬停时高亮
94+
region.style.fill = '#FF0000';
10195

102-
// 显示州名
96+
10397
const stateInfo = document.getElementById('stateInfo');
10498
stateInfo.style.display = 'block';
10599
const processedId = region.id.substring(region.id.lastIndexOf('_') + 1);
@@ -109,21 +103,21 @@ <h3>${processedId}</h3>
109103
`;
110104
});
111105
region.addEventListener('mouseout', () => {
112-
region.style.fill = ''; // 恢复原样
106+
region.style.fill = '';
113107
});
114108
region.addEventListener('click', () => {
115-
const targetUrl = `https://danielchen3.github.io/usa_map/${region.id}`; // 替换为你需要跳转的网址
116-
window.location.href = targetUrl; // 跳转到指定网页
109+
const targetUrl = `https://danielchen3.github.io/usa_map/${region.id}`;
110+
window.location.href = targetUrl;
117111
});
118112
}
119113
});
120114

121115
paths.forEach(path => {
122-
if (path.id && !path.id.includes("path") && targetRegions.includes(path.id)) { // 只处理特定 ID 的州
116+
if (path.id && !path.id.includes("path") && targetRegions.includes(path.id)) {
123117
path.addEventListener('mouseover', () => {
124-
path.style.fill = '#FF0000'; // 鼠标悬停时高亮
118+
path.style.fill = '#FF0000';
125119

126-
// 显示州名
120+
127121
const stateInfo = document.getElementById('stateInfo');
128122
stateInfo.style.display = 'block';
129123
const processedId = path.id;
@@ -133,11 +127,11 @@ <h3>${processedId}</h3>
133127
`;
134128
});
135129
path.addEventListener('mouseout', () => {
136-
path.style.fill = ''; // 恢复原样
130+
path.style.fill = '';
137131
});
138132
path.addEventListener('click', () => {
139-
const targetUrl = `https://danielchen3.github.io/usa_map/${path.id}`; // 替换为你需要跳转的网址
140-
window.location.href = targetUrl; // 跳转到指定网页
133+
const targetUrl = `https://danielchen3.github.io/usa_map/${path.id}`;
134+
window.location.href = targetUrl;
141135
});
142136
}
143137
});

‎usa_map/index.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,33 +39,30 @@
3939
</style>
4040
</head>
4141
<body>
42-
<h1>Welcome to My USA Map Blog</h1>
43-
<p>This is the USA map:</p>
42+
<h1>Welcome to USA ALERT</h1>
43+
<p>Let's alert America!</p>
4444

45-
<!-- 嵌入外部 SVG 文件 -->
4645
<div class="map-container">
4746
<object id="usaMap" data="Map_of_USA_with_state_names_2.svg" type="image/svg+xml" style="width: 60%; max-width: auto; height: auto; border: 1px solid #ddd;"></object>
4847
<div id="stateInfo"></div>
4948
</div>
5049

5150
<script>
52-
// 定义特定的州 ID 列表
5351
const targetStates = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"]; // 替换为你需要的州 ID
5452

55-
// 添加鼠标交互
5653
const svgObject = document.getElementById('usaMap');
5754
svgObject.addEventListener('load', () => {
58-
const svgDoc = svgObject.contentDocument; // 获取嵌入的 SVG 文档
59-
const states = svgDoc.querySelectorAll('path'); // 假设地图中的州使用 <path> 标签
55+
const svgDoc = svgObject.contentDocument;
56+
const states = svgDoc.querySelectorAll('path');
6057

6158

6259
// 遍历每个州，并添加交互
6360
states.forEach(state => {
64-
if (targetStates.includes(state.id)) { // 只处理特定 ID 的州
61+
if (targetStates.includes(state.id)) {
6562
state.addEventListener('mouseover', () => {
66-
state.style.fill = '#FF0000'; // 鼠标悬停时高亮
63+
state.style.fill = '#FF0000';
6764

68-
// 显示州名
65+
// state information and extra interaction
6966
const stateInfo = document.getElementById('stateInfo');
7067
stateInfo.style.display = 'block';
7168
stateInfo.innerHTML = `
@@ -74,11 +71,11 @@ <h3>${state.id}</h3>
7471
`;
7572
});
7673
state.addEventListener('mouseout', () => {
77-
state.style.fill = '#FFFFFF'; // 恢复原样
74+
state.style.fill = '#FFFFFF';
7875
});
7976
state.addEventListener('click', () => {
80-
const targetUrl = `https://danielchen3.github.io/usa_map/${state.id}`; // 替换为你需要跳转的网址
81-
window.location.href = targetUrl; // 跳转到指定网页
77+
const targetUrl = `https://danielchen3.github.io/usa_map/${state.id}`;
78+
window.location.href = targetUrl;
8279
});
8380
}
8481
});

0 commit comments

Comments
 (0)