Results 1 to 3 of 3

Thread: A CSS gallery using 'focus' and a small problem

  1. #1
    Join Date
    Apr 2008

    A CSS gallery using 'focus' and a small problem

    I need to create a page that has a main image and loads of thumbnails underneath. When you click a thumbnail, the main image needs to update (preferably without refreshing the page).

    I've nearly cracked it using a CSS method I've got off the web. Here's the latest page:


    It's nearly there, but I'm trying to stop the main picture resetting when a user clicks anywhere else on the page, so when the 'focus' leaves one of the thumbnails.

    Can anyone help me stop this happening please?

    Many thanks,


  2. #2
    Join Date
    Sep 2006
    new york
    I don't know if this would affect what's happening when you click the blank space after the last thumbnail, but it looks like and extra </div>

    <div id="productdesc">
      <p>A visually ....</p>
    <div id="mainimage"><img src="gallery/hamp1.jpg" width="693" height="520"/></div>
    <div class="gallerycontainer">
       <p><a class="thumbnail" href="#thumb" tabindex="1"><img src="gallery/hamp1thumb.jpg" width="100" height="75" border="0" /><span><img src="gallery/hamp1.jpg" /></span></a>
          <a class="thumbnail" href="#thumb" tabindex="1"><img src="gallery/hamp2thumb.jpg" width="100" height="75" border="0" /><span><img src="gallery/hamp2.jpg" /></span></a>
          <a class="thumbnail" href="#thumb" tabindex="1"><img src="gallery/hamp3thumb.jpg" width="100" height="75" border="0" /><span><img src="gallery/hamp3.jpg" /></span></a> 
          <a class="thumbnail" href="#thumb" tabindex="1"><img src="gallery/hamp4thumb.jpg" width="100" height="74" border="0" /><span><img src="gallery/hamp4.jpg" /></span></a>
          <br />
    <br clear="all" />
    What puzzles me is tabindex="1" applied to each thumbnail. I would have thought they should have successive numbers for tabbing to work.

    You are not "updating" the big images; you are changing the source of the big image. I use a much simpler rollover
    at http://www.josephdenaro.com/heads/index.html and http://www.auntnini.com/sketch/index.html to change source of big image name="holder" id="holder"

    <div id="space"><img src="images/naomiProm01.jpg"  name="holder" id="holder"  alt="holder"> 
    <p>&nbsp; </p>
        <div id="thumbnails"> 
          <img name="Naomi"  src="images/naomiProm01.jpg"
         onClick="document.holder.src='images/naomiProm2n.gif'"  	onMouseOver="document.holder.src='images/naomiProm01.jpg'"    alt="Naomi first prom" title="Naomi first prom"> 
                 <img name="aviaHat"  src="images/aviaHat.jpg"
         onClick="document.holder.src='images/aviaHat.gif'"  	onMouseOver="document.holder.src='images/aviaHat.jpg'"
         alt="aviaHat" title="aviaHat"> 
    ... </div>
    Last edited by auntnini; 04-11-2013 at 05:46 PM. Reason: correct link

  3. #3
    Join Date
    Apr 2008
    Fabulous! Thanks very much for this! I'm going to change it to use your very slick method!

    All the best,


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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