1. 首頁
  2. 問答
  3. 爲什麼圖像不是鏈接？

爲什麼圖像不是鏈接？

2012-07-18 86 views
-1

我有這個jQuery圖像演示文稿，出於某種原因，我無法獲得ancor標籤來處理圖像。 這是我的網頁：http://orhsfoundation.com/Trial爲什麼圖像不是鏈接？

，如果這些都需要我不知道，但在這裏你去

HTML：

<div id="allinone_bannerWithPlaylist_easy" style="; ; display: none;background-color: #03F;"> 
      <!-- IMAGES --> 
     <a href="about.html"><img src="Assets/Images/01_easyPlaylist.jpg" alt="" data-title="Lorem Ipsum Dolor1" data-text-id="#allinone_bannerWithPlaylist_photoText1" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit " border="0" /></a> 


      <img src="Assets/Images/02_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText2" data-title="Fusce Suscipit Risus2" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." /> 
      <img src="Assets/Images/03_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText3" data-title="Class Aptent Taciti " data-desc="Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend." /> 
      <img src="Assets/Images/04_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText4" data-title="Maecenas Lacus Ante" data-desc="Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum." /> 
      <img src="Assets/Images/05_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText5" data-title="Lorem Ipsum Dolor" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit" /> 
      <img src="Assets/Images/06_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText6" data-title="Suscipit Risus" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." /> 



      <img src="Assets/Images/01_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText1" data-title="Lorem Ipsum Dolor1" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit " /> 
      <img src="Assets/Images/02_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText2" data-title="Fusce Suscipit Risus2" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." /> 
      <img src="Assets/Images/03_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText3" data-title="Class Aptent Taciti " data-desc="Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend." /> 
      <img src="Assets/Images/04_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText4" data-title="Maecenas Lacus Ante" data-desc="Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie aliquet ipsum." /> 
      <img src="Assets/Images/05_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText5" data-title="Lorem Ipsum Dolor" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit" /> 
      <img src="Assets/Images/06_easyPlaylist.jpg" alt="" data-text-id="#allinone_bannerWithPlaylist_photoText6" data-title="Suscipit Risus" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." />         



      <!-- TEXTS --> 
      <div id="allinone_bannerWithPlaylist_photoText1" class="allinone_bannerWithPlaylist_texts"> 
       <div class="allinone_bannerWithPlaylist_text_line textbg_easy" data-initial-left="0" data-initial-top="100" data-final-left="-50" data-final-top="320" data-duration="0.5" data-fade-start="0" data-delay="0"> 
       <div class="textElement11_easy">Up to 5 types of banners</div> 
       <div class="textElement12_easy">Each with multiple SKINS</div></div> 
      </div> 

      <div id="allinone_bannerWithPlaylist_photoText2" class="allinone_bannerWithPlaylist_texts"> 
       <div class="allinone_bannerWithPlaylist_text_line textElement21_easy" data-initial-left="80" data-initial-top="50" data-final-left="30" data-final-top="30" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects for images</div> 
       <div class="allinone_bannerWithPlaylist_text_line textElement22_easy" data-initial-left="280" data-initial-top="80" data-final-left="30" data-final-top="90" data-duration="0.5" data-fade-start="0" data-delay="0.3">optional can set the transition for each image</div> 
      </div> 


      <div id="allinone_bannerWithPlaylist_photoText3" class="allinone_bannerWithPlaylist_texts"> 
       <div class="allinone_bannerWithPlaylist_text_line textElement31_easy" data-initial-left="0" data-initial-top="50" data-final-left="40" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div> 
       <div class="allinone_bannerWithPlaylist_text_line textElement32_easy" data-initial-left="0" data-initial-top="90" data-final-left="40" data-final-top="66" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div> 
       <div class="allinone_bannerWithPlaylist_text_line textElement33_easy" data-initial-left="0" data-initial-top="200" data-final-left="40" data-final-top="101" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>    
      </div> 


      <div id="allinone_bannerWithPlaylist_photoText4" class="allinone_bannerWithPlaylist_texts"> 
       <div class="allinone_bannerWithPlaylist_text_line textbg_easy" data-initial-left="0" data-initial-top="100" data-final-left="0" data-final-top="287" data-duration="0.5" data-fade-start="0" data-delay="0"> 
       <div class="textElement41_easy">Lorem <a href="http://codecanyon.net/user/LambertGroup" target="_blank">Ipsum</a> Dolor Sit Amet</div> 
       <div class="textElement42_easy">Consectetur Adiscipit</div></div> 
      </div> 

      <div id="allinone_bannerWithPlaylist_photoText5" class="allinone_bannerWithPlaylist_texts"> 
       <div class="allinone_bannerWithPlaylist_text_line textElement51_easy" data-initial-left="30" data-initial-top="0" data-final-left="30" data-final-top="270" data-duration="0.5" data-fade-start="0" data-delay="0">Line One is here</div> 
       <div class="allinone_bannerWithPlaylist_text_line textElement52_easy" data-initial-left="30" data-initial-top="384" data-final-left="30" data-final-top="250" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line Two over there</div> 
      </div>

CSS（有一些編輯了）：

.allinone_bannerWithPlaylistBorder { 
    position:relative; 
} 


/* the container */ 
.allinone_bannerWithPlaylist { 
    position:relative; 


} 
.allinone_bannerWithPlaylist img { 
    position:absolute; 
    top:0px; 
    left:0px; 
    max-width:100%; 
    max-height:100%;  
} 
.allinone_bannerWithPlaylist .stripe { 
    position:absolute; 
    display:block; 
    height:100%; 
    z-index:1; 
} 
.allinone_bannerWithPlaylist .block { 
    position:absolute; 
    display:block; 
    z-index:1; 
     } 


/***ELEGANT SKIN***/ 

.allinone_bannerWithPlaylist.elegant .bannerControls { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:2; 
} 

.allinone_bannerWithPlaylist.elegant .leftNav { 
    position:absolute; 
    left:0px; 
    top:50%; 
    margin-top:-35px; /* height/2 */ 
    width:31px; 
    height:71px; 
    background:url(leftNavOFF.png) 0 0 no-repeat; 
    cursor: pointer; 
} 

.allinone_bannerWithPlaylist.elegant .leftNav:hover { 
    background:url(leftNavON.png) 0 0 no-repeat; 
} 
.allinone_bannerWithPlaylist.elegant .rightNav { 
    position:absolute; 
    right:0px; 
    top:50%; 
    margin-top:-35px; /* height/2 */ 
    width:31px; 
    height:71px; 
    background:url(rightNavOFF.png) 0 0 no-repeat; 
    cursor: pointer; 
} 
.allinone_bannerWithPlaylist.elegant .rightNav:hover { 
    background:url(rightNavON.png) 0 0 no-repeat; 
} 
.allinone_bannerWithPlaylist.elegant .thumbsHolderWrapper { 
    position:absolute; 
    background:#e9e9e9; 
    /*height:121px; 
    width:100%;*/ 
    height:100%; 
    overflow:hidden; 
} 
.allinone_bannerWithPlaylist.elegant .thumbsHolderVisibleWrapper { 
    position:absolute; 
    /*width:100%; 
    height:121px;*/ 
    height:100%; 
    overflow:hidden; 
} 
.allinone_bannerWithPlaylist.elegant .thumbsHolder { 
    position:absolute; 
} 
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF { 
    display:block; 
    height:110px; 
    background:#cfcfcf; 
    text-align:left; 
    line-height:1.4em; 
    cursor: pointer; 
} 
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF .padding { 
    padding:10px; 
} 
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF .title { 
    font: bold 13px 'Droid Sans', sans-serif; 
    color:#000; 
    display:inline-block; 
    padding-bottom:5px; 
} 
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF .reg { 
    font: 11px Arial, sans-serif; 
    color:#000; 
    line-height:1.4em; 
} 

.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbOFF img { 
    position:relative; 
    float:left; 
    margin-right:10px; 
} 

.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbON { 
    background:#611731; 
} 
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbON .title { 
    color:#ff771c; 
} 
.allinone_bannerWithPlaylist.elegant .thumbsHolder_ThumbON .reg { 
    color:#FFF; 
} 


/* scroller start */ 
.allinone_bannerWithPlaylist.elegant .slider-vertical { 
    display:none; 
    position:absolute; 
    width:6px; 
} 

.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider { position: relative;} 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 6px; height: 25px; cursor: pointer; background:url(scrollerFaceOFF.png) 0 0 no-repeat; } 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider .ui-slider-handle:hover { background:url(scrollerFaceON.png) 0 0 no-repeat; } 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; } 


.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical { width: 6px; height: 100px; } 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-handle { left: 0px; margin-left: 0px; margin-bottom: -25px;; border: 0; } 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-range-min { bottom: 0; } 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-slider-vertical .ui-slider-range-max { top: 0; } 


/* Component containers 
----------------------------------*/ 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-widget-content { xbackground: #FF0000; } 
.allinone_bannerWithPlaylist.elegant .slider-vertical .ui-widget-header { xbackground: #0000cc; } 


/* Corner radius */ 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-corner-all {} 

/* Interaction states 
---------------------------------- 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-state-default {background: #000000; } 
.allinone_bannerWithPlaylist.elegant .slider-vertical.ui-state-hover { background: #FFF000; } 
*/ 
/* scroller end */ 




/***EASY SKIN***/ 

.allinone_bannerWithPlaylist.easy .bannerControls { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:2; 
} 

.allinone_bannerWithPlaylist.easy .leftNav { 
    position:absolute; 
    left:5px; 
    top:50%; 
    margin-top:-35px; /* height/2 */ 
    width:41px; 
    height:41px; 
    background:url(Assets/Images/Banner/skins/easy/leftNavOFF.png) 0 0 no-repeat; 
    cursor: pointer; 

} 

.allinone_bannerWithPlaylist.easy .leftNav:hover { 
    background:url(Assets/Images/Banner/skins/easy/leftNavON.png) 0 0 no-repeat; 
} 
.allinone_bannerWithPlaylist.easy .rightNav { 
    position:absolute; 
    right:5px; 
    top:50%; 
    margin-top:-35px; /* height/2 */ 
    width:41px; 
    height:41px; 
    background:url(Assets/Images/Banner/skins/easy/rightNavOFF.png) 0 0 no-repeat; 
    cursor: pointer; 
} 
.allinone_bannerWithPlaylist.easy .rightNav:hover { 
    background:url(Assets/Images/Banner/skins/easy/rightNavON.png) 0 0 no-repeat; 
} 


.allinone_bannerWithPlaylist.easy .thumbsHolderWrapper { 
    position:absolute; 
    background:#e9e9e9; 
    height:100%; 
    overflow:hidden; 
    width:100%; 
} 

.allinone_bannerWithPlaylist.easy .thumbsHolderVisibleWrapper { 
    position:absolute; 
    height:100%; 
    overflow:hidden; 

} 

.allinone_bannerWithPlaylist.easy .thumbsHolder { 
    position:absolute; 

} 

.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF { 
    display:block; 
    height:96px; 
    background:url(Assets/Images/Banner/skins/easy/bgPlaylistUnit.png) top left repeat-x; 
    text-align:left; 
    line-height:1.4em; 
    cursor: pointer; 
} 
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF .padding { 
    padding:10px; 
} 
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF .title { 
    font: bold 13px 'Droid Sans', sans-serif; 
    color:#000; 
    display:inline-block; 
    padding-bottom:5px; 
} 
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF .reg { 
    font: 11px Arial, sans-serif; 
    color:#000; 
    line-height:1.4em; 
} 
/**** 
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbOFF img { 
    position:relative; 
    float:left; 
    margin-right:10px; 
}/****/ 

.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbON { 
    /*background: #611731 url(skins/easy/thumbActiveArrow.png) -3px 0px no-repeat;*/ 
    background: #611731; 
    z-index:4; 
} 

.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbON .title { 
    color:#ff771c; 
} 
.allinone_bannerWithPlaylist.easy .thumbsHolder_ThumbON .reg { 
    color:#FFF; 
} 


/* scroller start */ 
.allinone_bannerWithPlaylist.easy .slider-vertical { 
    display:none; 
    position:absolute; 
    width:6px; 
} 

.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider { position: relative;} 
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 6px; height: 25px; cursor: pointer; background:url(Assets/Images/Banner/skins/easy/scrollerFaceOFF.png) 0 0 no-repeat; } 
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider .ui-slider-handle:hover { background:url(Assets/Images/Banner/skins/easy/scrollerFaceON.png) 0 0 no-repeat; } 
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; } 


.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical { width: 6px; height: 100px; } 
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-handle { left: 0px; margin-left: 0px; margin-bottom: -25px;; border: 0; } 
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } 
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-range-min { bottom: 0; } 
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-slider-vertical .ui-slider-range-max { top: 0; } 


/* Component containers 
----------------------------------*/ 
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-widget-content { xbackground: #FF0000; } 
.allinone_bannerWithPlaylist.easy .slider-vertical .ui-widget-header { xbackground: #0000cc; } 


/* Corner radius */ 
.allinone_bannerWithPlaylist.easy .slider-vertical.ui-corner-all {} 


/***EASY TEXTS***/ 

.textbg_easy { 
    width:690px; 
    background:url(Assets/Images/Banner/skins/easy/textBg_transparency.png); 
    padding:5px 10px 5px 10px; 

} 

.textElement11_easy { 
    font: bold 24px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    text-transform:uppercase; 
    padding:0px 10px 3px 10px; 
    color:#ffffff; 
} 
.textElement12_easy { 
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    text-transform:uppercase; 
    padding:0px 10px 3px 10px; 
    color:#ffffff; 
} 


.textElement21_easy { 
    width:265px; 
    background:#512d5d; 
    font: bold 22px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    text-transform:uppercase; 
    padding:5px 10px 5px 10px; 
    color:#ffffff; 
} 
.textElement22_easy { 
    width:240px; 
    background:#611731; 
    font: bold 14px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    padding:7px 10px 7px 10px; 
    color:#ffffff; 
} 


.textElement31_easy { 
    background:#d61d1d; 
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    text-transform:uppercase; 
    padding:5px 10px 5px 10px; 
    color:#ffffff; 
} 
.textElement32_easy { 
    background:#ffffff; 
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    padding:7px 10px 7px 10px; 
    color:#000000; 
} 

.textElement33_easy { 
    background:#000000; 
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    padding:7px 10px 7px 10px; 
    color:#ffffff; 
} 

.textElement41_easy { 
    font: bold 24px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    text-transform:uppercase; 
    padding:0px 10px 3px 10px; 
    color:#ffffff; 
} 


.textElement41_easy a { 
    text-decoration:none; 
    color:#ff771c; 
} 

.textElement41_easy a:hover { 
    color:#c1dd56; 
} 

.textElement42_easy { 
    font: bold 18px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    text-transform:uppercase; 
    padding:0px 10px 3px 10px; 
    color:#ffffff; 
} 


.textElement51_easy { 
    font: bold 38px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    text-transform:uppercase; 
    padding:6px 15px 6px 15px; 
    color:#000000; 
} 
.textElement52_easy { 
    font: bold 20px 'Droid Sans', Verdana, Helvetica, sans-serif; 
    text-transform:uppercase; 
    padding:6px 15px 6px 15px; 
    color:#000000; 
} 


.textElement_easy { 
    background:#512d5d; 
    padding:10px; 
    color:#FFF; 
} 
.textElement2_easy { 
    background:#FF0000; 
    padding:10px; 
    color:#FFF; 
} 

.allinone_bannerWithPlaylist_texts { 
    position:absolute; 
    z-index:3; 
    display:none; 
    width:100%; 
    text-align:left; 
} 

.allinone_bannerWithPlaylist_text_line { 
    position:absolute; 
} 



.hideElement { 
    display:none; 
}

來源

2012-07-18 user1533928

+0

你的jQuery在哪裏？ – 2012-07-18 13:49:05

+0

我受限於字符數量... http://orhsfoundation.com/allinone_bannerWithPlaylist.js – user1533928 2012-07-18 13:51:20

+0

我發現在您的html中，您只有一個標籤（第一個圖片）。你的標籤的其餘部分在哪裏？ – DextrousDave 2012-07-18 13:54:35

回答

0

簡要查看你的allinone_bannerWithPlaylist.js文件。它看起來像是通過去除圖像標籤的src屬性並將其設置爲它創建的一系列div的背景圖像來生成幻燈片放映。所以你的圖像沒有被鏈接，因爲你的圖像（你放在HTML中）並不是實際顯示的圖像。這種行爲是允許在「盲目式」轉變中的列。

這就是你的答案。我的修復建議是找到一個不同的jQuery幻燈片插件，可能更適合您的需求。您可能會失去顯示的轉換，但您會獲得鏈接。

來源

2012-07-18 14:26:17 Carsen

+0

感謝您解釋情況......儘管您的建議iv'e能夠使用文本動畫製作此作品！ – user1533928 2012-07-18 14:58:27

相關問題

 相關問題