Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Mouseover on cells

    Has anyone come across a way, that when you mouseover a certain cell in a table, that an image will display in the center of the screen please ? (just using css and nothing to do with js).

    Any help much appreciated.

    Saz.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    without any js IE6 isn't going to like a plain old hover on a td but you can fake it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    body {
    margin: 0;
    padding: 0;
    }
    
    table {
    border: 1px solid #dd3;
    }
    
    a {
    display: block;
    width: 100px;
    height: 100px;
    background: #dfe;
    overflow: hidden;
    }
    a img {
    border: 2px solid #000;
    visibility: hidden;
    }
    
    a:hover {
    overflow: visible;
    }
    
    a:hover img {
    position: absolute;
    left: 50%;
    margin-left: -200px; /* half img width */
    top: 50%;
    margin-top: -150px; /* half img height */
    visibility: visible;
    }
    </style>
    </head>
    <body>
    <table><tr><td><a href="#x"><img src="dots.jpg" width="400" height="300" /></a></td></tr></table>
    </body>
    </html>
    the absolute centering is dependent on the images size. in this case 400x300. if they are different sizes than you can add a class to them and target each one specifically.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • The Following 2 Users Say Thank You to harbingerOTV For This Useful Post:

    effpeetee (05-24-2008), Saz (05-24-2008)

  • #3
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Thumbs up

    Many thanks harbingerOTV - very much appreciated.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Saz, Try this to see if it helps at all.

    http://exitfegs.co.uk/steve.html

    Frank

    harbingerOTV - That's very useful. I'll add it to my store if you don't mind.

    If I can find a way, I would like to use the code to take the place of the program above. I can't see how to accomodate the many pictures though. But I'll have a go. If you have any ideas. I'd love to know.

    Frank

    Frank
    Last edited by effpeetee; 05-24-2008 at 10:34 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    That's very clever Frank - well done

    One thing you might want to think about, is that it's very difficult to see all of the larger image and still see the thumbnails to hover over

    Good though - was there any js involved ?

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Here is the code. Positioning is easy. Remarks are in the code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
       
    <html>
    <head>
    <base href="http://exitfegs.co.uk/steve.html">
    
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .gallerycontainer{
    position: relative;
    height:1000px
    
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
    
    .thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    }
    
    div#thumbnails {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    }
    
    .thumbnail:hover img{
    border: 1px solid blue;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color:grey;
    padding-right:auto
    padding-left:auto
    top:1150px
    border: 1px dashed gray;
    left:-2000px;
    color: black;
    text-decoration: none;
    text-align:center;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image*/
    top: 140px;
    left: 110px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
    
    body {background-color: #bbbbbb</style>
    
    <title>Enter_Title_Here</title>
    </head>
    <body>
    
    
    
    
    <A href="index.html"><IMG style="Z-INDEX: 100; LEFT: 10px; POSITION: absolute; TOP: 0px" height=22 alt="Home page." src="arrow013.gif" width=52 ></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="101.jpg" width=66 ><span> Leogach - Loch Torridon.<IMG height=600 alt="Use F11" src ="101.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="img090.jpg" width=66 ><span> The Cuillins - a tempestuous day (taken by Steven).<IMG height=600 alt="Use F11" src ="img090.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="112.jpg" width=66 ><span> Mr Keogh and Steven at John's wedding.<IMG height=600 alt="Use F11" src ="112.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt="" src="85.jpg" width=66  ><span> Steven relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2006.<IMG height=600   alt="Use F11" src ="85.jpg" width=800  ></span></A>
    <A class=thumbnail href="#thumb"><IMG height=44  alt="" src="92.jpg" width=66  ><span> Steven during a day trip to Eastbourne - summer 2006.<IMG height=600  alt="Use F11" src ="92.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44  alt="" src="89.jpg" width=66  ><span> Steven, a few years ago. In the Peak District.<IMG height=600 alt="Use F11" src ="89.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44   alt="" src="69.jpg" width=66  ><span> Steven enjoying the great outdoors,<IMG height=600 alt="Use F11" src ="69.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44  alt="" src="110.jpg" width=66  ><span> The one above sees all!<IMG height=600  alt="Use F11" src ="110.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=66  alt="" src="steve-01.jpg" width=52  ><span> Steven as a lad.<br><IMG  height=800 alt="Use F11" src="steve-01.jpg" width=600  ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="SteveandPhil.jpg" width=66  ><span> Steven and Philip.<IMG height=600 alt="Use F11" src ="SteveandPhil.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="steve-02.jpg" width=66  ><span> A young Steven.<IMG height=600  alt="Use F11" src ="steve-02.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="winhs13.jpg" width=66  ><span> A quiet read - a short break after visiting Winchester Cathedral.<IMG height=600 alt="Use F11" src ="winhs13.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="Bluebell1.jpg" width=66  ><span> Steven, relaxing in one of the old First-Class carriages. On the Bluebell Line.<IMG height=600 alt="Use F11" src ="Bluebell1.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="web17.jpg" width=66  ><span> Steven, Betty and Frank. Probably in the 1960's.<IMG height=600 alt="Use F11" src ="web17.jpg" width=800  ><br></span></A> 
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st7.jpg" width=66  ><span> On a day trip to Eastbourne - spring 2006.<IMG height=600 alt="Use F11" src ="st7.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st2.jpg" width=66  ><span> Not sure where this was taken.<IMG height=600  alt="Use F11" src ="st2.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st9.jpg" width=66  ><span> Philip and Steven at John's wedding.<IMG height=600   alt="Use F11" src ="st9.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st16.jpg" width=66  ><span> Steven and Betty in Wales.<IMG height=600  alt="Use F11" src ="st16.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st17.jpg" width=66  ><span> Steven holidaying in Wales.<IMG  height=600  alt="Use F11" src ="st17.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st18.jpg" width=66  ><span> Betty and Steven many years ago.<IMG height=600  alt="Use F11" src ="st18.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st22.jpg" width=66  ><span> Steven in Hove - 2007.<IMG height=600 alt="Use F11" src ="st22.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st25.jpg" width=66  ><span> Betty, Mum and Steven. On holiday in Wales.<IMG height=600 alt="Use F11" src ="st25.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st26.jpg" width=66  ><span> Hi!, We're over here. Betty and Steve on a family holiday.<IMG height=600  alt="Use F11" src ="st26.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st28.jpg" width=66  ><span> Steven outside the "Saxon Arms" in Dorchester - 2007.<IMG height=600 alt="Use F11" src ="st28.jpg" width=800  ><br></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st32.jpg" width=66  ><span> Steven (and Little Ted) relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2007.<IMG height=600  alt="Use F11" src ="st32.jpg" width=800  ><br></span></A>
    <A class=thumbnail href="#thumb"><IMG height=44 alt=""  src="st39.jpg" width=66  ><span> Steven on holiday with friends.<IMG height=600  alt="Use F11" src ="st39.jpg" width=800  ><br></span></A>
    </body>
    </html>
    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    Saz (05-24-2008)

  • #7
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for that Frank, but not sure how you would position the larger image and still see all of the thumbnails ?

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    You could set you larger image to be smaller so that it might fit into a separate section of the page?

    @Frank: Have you considered optimising your thumbnails? I think they are are tad heavy and will be using excessive bandwidth.

    bazz

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by bazz View Post
    You could set you larger image to be smaller so that it might fit into a separate section of the page?

    @Frank: Have you considered optimising your thumbnails? I think they are are tad heavy and will be using excessive bandwidth.

    bazz
    Bazz, The thumbs are the full jpegs resized by the program. They are not seperate thumbnails.

    Frank

    SUSE off on Tuesday.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is a useful source.

    CSS Library Image CSS

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by effpeetee View Post
    Bazz, The thumbs are the full jpegs resized by the program. They are not seperate thumbnails.
    They should be separate but, then, I know you have just family and friends looking at it and you'll know if they are on dial-up or not.

    However, it does make for much-increased bandwidth usage.

    bazz

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by bazz View Post
    They should be separate but, then, I know you have just family and friends looking at it and you'll know if they are on dial-up or not.

    However, it does make for much-increased bandwidth usage.

    bazz
    Bazz,
    The trouble was due to a name error of the thumbs folder which was named thumbs but was called by thumb. I've put part of it right, but I still need to reduce a few images.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Has anyone found a way for the mouseover image to appear, but then disappear after say, 10 seconds ?

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Saz View Post
    Has anyone found a way for the mouseover image to appear, but then disappear after say, 10 seconds ?
    Like this?

    Limited duration hover image.


    Probably will need some development.

    Frank
    Last edited by effpeetee; 05-26-2008 at 11:50 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Thumbs up

    We're cooking on gas now Frank - that's a lot nearer to where I'm trying to get to Just wondering and still on the mouseover theme, how would that be adapted, so that if the viewer were to hold his mouse anywhere on a particular page, there would be a similar popup, it would appear for 15 seconds, then disappear, until the next 50th visit to the page from the public in general, (not the specific user).

    Saz


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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