Closed Thread Icon

Preserved Topic: Table Cell Mouse Effect Pages that link to <a href="https://ozoneasylum.com/backlink?for=17951" title="Pages that link to Preserved Topic: Table Cell Mouse Effect" rel="nofollow" >Preserved Topic: Table Cell Mouse Effect\

 
Author Thread
KARN
Bipolar (III) Inmate

From: North Bay, Ontario, CA
Insane since: Apr 2001

posted posted 05-06-2001 07:34

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::

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 05-06-2001 16:42

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).]

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 05-06-2001 16:43

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.

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 05-06-2001 16:45

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.

linear
Paranoid (IV) Inmate

From: other places
Insane since: Mar 2001

posted posted 05-06-2001 17:13

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



Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 05-06-2001 17:14

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.

u-neek
Bipolar (III) Inmate

From: Berlin, Germany
Insane since: Jan 2001

posted posted 05-06-2001 18:54

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>

KARN
Bipolar (III) Inmate

From: North Bay, Ontario, CA
Insane since: Apr 2001

posted posted 05-06-2001 19:09

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::

Jestah
Maniac (V) Mad Scientist

From: Long Island, NY
Insane since: Jun 2000

posted posted 05-06-2001 20:01

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.

KARN
Bipolar (III) Inmate

From: North Bay, Ontario, CA
Insane since: Apr 2001

posted posted 05-06-2001 22:42

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).]

JakeB
Paranoid (IV) Inmate

From: us
Insane since: Oct 2000

posted posted 05-06-2001 23:05

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.

KARN
Bipolar (III) Inmate

From: North Bay, Ontario, CA
Insane since: Apr 2001

posted posted 05-06-2001 23:58

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::

JakeB
Paranoid (IV) Inmate

From: us
Insane since: Oct 2000

posted posted 05-07-2001 00:15

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 05-07-2001 01:15

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



KARN
Bipolar (III) Inmate

From: North Bay, Ontario, CA
Insane since: Apr 2001

posted posted 05-07-2001 03:43

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::

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 05-07-2001 05:08

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

KARN
Bipolar (III) Inmate

From: North Bay, Ontario, CA
Insane since: Apr 2001

posted posted 05-09-2001 00:45

Thanx that is exactly what I needed.

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

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 05-09-2001 02:29

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

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted posted 05-09-2001 03:42

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

KARN
Bipolar (III) Inmate

From: North Bay, Ontario, CA
Insane since: Apr 2001

posted posted 05-10-2001 23:37

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

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

« BackwardsOnwards »

Show Forum Drop Down Menu