• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> div+css >> DIV+CSS實(shí)現(xiàn)地圖效果

DIV+CSS實(shí)現(xiàn)地圖效果

• 作者：創(chuàng)新互聯(lián) 文章來源： 點(diǎn)擊數(shù)： 更新時(shí)間：2015-02-04

• 1.FLASH不利于SEO.面且如果用戶的電腦沒有安FLASH插件,也是沒有辦法看到的.更別說用手機(jī)上網(wǎng)的用戶了.

  2.然后就是用熱點(diǎn)來作.每個(gè)城市的熱區(qū).都會通過上下左右四個(gè)值來計(jì)算.而且鼠標(biāo)放上去還沒有什么效果.這樣感覺不爽.最主要的是代碼不比這樣作少.可能還會多一些.

  由于.就有了下邊的效果.雖然用這樣的方式制作過程比正常多出約1/3的時(shí)間.但效果還是不錯(cuò)的.而且有利于SEO.我把正常情況的圖片和鼠標(biāo)移上去的效果圖片寫成一個(gè)了.這樣.用戶把鼠標(biāo)移上去后出現(xiàn)的圖片不用重新加載. 比較流暢.
  你可以點(diǎn)一下后邊看一下:

  以下是CSS的代碼:

  程序代碼

  以下為引用的內(nèi)容： #map{ background:url(/cg_img/map.gif) no-repeat left top; height:447px; width:552px; float:left;} #map h1{ position:absolute;font-weight:normal; display:block} .mapl a:link,.mapl a:visited,.mapr a:link,.mapr a:visited{color:#000;text-decoration:none;display:block;background: url(/cg_img/maph1.gif);background-repeat: no-repeat;} .mapl a:link,.mapl a:visited{padding-left:20px;background-position: left 4px;} .mapr a:link,.mapr a:visited{padding-right:20px;background-position: right 4px;} .mapl a:hover,.mapl a:active,.mapr a:hover,.mapr a:active{color: #FF0000;padding-right:20px;display:block;background: url(/cg_img/maph1.gif);background-repeat: no-repeat;} #map .mapr a:hover,#map .mapr a:active{background-position: right bottom;padding-right:20px;} #map .mapl a:hover,#map .mapl a:active{background-position: left bottom;padding-left:20px;}

  
  

  由于城市名稱的有時(shí)在圖的左邊.有時(shí)在右邊.所以寫了兩個(gè)CLASS; 代碼還能再優(yōu)化一點(diǎn). 但考慮優(yōu)化過的代碼后期維護(hù)比較麻煩. 所以沒有更細(xì)的優(yōu)化. 只是簡寫了一些CSS.

  這樣的效果不知道有沒有更好的辦法來實(shí)現(xiàn)?

• DIV+CSS網(wǎng)頁布局對SEO的影響 :上一篇
  正確使用CSS的類型選擇器制作網(wǎng)頁 :下一篇