...

View Full Version : Mouseover on cells



Saz
05-23-2008, 09:55 PM
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.

harbingerOTV
05-23-2008, 10:46 PM
without any js IE6 isn't going to like a plain old hover on a td but you can fake it.



<!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.

Saz
05-24-2008, 08:09 PM
Many thanks harbingerOTV - very much appreciated.

effpeetee
05-24-2008, 09:09 PM
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

Saz
05-24-2008, 09:47 PM
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:confused:

Good though - was there any js involved ?

effpeetee
05-24-2008, 09:59 PM
Here is the code. Positioning is easy. Remarks are in the 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

Saz
05-24-2008, 10:02 PM
Thanks for that Frank, but not sure how you would position the larger image and still see all of the thumbnails ?

bazz
05-24-2008, 10:35 PM
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

effpeetee
05-25-2008, 01:22 PM
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.

effpeetee
05-25-2008, 02:07 PM
This is a useful source.

CSS Library Image CSS (http://www.dynamicdrive.com/style/csslibrary/category/C4/)

Frank

bazz
05-25-2008, 03:19 PM
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

effpeetee
05-25-2008, 04:37 PM
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

Saz
05-26-2008, 08:15 AM
Has anyone found a way for the mouseover image to appear, but then disappear after say, 10 seconds ?

effpeetee
05-26-2008, 10:47 AM
Has anyone found a way for the mouseover image to appear, but then disappear after say, 10 seconds ?
Like this?

Limited duration hover image. (http://exitfegs.co.uk/a26.html)

Probably will need some development.

Frank

Saz
05-26-2008, 11:05 AM
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

effpeetee
05-26-2008, 12:52 PM
I can't see how you can manage that. The hover would take place immediately the mouse pointer came on. In effect, you would never see the opening page.

Anyway, I am reasonably certain that it would need Jscript to even approximate what you want. I suggest that you post over there. My javascript knowledge is conspicuous by its absence.

The program in my previous post uses Javascript to process the hover timing. Not written by me I have to confess.

Frank

bazz
05-26-2008, 01:44 PM
So, if I understand; You want a series of positions on a page, say 'a', 'b', 'c' etc.

Then when someone mouses-over 'a', they see a pop up in 10 seconds, which lasts for about 15. Then that pop-up will not show again until the 51st visitor later?

Q. Are you trying to have it so that there are 50 pop-ups for each of a,b and c which cycle through them and re-start after the 50th visitor or are you trying for something else.

Irrespective of that: if you want to show a popup based on page views, then you'll need a way of counting those views. I reckon that a server-side language eg perl or php, would be required, perhaps, in conjunction with sessions. You will also need some form of database, to record the numbers of visitors/page views, so that the script can 'know' when next to show the pop-up.

I think you might be in for an exciting learning curve - or a bit of a hit to your wallet/purse. :eek:


bazz

Saz
05-26-2008, 01:50 PM
@ Frank - thanks, I'll maybe pop over there another time.


So, if I understand; You want a series of positions on a page, say 'a', 'b', 'c' etc.

Then when someone mouses-over 'a', they see a pop up in 10 seconds, which lasts for about 15. Then that pop-up will not show again until the 51st visitor later?

Hi Bazz, Not sure what you mean by positions, sorry, but if you mean the possition on the page, the popup would show in the center of the page, about 2cms from the top.




Q. Are you trying to have it so that there are 50 pop-ups for each of a,b and c which cycle through them and re-start after the 50th visitor or are you trying for something else.

bazz

It would be exactly the same popup for all visitors.

Saz

bazz
05-26-2008, 01:57 PM
positioning the pop up will be the last and easiest bit.

If you read my last post again and substitute a b and c with your individual thumbs. presumably they will be in diffetent positions on the page. then hopefully, it make sense?

bazz

writing another post as you read this......

bazz
05-26-2008, 02:02 PM
To clarify:

when mousing over thumb1, do you want the same pop up as if I mouseover thumb 2 on the same page?

You refer to visitors and you might mean page views. so,

which is close to what you want?

1. Frank looks at your page and gets the pop up on one of the thumbs. he won't see the pop up again for 50 page views.

2. Frank looks at your page and sees the pop up on one of the thumbs. 48 other people look at your page and see no pop up. Then I look at your page (as visitor 50 - could be page view 300), and I see the pop up.

If neither of those is what you want, you need to explain again for me to be able to understand. :o

bazz

Saz
05-26-2008, 02:02 PM
positioning the pop up will be the last and easiest bit.

If you read my last post again and substitute a b and c with your individual thumbs. presumably they will be in diffetent positions on the page. then hopefully, it make sense?

bazz

writing another post as you read this......
It will be in the same position every time. :thumbsup:

Saz
05-26-2008, 02:18 PM
To clarify:

when mousing over thumb1, do you want the same pop up as if I mouseover thumb 2 on the same page?

You refer to visitors and you might mean page views. so,

which is close to what you want?

1. Frank looks at your page and gets the pop up on one of the thumbs. he won't see the pop up again for 50 page views.

2. Frank looks at your page and sees the pop up on one of the thumbs. 48 other people look at your page and see no pop up. Then I look at your page (as visitor 50 - could be page view 300), and I see the pop up.

If neither of those is what you want, you need to explain again for me to be able to understand. :o

bazz

Hi Bazz, Forget all about photos for the moment, just imagine that as soon as your mouse goes anywhere on a page of text, there will be a popup, that will appear for 15 seconds, then disappear, it will then repeat the whole exact process again, on the 50th page view, and then the 100th page view, then the 150th page view, then the 200th page view . . . . . . . .

Saz.

bazz
05-26-2008, 08:47 PM
OK, well I think you'll need to store a count of the pages so that the sciprt wil know when the 50th, 100th etc has been viewed.

That will take a server side language and either a flat file system or a MySQL db. and then, you might need JS to trigger the pop-up, though you may be able to do it with php. I had a hard day so not thinking straight just now.

bazz

Saz
05-27-2008, 07:28 AM
OK, well I think you'll need to store a count of the pages so that the sciprt wil know when the 50th, 100th etc has been viewed.

That will take a server side language and either a flat file system or a MySQL db. and then, you might need JS to trigger the pop-up, though you may be able to do it with php. I had a hard day so not thinking straight just now.

bazz

Many thanks for the input Bazz, I do appreciate it. This looks like a good helpful forum, but feel it should now be continued on another forum on this website. Which forum would be best ? Would this definitely need a database of some sorts ?

Saz.

_Aerospace_Eng_
05-27-2008, 10:31 AM
Would the page views need to be unique or would it matter if the person kept refreshing the page over and over again?

Saz
05-27-2008, 01:34 PM
Would the page views need to be unique or would it matter if the person kept refreshing the page over and over again?

The page views don't need to be unique and it wouldn't matter if the same person kept refreshing over and over



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum