在wordpress中創建響應式圖像鏈接圖

我在wordpress主題的標題中有一個圖像鏈接地圖，我需要在750px下進行響應。我已經能夠使鏈接顯示在標題中，但他們不活躍，我不知道爲什麼。現在我只是想讓「p1」鏈接起作用。在wordpress中創建響應式圖像鏈接圖

網站是在這裏：indie-scene.com

這裏是我的PHP：

<div class="header header-default"> 
     <img src="<?php echo $ti_option['site_logo']['url']; ?>" alt="<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>" width="<?php echo $ti_option['site_logo']['width']; ?>" height="<?php echo $ti_option['site_logo']['height']; ?>" /> 
     <div class="hotspots"> 
      <a href="http://www.nearlynewlywed.com" class="p1"></a> 
     <div title="home"> 
      <a href="http://www.indie-scene.com" class="p2"></a> 
     </div> 
     <div title="sell"> 
      <a href="http://www.nearlynewlywed.com/a/sell" class="p3"></a> 
     </div> 
     </div> 
    </a><!-- Logo -->

，並在我的CSS媒體查詢

@media only screen and (max-width: 750px) { 
.header { 
    width:100%; 
} 
.header img { 
    content: url(http://indie-scene.com/wp-content/uploads/2014/10/logo_no_banner.png); 
max-width: 276px; 
} 
.header {width:100%; position:relative; } 
.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;} 
.header a {display:block; position:absolute; background:#000; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; } 
.header a.p1 {left:50%; top:5%; width:50%; height:50%;}

來源

2014-10-27 Patrick Courtney

的鏈接不會出現，因爲你已將您的hotspots div的visibility設置爲hidden，寬度爲750px此處：

.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; }

您需要從上面的CSS中刪除visibility:hidden;或將其更改爲visibility: visible;。

enter image description here

在上圖中，我設置了hotspots div的visibility到visible使用的開發工具，你可以看到你的.p1鏈接現已出現。

來源

2014-10-27 01:27:47

在wordpress中創建響應式圖像鏈接圖

回答

相關問題