Results 1 to 5 of 5

Thread: Image Thumbnail Viewer - unwanted border around thumbnail images

  1. #1
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image Thumbnail Viewer - unwanted border around thumbnail images

    1) Script Title: Image Thumbnail Viewer

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    3) Describe problem:
    I am currently experimenting with this (excellent) script, and have managed to make a few minor changes to the css & javascript files with regard to border styles/fonts/titles etc without trashing the script. BUT, using Firefox as my browser I get a black border around each thumbnail image, which changes to grey on mouseover. I don't mind this too much (it's my default link style, so I suspect it's somehow related), but when I try it with IE7, the borders change to static (no change on mouseover) purple & blue. I figured if I could get rid of the border entirely this would resolve the problem, but haven't been able to identify the right section of code.

    The borders don't appear on your demo - so I may be stuck with it ?

    I don't think I can give you a link as my page isn't published anywhere, so here's the modified css:

    #thumbBox{ /*Outermost DIV for thumbnail viewer*/
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    padding: 3px;
    padding-bottom: 0;
    background: #FFFFDD;
    visibility: hidden;
    z-index: 10;
    cursor: hand;
    cursor: pointer;
    }

    #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
    font: bold 13px Verdana;
    letter-spacing: 1px;
    line-height: 1.1em;
    color: #000000;
    padding: 3px 0;
    text-align: center;
    }


    #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
    background-color: #FFFFDD;
    }

    #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
    position: absolute;
    visibility: hidden;
    border: 1px solid black;
    background-color: #FFFFDD;
    padding: 3px;
    z-index: 5;
    }

    The only change I've made to the javascipt is to change the text displayed to close the window.

    Here's the relevant section from my page:

    <td><a href="Images/km_breakthrough_lg.jpg" "" rel="thumbnail" title="<center>Breakthrough<br />Dimensions<br />Price</center>"><img src="Images/km_breakthrough_tb.jpg" /></a></td>
    <td><a href="Images/km_es_lg.jpg" "" rel="thumbnail" title="<center>Estuary Sands<br />Dimensions<br />Price</center>"><img src="Images/km_es_tb.jpg" /></a></td>
    <td><a href="Images/km_es2_lg.jpg" "" rel="thumbnail" title="<center>Estuary Sands 2<br />Dimensions<br />Price</center>"><img src="Images/km_es2_tb.jpg" /></a></td>
    <td><a href="Images/km_church_lg.jpg" "" rel="thumbnail" title="<center>Church<br />Dimensions<br />Price</center>
    " ><img src="Images/km_church_tb.jpg" /></a></td>

    Thanks in advance...

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I don't think it's the changes you made. It's your other styles. Try giving the thumbnails no border

    <img src="Images/km_church_tb.jpg" style="border:0;">

    Or give them a class and set the border to 0 for that class in your css

  3. #3
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up All fixed

    Brilliant - I've added your border=0 suggestion and it works a treat - fortunately for me as I don't know how to do the css class stuff - I'm still very much a beginner & extremely daunted by it all!!

    Many thanks for the swift response.

  4. #4
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    To add a class for your link, you would just add a class with the name of your choice (let's say "noborder"):

    <img src="Images/km_church_tb.jpg" class="noborder"/>

    Then in your style sheet, you would say what you want anything with that class to do (in this case, not have a border):

    <style>
    .noborder {border:0}
    </style>

    If you want a good tutorial of css, try http://www.w3schools.com/css/css_intro.asp

  5. #5
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Much appreciated Veronica

    As you may have guessed I'm a bit of a technophobe, and am currently still getting to grips with basic html. I've so much to learn that it's all a bit scary, so thank you for the tip !

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
  •