Preserved Topic: Table Cell Mouse Effect

What I want to do is have when the curson hovers over the cell it glows... I know there's a javascripts able to do that but the java script is only able to do solid colors... I have a special design on the cell and when the mouse hovers over I just want the design to be brighter... I don't want to use hover image cause it'll take up a lot of space...

::K::A::R::N::

So, you don't want a solid color, and you don't want to use an image either, correct?

The only way I have seen to achieve that is with a Java Applet....and in my opinion you'd be better off just using an image swap.

You can see an example of the java applet here: http://www.vbecstasy.com



[This message has been edited by DL-44 (edited 05-06-2001).]

Hummm... Well, I'm fairly certain that the only way you could do that would be to use IE's Lighting function. But I don't even know if they also decided to continue this feature theough into IE 5. It was in IE4 though. And of coures, it wouldn't work in any other browser. Further more, I can't remember how to do it so you'd have to search the net for it. Otherwise you'll have to use Images, which I would recomend, Just make sure your images aren't too big and optmise them correctly.

Oh yeah a Java app would work, nice one DL, that one slipped my mind. Although I really don't like Java apps either, I'd still recomend the Image Swap path.

How about manipulating the opacity to get the effect, like Mr. Max's script over in the sig forum does?

Just use an image. It's easier, supported by all browsers, and really won't take up that much space unless it's a *huge* table cell.

hmm, i think this will do it, but it only works in IE...

<SCRIPT language=javascript>
<!--
function mover(cell)
{
if (!cell.contains(event.fromElement))
{
cell.style.cursor = 'hand';
cell.bgColor = '#003366';
}
}
function mout(cell)
{
if (!cell.contains(event.toElement))
{
cell.style.cursor = 'default';
cell.bgColor = '#000000';
}
}
function mclick(cell)
{
if(event.srcElement.tagName=='TD')
{
cell.children.tags('A')[0].click();
}
}

//-->
</SCRIPT>


<td onmouseover="mover(this)" onmouseout="mout(this)" bgColor="#000000">content</td>

I don't want to use image because I'll be having a lot of these cells and if I use image I'll have to make a lot of them... the opacity idea seems to work, I'll look into it, if I new where the script was. U-neek that was the script I was using.. it can only set solid colors and not change the background.

::K::A::R::N::

Karn:
I'm not really sure what your asking. Could you be more specific by posting a link to the site with what your trying to do this effect? What do you mean by glow? Are you just trying to illuminate the cell a bit more then it already is? Are you trying to add a glow around the actual cell? Be more specific.


.sig by Weadah.

sorry I should of posted the link earlier...here... http://www.techgnome.barrysworld.net The cells on the left is what I want to glow when hover over... but not a solid color...

::K::A::R::N::


{{edit - just taking the extra 'w' out of the URL}}

[This message has been edited by DL-44 (edited 05-07-2001).]

i would use the image swap, but you need a little help with your pictures. your table-secondary.jpg is only 9 colors. because it is a jpeg it's taking up 360 bytes! it is only 184 bytes if you use a gif. you only really need jpg's when you use a lot of colors like a photo.

I see... but even If I use an image swap won't I have to do the image thing for all my buttons which I'm gonna have a lot of them?

::K::A::R::N::

do you mean do you need to write onmouseover="doStuff" and onmouseout="doMoreStuff" for every cell? i think you can say <td class="button"> then write a script that will change and cell that is the class "button".

Okay. Here are a couple of solutions:

1) Make each td contain the same background image (right now, each TD is slightly different - adjust the size of the grid so that each TD can be identical). That way, you have one small image that is repeated in each TD.
Then, make another image that is your 'highlighted' grid image. That way, although there may be 10 links...each one uses the same image file. Your whole link section would use like 1-2kb worth of images...and that's about as small as you could hope for.

2) keep your TD's the way they are.

make a gif the same size as the TD's. Make it a checkered pattern - one pixel on, one pixel off. Make the 'on'; pixels either white, or grey, or whatever color would be appropriate for your highlight. Make the 'off' pixels transparent so the original backgroud of the TD shows through. Again, each link would use this same image onMouseover...using just a few bytes......even smaller

DL-44 the fiirst one seems good here is something... the script I used before...

<SCRIPT language=javascript>
<!--
function mover(cell)
{
if (!cell.contains(event.fromElement))
{
cell.style.cursor = 'hand';
cell.bgColor = '#003366';
}
}
function mout(cell)
{
if (!cell.contains(event.toElement))
{
cell.style.cursor = 'default';
cell.bgColor = '#000000';
}
}
function mclick(cell)
{
if(event.srcElement.tagName=='TD')
{
cell.children.tags('A')[0].click();
}
}

//-->
</SCRIPT>

is great... except is there a way to set instead of the color code have a .jpg replace it

<td onmouseover="mover(this)" onmouseout="mout(this)" bgColor="#000000">content</td>

so when the mouse hovers over the background of the cell would change picture instead mixing in the idea of DL-44

::K::A::R::N::

Check out a thread at http://www.gurusnetwork.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topic&f=1&t=000099

We've been talking about something like this.

Pat Richard
A pixel is worth a thousand words.
http://www.gurusnetwork.com
ICQ 23113317

Thanx that is exactly what I needed.

::K::A::R::N::

Check out the left side navigation at http://office.microsoft.com/. They're doing something very similar to put the border around the cells. Hope this helps as well. I was looking for a solution just like this for the longest time, and Microsoft's site had a perfect example that I reverse-engineered.

Pat Richard
A pixel is worth a thousand words.
http://www.gurusnetwork.com
ICQ 23113317

Also, check out http://development.runningwolf.com/development/code/border_test.htm

I tossed this online to show the various ways you can use CSS to achieve the desired effect. Hope this helps as well.

Pat Richard
A pixel is worth a thousand words.
http://www.gurusnetwork.com
ICQ 23113317

Thanx... I've got it working and it's great...

::K::A::R::N::