CSS Image Gallery Help.. [Archive] - Dynamic Drive Forums

View Full Version : CSS Image Gallery Help..

Cball

03-12-2007, 06:25 PM

I'm able to get this to work however I'm using text instead of thumbnails and the gallery images are working great. But I would also like the text to be a click able link to open a .pdf. And since it is all ready a link to the gallery image I'm not able to click on it to open the .pdf. Confused? I'm am. :) Any help would be great.

<a class="thumbnail" href="#thumb">Test Image<img src="img/test.gif" /> Test Image.</a>

Thanks in advance.

Here is the source.
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

auntnini

03-12-2007, 11:12 PM

I might not have the terminology guite right, but the hash mark # is a "fractal" link that does not really go anywhre (as in href="#thumb"):
<a class="thumbnail" HREF="#thumb">Text<img src="img/test.gif" /> Test Image.</a>

IE does not support a:HOVER unless it is in a link, and that CSS-Image-Gallery uses CSS hover/SPAN.

I believe you can add an ONCLICK= event handler and put your link text into href="________". I had to do something similar at http://www.chanit.com/gallery/index.htm for an alternate pop-up image because of IE/Win HOVER problems.

Cball

03-13-2007, 03:24 PM

Well here is what code I'm using based on your example and I still cannot get it to work. Thanks again

<a class="thumbnail" href="#thumb" onclick="loadpage('www.testdomain.com/tools/test.pdf')">Test Doc<img src="img/test2.gif" /></a>

auntnini

03-14-2007, 11:46 PM

Sorry, http://chanit.com/gallery/index.htm was not a good example. Forgot I ended up using a second link on title –- which required following “loadpage” script (in <HEAD>) to work:
<SCRIPT language="JavaScript" type="text/javascript"></SCRIPT>
<div class="gallerycontainer"> <a class="overSpn" href="#" title="--">
<img class="thumb" src="../thumbs/--.gif" width="50px" height="75px" alt="--">
-- <img class="pix" src="../things/--.jpg" alt="--"> </a>
<a href="#nogo" onclick="loadpage('../things/--.jpg')">title</a> 11x14 watercolor
</div> 

Point I was trying to make (someone clarify my mistakes) is hash mark # is a “fractal selector” and seems to be applied in DD’s http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/P90/ CSS-Image-Gallery as one might use <a href=”javascipt:void(0)”…> or <a href=”#nogo” …> or <a href=”#” …> when it is a blind link that does not go anywhere. So it would seem you could just substitute HREF=”#THUMB” with your link URL text.

Other point I was trying to make is DD’s CSS-image-Gallery does not use <a HREF=”#link”> or JavaScript onMouseOver to display the hidden image. It only uses CSS-styled display: none; or visibility; hidden;
.thumbnail SPAN { position: absolute; visibility: hidden;}
and then applies :HOVER pseudo-class as contextual specifier or selector for SPAN with display: block; or visibility: visible;
.thumbnail:HOVER SPAN { visibility: visible; }

Years ago the Czar of CSS, Eric Meyers, explained basic HOVER/SPAN CSS methodology at http://meyerweb.com/eric/css/edge/popups/demo.html. Also see his http://meyerweb.com/eric/css/edge/popups/demo2.html and http://meyerweb.com/eric/css/edge/menus/demo.html.

Once read IE does not support :hover pseudo class unless it is in a link and had always used anchor tag A:HOVER. DD’s CSS-Image-Gallery was first time I saw :HOVER applied directly to something other than A link (as in class .thumbnail:HOVER).

Another aspect to consider is POSITION: RELATIVE for “parent” element and POSITION: ABSOLUTE for the “child” HOVER/SPAN -- which http://www.webreference.com/programming/css_style2/3.html clarified for me -- as used in navigation tool tip at http://www.auntnini.com.

Cball

03-15-2007, 01:23 PM

Thank you, Auntnini for the help the following is what I finally got to work.

 <a
class="thumbnail"
style="
cursor: url(img/test.ani);
font-family: 'Arial Black', Arial, sans-serif;
font-size: 120%;
font-style: italic;
"
href="tools/test.pdf"
target="_blank"
>
Testing Test

<img src="img/test2.gif">

</a>