Results 1 to 5 of 5

Thread: CSS Image Gallery Help..

  1. #1
    Join Date
    Mar 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default CSS Image Gallery Help..

    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<span><img src="img/test.gif" /><br />Test Image.</span></a>

    Thanks in advance.

    Here is the source.
    http://www.dynamicdrive.com/style/cs...image-gallery/

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default #nogo

    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<SPAN><img src="img/test.gif" /><br />Test Image.</SPAN></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.
    Last edited by auntnini; 03-13-2007 at 12:22 AM.

  3. #3
    Join Date
    Mar 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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<span><img src="img/test2.gif" /></span></a>

  4. #4
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default Href="#"

    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"><!--
    var mypop=null;
    function loadpage(url) {
    if ((!mypop) || (mypop.close)) { mypop = window.open (url, 'mypop', 'width=400px,height=375px,toolbar=0,resizable=1,left=20,top=20');
    } else { mypop.document.location.href=url; }
    mypop.focus(); return true; }
    // --></SCRIPT>
    <div class="gallerycontainer"> <a class="overSpn" href="#" title="--">
    <img class="thumb" src="../thumbs/--.gif" width="50px" height="75px" alt="--">
    <span>--<br><img class="pix" src="../things/--.jpg" alt="--"> </span></a>
    <p><a href="#nogo" onclick="loadpage('../things/--.jpg')">title</a><br> 11x14 watercolor</p>
    </div> <br clear="all">

    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/cs...e-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 <SPAN>display: none; or visibility; hidden;</SPAN>
    .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/programm..._style2/3.html clarified for me -- as used in navigation tool tip at http://www.auntnini.com.
    Last edited by auntnini; 03-15-2007 at 12:51 AM.

  5. #5
    Join Date
    Mar 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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




    <p> <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
    <span>
    <img src="img/test2.gif">
    </span>
    </a>
    </p>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •