# 地圖上面可以點的框框出不來怎麼辦 上週有不少人小作業的部分，地圖上面的連結做不出來，或者是要按檢查才可以正常看到，或是要加上文字才可以看到，因為很多這樣的狀況所以我沒辦法一個一個排查，最實際的辦法就是去比對你跟著老師做的範例和你自己做的部分不同的地方在哪，如果你跟著老師做得過程就已經失敗了，那你就要趕快呼叫我了，不要等到要做作業了才不知所措。 做小作業就是每弄一步，就重整頁面檢查一次一切是否正常，如果你做了一大堆才要去看正不正常，出錯你就完全不知道是哪一個步驟錯誤。 但假設你真的不知道哪一步做錯，那你就是重建，一小塊一小塊複製你已經做好的東西，一步一步檢查複製上哪一塊後就導致錯誤了。 那比如說現在你的問題出在小地圖的連結，那你就開一個新的頁面，只做小地圖這個東西，其他東西都不要做，如果可以成功，就代表你小地圖沒問題，是其他東西導致的，如果你失敗，就代表你小地圖的部分有東西錯誤了。 所以就會像這樣 我新增一個空白的頁面 ```htmlmixed= <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <img src="01.jpg"> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> ``` 然後放進一張地圖 ```htmlmixed= <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <img src="01.jpg"> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> ``` 然後按照老師給的程式碼 ```htmlmixed= <a href="#nature"><div class="url_nature"></div></a> <style type="text/css"> .url_nature { position: absolute; width: 30px; height: 30px; left: 35px; top: 245px; } </style> ``` 把上面這段加進去 ```htmlmixed= <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> <style type="text/css"> .url_nature { position: absolute; width: 30px; height: 30px; left: 35px; top: 245px; } </style> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <img src="01.jpg"> <a href="#nature"><div class="url_nature"></div></a> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> ``` ![](https://i.imgur.com/RLLKFqV.png) 然後你發現在網頁上找不到那個可以點的地方 ![](https://i.imgur.com/QO8OokQ.png) 按右鍵檢查就可以打開下面的原始碼 ![](https://i.imgur.com/Q7LKx1W.png) 在這個區塊ctrl+f搜尋關鍵字 ![](https://i.imgur.com/uZtbX8h.png) 滑鼠擺上面它就會跟你說在哪了 那這邊說一下這個連結的原理 再看一次老師給的程式碼 ```htmlmixed= <a href="#nature"><div class="url_nature"></div></a> <style type="text/css"> .url_nature { position: absolute; width: 30px; height: 30px; left: 35px; top: 245px; } </style> ``` ```htmlmixed= <a href="#nature"><div class="url_nature"></div></a> ``` 上面這段的意思就是說，我新增一個區塊叫做div，並且把它的class叫做url_nature，外面我放上超連結a，這個超連結會連到id叫做nature的頁面，要把這個a放在div外面，就是因為這樣整個div都會變成可以點的東西，那為什麼div的class要叫做url_nature? ```htmlmixed= <style type="text/css"> .url_nature { position: absolute; width: 30px; height: 30px; left: 35px; top: 245px; } </style> ``` style這個東西呢就是要幫你網頁的內容那些元素做個打扮的意思，你可以利用style這個區塊的css語法來決定你網頁元素要呈現什麼模樣，那你首先要指定是哪一個元素，因為剛剛div你是說它的class叫做 url_nature，什麼是class，你可以把它想成就是一個班級，那麼只要該元素有class叫做一樣名字的他們就是同一班，那麼style裡面的語法都會套用到他們身上，而在style裡面要呼叫他們就是要用 .class 然後大括號裡面寫你要幫他們穿什麼衣服，那id的意思就是這個元素的名字，id就跟身分證一樣只能這個人有，在style裡面你要操控他就要寫 #id 然後大括號，所有的效果只會那個人有。 可以看到語法裡面寫說 width 和 height 各30px，這就是為什麼我們在網頁看到那個連結是一個小框框。 就醬。