any ideas for this css table cell rollover?

Hi

check out http://skopitz.com/photos/index.php?spgmGal=Ecuador&spgmFilters=

I would like the entire background to change color when I rollover the
cell, but when I set "display: block" for the link, it aligns with the
top of the cell rather than staying in the middle. Any ideas?

Misha

Misha wrote:

Hi

check out http://skopitz.com/photos/index.php?spgmGal=Ecuador&spgmFilters=

I would like the entire background to change color when I rollover the
cell, but when I set "display: block" for the link, it aligns with the
top of the cell rather than staying in the middle. Any ideas?

Misha

To change color on a cell onmouseover is no problems:
<td onMouseOver="this.style.backgroundColor='#CC0000'"
onMouseOut="this.style.backgroundColor='#000000'" >
The problem is that the entire cell won't be clickable. But if you
combine this with the block for the a-link, you might be able to achieve
something useful.
Regarding the issue with the link going topside when adding block, try
e.g. vertical align middle or test various line heights.

--
Dan Vendel - *GOF*
"Eagles may soar, free and proud, but weasels never get sucked into jet
engines."
Contact: http://www.proformica.com/contact.shtml
Call or chat me via Skype ID: danvendel, but DON'T ask questions that
you can ask here! (get Skype at http://skype.com)

Well the display: block actually works to get the entire cell clickable
also. Vertical-align middle doesn't work. Actually, I could use line
height or padding to get the cell clickable, however the height of the
content of the cell changes.

Any other ideas?

I'd prefer to keep it css rather than javascript also.

Dan Vendel *GOF* wrote:

Misha wrote:

Hi

check out
http://skopitz.com/photos/index.php?spgmGal=Ecuador&spgmFilters=

I would like the entire background to change color when I rollover the
cell, but when I set "display: block" for the link, it aligns with the
top of the cell rather than staying in the middle. Any ideas?

Misha


To change color on a cell onmouseover is no problems:
td onMouseOver="this.style.backgroundColor='#CC0000'"
onMouseOut="this.style.backgroundColor='#000000'"
The problem is that the entire cell won't be clickable. But if you
combine this with the block for the a-link, you might be able to achieve
something useful.
Regarding the issue with the link going topside when adding block, try
e.g. vertical align middle or test various line heights.

Hope you dont mine me saying.

nice site but I find it can be very slow, some of the bigger pics that
result from the thumbnails seems to be kinda big.

twocan's





"Misha" <no (AT) no (DOT) com> wrote

Hi

check out http://skopitz.com/photos/index.php?spgmGal=Ecuador&spgmFilters=

I would like the entire background to change color when I rollover the
cell, but when I set "display: block" for the link, it aligns with the top
of the cell rather than staying in the middle. Any ideas?

Misha

No, thanks. Yeah the larger pictures are high quality (100k or so).
They are a little large, but not bad for high speed internet. The site
is very slow now for some reason (only 10kb/s or so).

twocan's wrote:

Hope you dont mine me saying.

nice site but I find it can be very slow, some of the bigger pics that
result from the thumbnails seems to be kinda big.

twocan's





"Misha" <no (AT) no (DOT) com> wrote in message
news:cnngc6$lqi$2 (AT) forums (DOT) macromedia.com...

Hi

check out http://skopitz.com/photos/index.php?spgmGal=Ecuador&spgmFilters=

I would like the entire background to change color when I rollover the
cell, but when I set "display: block" for the link, it aligns with the top
of the cell rather than staying in the middle. Any ideas?

Misha

Hi Misha, Sorry if I'm a bit slow, just want to understand exactly what
you're looking for. Do you want the entire cell to be the link with the
background changing color on hover instead of the photo being the link with the
border change on hover? Take care, Tim

Good question. I think I would like the cell to be the link (as that
would make more conceptual sense), but the php program I'm using has the
image as the link. I would like the entire cell background to rollover.
The only way I can get close to it is by using "display: block;" for
the "td.class a:link".

Thanks,
Misha

TC2112 wrote:

Hi Misha, Sorry if I'm a bit slow, just want to understand exactly what
you're looking for. Do you want the entire cell to be the link with the
background changing color on hover instead of the photo being the link with the
border change on hover? Take care, Tim

Hi Misha,

I played around with it for a while, and the only way I could get the cell
to be clickable and have the image as the link and centered vertically was
by adding top and bottom margins to an img style (easy fix if they are all
the same height, way to much work if they are all different). I was also
able to get the effect by using the image as a background, but of course the
image isn't the link in that one.
Neither one looks like a good solution if your php is using the image as the
link.

I read what you said about not wanting to use JS, but the only way I could
figure out how to do it was to use a little JS . At least it gets rid of the
need for all the link styles.
Here's a link to an example (I just used some images from the site you're
working on): http://www.tnsgraphics.com/clinktests/jscsstest.htm

I saved the page I used to test a bunch of other ideas if you want to look
at it. There's a few examples of other attempts. There are two solutions
that work perfect in FF and NN, but not in IE. Figures.
Maybe it will help. http://www.tnsgraphics.com/clinktests/

Good luck,
Tim



"Misha" <no (AT) no (DOT) com> wrote

Good question. I think I would like the cell to be the link (as that
would make more conceptual sense), but the php program I'm using has the
image as the link. I would like the entire cell background to rollover.
The only way I can get close to it is by using "display: block;" for the
"td.class a:link".

Thanks,
Misha

TC2112 wrote:

Hi Misha, Sorry if I'm a bit slow, just want to understand exactly what
you're looking for. Do you want the entire cell to be the link with the
background changing color on hover instead of the photo being the link
with the border change on hover? Take care, Tim

Thank you so much Tim. I hope I can return the favor of extensive
research sometime. The other thing that works (but only for good
browsers) is simply td.class:hover with the line-height: 180px;.

I think the solution is the javascript. There is this other method that
might work that also uses javascript

http://www.xs4all.nl/~peterned/csshover.html

However it has a sp2 problem. So that one is not viable yet.

Misha



Tim wrote:

Hi Misha,

I played around with it for a while, and the only way I could get the cell
to be clickable and have the image as the link and centered vertically was
by adding top and bottom margins to an img style (easy fix if they are all
the same height, way to much work if they are all different). I was also
able to get the effect by using the image as a background, but of course the
image isn't the link in that one.
Neither one looks like a good solution if your php is using the image as the
link.

I read what you said about not wanting to use JS, but the only way I could
figure out how to do it was to use a little JS . At least it gets rid of the
need for all the link styles.
Here's a link to an example (I just used some images from the site you're
working on): http://www.tnsgraphics.com/clinktests/jscsstest.htm

I saved the page I used to test a bunch of other ideas if you want to look
at it. There's a few examples of other attempts. There are two solutions
that work perfect in FF and NN, but not in IE. Figures.
Maybe it will help. http://www.tnsgraphics.com/clinktests/

Good luck,
Tim



"Misha" <no (AT) no (DOT) com> wrote in message
news:cnpd41$8m9$1 (AT) forums (DOT) macromedia.com...

Good question. I think I would like the cell to be the link (as that
would make more conceptual sense), but the php program I'm using has the
image as the link. I would like the entire cell background to rollover.
The only way I can get close to it is by using "display: block;" for the
"td.class a:link".

Thanks,
Misha

TC2112 wrote:


Hi Misha, Sorry if I'm a bit slow, just want to understand exactly what
you're looking for. Do you want the entire cell to be the link with the
background changing color on hover instead of the photo being the link
with the border change on hover? Take care, Tim

You're welcome, I enjoy trying to work out problems. A good way to learn
more myself.

Thanks for the link. Cool info there.

Take care,
Tim
"Misha" <no (AT) no (DOT) com> wrote

Thank you so much Tim. I hope I can return the favor of extensive
research sometime. The other thing that works (but only for good
browsers) is simply td.class:hover with the line-height: 180px;.

I think the solution is the javascript. There is this other method that
might work that also uses javascript

http://www.xs4all.nl/~peterned/csshover.html

However it has a sp2 problem. So that one is not viable yet.

Misha



Tim wrote:
Hi Misha,

I played around with it for a while, and the only way I could get the
cell to be clickable and have the image as the link and centered
vertically was by adding top and bottom margins to an img style (easy fix
if they are all the same height, way to much work if they are all
different). I was also able to get the effect by using the image as a
background, but of course the image isn't the link in that one.
Neither one looks like a good solution if your php is using the image as
the link.

I read what you said about not wanting to use JS, but the only way I
could figure out how to do it was to use a little JS . At least it gets
rid of the need for all the link styles.
Here's a link to an example (I just used some images from the site
you're working on): http://www.tnsgraphics.com/clinktests/jscsstest.htm

I saved the page I used to test a bunch of other ideas if you want to
look at it. There's a few examples of other attempts. There are two
solutions that work perfect in FF and NN, but not in IE. Figures.
Maybe it will help. http://www.tnsgraphics.com/clinktests/

Good luck,
Tim



"Misha" <no (AT) no (DOT) com> wrote in message
news:cnpd41$8m9$1 (AT) forums (DOT) macromedia.com...

Good question. I think I would like the cell to be the link (as that
would make more conceptual sense), but the php program I'm using has the
image as the link. I would like the entire cell background to rollover.
The only way I can get close to it is by using "display: block;" for the
"td.class a:link".

Thanks,
Misha

TC2112 wrote:


Hi Misha, Sorry if I'm a bit slow, just want to understand exactly
what you're looking for. Do you want the entire cell to be the link
with the background changing color on hover instead of the photo being
the link with the border change on hover? Take care, Tim