Databases
StackOverflow2013
Postsdbo
POWhy is the image not a link?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is the image not a link?
    text
    copied!<p>I have this JQuery image presentation and for some reason I cant get an ancor tag to work on the images. This is my page: <a href="http://orhsfoundation.com/Trial" rel="nofollow">http://orhsfoundation.com/Trial</a></p> <p>I don't know if these are needed but here you go</p> <p>HTML:</p> <pre><code>&lt;div id="allinone_bannerWithPlaylist_easy" style="; ; display: none;background-color: #03F;"&gt; &lt;!-- IMAGES --&gt; &lt;a href="about.html"&gt;&lt;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" /&gt;&lt;/a&gt; &lt;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." /&gt; &lt;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." /&gt; &lt;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." /&gt; &lt;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" /&gt; &lt;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." /&gt; &lt;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 " /&gt; &lt;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." /&gt; &lt;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." /&gt; &lt;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." /&gt; &lt;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" /&gt; &lt;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." /&gt; &lt;!-- TEXTS --&gt; &lt;div id="allinone_bannerWithPlaylist_photoText1" class="allinone_bannerWithPlaylist_texts"&gt; &lt;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"&gt; &lt;div class="textElement11_easy"&gt;Up to 5 types of banners&lt;/div&gt; &lt;div class="textElement12_easy"&gt;Each with multiple SKINS&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="allinone_bannerWithPlaylist_photoText2" class="allinone_bannerWithPlaylist_texts"&gt; &lt;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"&gt;16 transition effects for images&lt;/div&gt; &lt;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"&gt;optional can set the transition for each image&lt;/div&gt; &lt;/div&gt; &lt;div id="allinone_bannerWithPlaylist_photoText3" class="allinone_bannerWithPlaylist_texts"&gt; &lt;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"&gt;Animated text from any direction&lt;/div&gt; &lt;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"&gt;top, bottom, left and right&lt;/div&gt; &lt;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"&gt;Any color, CSS and HTML formated&lt;/div&gt; &lt;/div&gt; &lt;div id="allinone_bannerWithPlaylist_photoText4" class="allinone_bannerWithPlaylist_texts"&gt; &lt;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"&gt; &lt;div class="textElement41_easy"&gt;Lorem &lt;a href="http://codecanyon.net/user/LambertGroup" target="_blank"&gt;Ipsum&lt;/a&gt; Dolor Sit Amet&lt;/div&gt; &lt;div class="textElement42_easy"&gt;Consectetur Adiscipit&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="allinone_bannerWithPlaylist_photoText5" class="allinone_bannerWithPlaylist_texts"&gt; &lt;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"&gt;Line One is here&lt;/div&gt; &lt;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"&gt;Line Two over there&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS(with some edited out):</p> <pre><code>.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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload