Jump to content

Mouse Overs

Changing atributes of the table

Page 1 of 1
  • You cannot start a new topic
  • This topic is locked

Mouse Overs Changing atributes of the table Rate Topic: -----

#1 User is offline   BigMike Sidelka 

  • W.R. Sergeant
  • Group: Members
  • Posts: 241
  • Joined: 31-July 06
  • Gender:Male
  • Location:C-Town, Ohio

Posted 31 July 2006 - 08:47 PM

Well, Im trying to widen my view of HTML, and trying to stop relying on Flash to do all my effects.
http://newage.phpnet.us/test.php
I was able to get the image mouse overs in the header by myself
<img src="img1" onMouseOver="src='img2'" onMouseOut="src='img1'">


Well, I was doing some other pages and hoping I could use coding like that for table.
<table width="xxx" cellpadding="0" cellspacing="0" background="img1"
onMouseOver="background='img2'" onMouseOut="background='img1'" onClick="href='link'>

Well I was sceptical about the onClick fuction, but i thought the table mouse overs might work
well to my disadvantage they didnt. You guys know a better way to do it? cuz im stuck.
0

#2 User is offline   Ben Abrams 

  • The buddy system:never fails
  • Group: Administrators
  • Posts: 1,850
  • Joined: 04-April 06
  • Gender:Male

Posted 31 July 2006 - 08:58 PM

View PostNewAge.Mike, on Aug 1 2006, 02:47 AM, said:

Well, Im trying to widen my view of HTML, and trying to stop relying on Flash to do all my effects.
http://newage.phpnet.us/test.php
I was able to get the image mouse overs in the header by myself
<img src="img1" onMouseOver="src='img2'" onMouseOut="src='img1'">


Well, I was doing some other pages and hoping I could use coding like that for table.
<table width="xxx" cellpadding="0" cellspacing="0" background="img1"
onMouseOver="background='img2'" onMouseOut="background='img1'" onClick="href='link'>

Well I was sceptical about the onClick fuction, but i thought the table mouse overs might work
well to my disadvantage they didnt. You guys know a better way to do it? cuz im stuck.



a good way to do it would be to use css....

lets say were using a normal link:

<a href="#">this is a normal link </a>


were going to make it have a box, a blue background and black text. dead easy in css:

a:link,
a:active,
a:visited{
	border:1px solid #000;
	background-color:#0000FF;
	padding:3px;
	color:#000000;
}


now when we mouse over (a:hover, a being <a> for a link, hover being the state of the link. so link, hover) we make a new bg color:

a:hover{
	border:1px solid #000;
	background-color:#FF00CC;
	padding:3px;
	color:#000000;
}


have a play, this css is very powerful (this was only basic) and you can do this with images aswell (background-image)

[full html]

<html>
<head>
<style>
<!--
a:link,
a:active,
a:visited{
	border:1px solid #000;
	background-color:#0000FF;
	padding:3px;
	color:#000000;
}
a:hover{
	border:1px solid #000;
	background-color:#FF00CC;
	padding:3px;
	color:#000000;
}

-->
</style>
<title>
</head>

<body>
<a href="#">this is a normal link 
</body>
</html>


[edit]
its better then using tables and javascript, as javascript can be turned off in a users broswer.

View PostSirkent, on 21 September 2007 - 04:26 AM, said:

<monty python high-pitched female voice>I DON'T LIKE SPAM!</monty python high-pitched female voice>
0

#3 User is offline   BigMike Sidelka 

  • W.R. Sergeant
  • Group: Members
  • Posts: 241
  • Joined: 31-July 06
  • Gender:Male
  • Location:C-Town, Ohio

Posted 31 July 2006 - 09:06 PM

I know about CSS, but my idea was in the "Downloads" section
each downloadable is a different table with the information
my visual was to hover over the whol table and be able to link to the download

i geuss i wont be able to do it like that
0

#4 User is offline   sypher 

  • the owner3r
  • Group: Administrators
  • Posts: 1,578
  • Joined: 04-April 06
  • Location:North Wales, UK
  • Interests:Art, Boxing, MMA, Graphic Design, Web Design etc. ;)

Posted 31 July 2006 - 09:10 PM

You mean make the whole cell background change colour on rollover?
sypher design - North Wales Web Design | Latest Work: - Scala Cinema

CSS - Can't See Sh*t
0

#5 User is offline   BigMike Sidelka 

  • W.R. Sergeant
  • Group: Members
  • Posts: 241
  • Joined: 31-July 06
  • Gender:Male
  • Location:C-Town, Ohio

Posted 31 July 2006 - 09:14 PM

View Postsypher, on Jul 31 2006, 10:10 PM, said:

You mean make the whole cell background change colour on rollover?

yes, exactly.
0

#6 User is offline   Ben Abrams 

  • The buddy system:never fails
  • Group: Administrators
  • Posts: 1,850
  • Joined: 04-April 06
  • Gender:Male

Posted 31 July 2006 - 09:18 PM

View PostNewAge.Mike, on Aug 1 2006, 03:06 AM, said:

I know about CSS, but my idea was in the "Downloads" section
each downloadable is a different table with the information
my visual was to hover over the whol table and be able to link to the download

i geuss i wont be able to do it like that

<td bgcolor="#C7ECFD" onMouseOver="this.style.background='#95D3EF';" onMouseOut="this.style.background='#C7ECFD';">text</td>


OR:

<style type="text/css">

td.off {
background: #000;
}

td.on{
background: #fff;
}

</style>

and for the table...

<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">test<td>

It can also be used on table rows aswell

View PostSirkent, on 21 September 2007 - 04:26 AM, said:

<monty python high-pitched female voice>I DON'T LIKE SPAM!</monty python high-pitched female voice>
0

#7 User is offline   BigMike Sidelka 

  • W.R. Sergeant
  • Group: Members
  • Posts: 241
  • Joined: 31-July 06
  • Gender:Male
  • Location:C-Town, Ohio

Posted 31 July 2006 - 09:30 PM

View Postbenbramz, on Jul 31 2006, 10:18 PM, said:

<td bgcolor="#C7ECFD" onMouseOver="this.style.background='#95D3EF';" onMouseOut="this.style.background='#C7ECFD';">text</td>
OR:

<style type="text/css">

td.off {
background: #000;
}

td.on{
background: #fff;
}

</style>

and for the table...

<td class="off" onmouseover="this.classname='on'" onmouseout="this.classname='off'">test<td>

It can also be used on table rows aswell

what about the whole table...
http://newage.phpnet.us/downloads.php

see how firefox and opera are seperate tabels
lets say it like this, i hover over the firfox table
and i get this background
and when i click it goes to getfirefox.com
0

#8 User is offline   Ben Abrams 

  • The buddy system:never fails
  • Group: Administrators
  • Posts: 1,850
  • Joined: 04-April 06
  • Gender:Male

Posted 31 July 2006 - 09:58 PM

you cant apply bg images to <tables>

we could show you how to do this in css, but you just want table solution right?

make it a TD and use the examples posted above, you should not go too far wrong ;)

View PostSirkent, on 21 September 2007 - 04:26 AM, said:

<monty python high-pitched female voice>I DON'T LIKE SPAM!</monty python high-pitched female voice>
0

#9 User is offline   sypher 

  • the owner3r
  • Group: Administrators
  • Posts: 1,578
  • Joined: 04-April 06
  • Location:North Wales, UK
  • Interests:Art, Boxing, MMA, Graphic Design, Web Design etc. ;)

Posted 31 July 2006 - 10:00 PM

The corners etc are images, so you would need to use a whole different set of images to do this. It would be easier just to create a larger image with normal rollover effect on it.

Take a look at my example (Use it if you wish)

Attached File  firefox_image.jpg (7.54K)
Number of downloads: 41
sypher design - North Wales Web Design | Latest Work: - Scala Cinema

CSS - Can't See Sh*t
0

#10 User is offline   Ben Abrams 

  • The buddy system:never fails
  • Group: Administrators
  • Posts: 1,850
  • Joined: 04-April 06
  • Gender:Male

Posted 31 July 2006 - 10:02 PM

View Postsypher, on Aug 1 2006, 04:00 AM, said:

The corners etc are images, so you would need to use a whole different set of images to do this. It would be easier just to create a larger image with normal rollover effect on it.

Take a look at my example (Use it if you wish)

(cant belive i didnt think of that....allways for the complex route....) lol

View PostSirkent, on 21 September 2007 - 04:26 AM, said:

<monty python high-pitched female voice>I DON'T LIKE SPAM!</monty python high-pitched female voice>
0

#11 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Posted 31 July 2006 - 10:05 PM

View Postbenbramz, on Jul 31 2006, 11:02 PM, said:

(cant belive i didnt think of that....allways for the complex route....) lol

I had an intense method of using purely CSS brewing in my head, but I'm tired at the moment. :lol:
0

#12 User is offline   sypher 

  • the owner3r
  • Group: Administrators
  • Posts: 1,578
  • Joined: 04-April 06
  • Location:North Wales, UK
  • Interests:Art, Boxing, MMA, Graphic Design, Web Design etc. ;)

Posted 31 July 2006 - 10:10 PM

Hehe yeh i was thinking along the lines of using DOM to change the css values but i thought why? When we can just do it with one image :P
sypher design - North Wales Web Design | Latest Work: - Scala Cinema

CSS - Can't See Sh*t
0

#13 User is offline   BigMike Sidelka 

  • W.R. Sergeant
  • Group: Members
  • Posts: 241
  • Joined: 31-July 06
  • Gender:Male
  • Location:C-Town, Ohio

Posted 31 July 2006 - 10:16 PM

View Postsypher, on Jul 31 2006, 11:10 PM, said:

Hehe yeh i was thinking along the lines of using DOM to change the css values but i thought why? When we can just do it with one image :P

I thought about using an image, but i thought it be unprofessional.
ok, I geuss Ill do it. thanks guys :lol:
0

#14 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Posted 31 July 2006 - 10:18 PM

View PostNewAge.Mike, on Jul 31 2006, 11:16 PM, said:

I thought about using an image, but i thought it be unprofessional.
ok, I geuss Ill do it. thanks guys :lol:

To be honest, because you deserve to know all we can teach, using an image isn't unprofessional. In fact, it's quite common.

Are there better ways? Yes. But I'd feel safe thinking that you're not ready for them yet.
0

#15 User is offline   sypher 

  • the owner3r
  • Group: Administrators
  • Posts: 1,578
  • Joined: 04-April 06
  • Location:North Wales, UK
  • Interests:Art, Boxing, MMA, Graphic Design, Web Design etc. ;)

Posted 31 July 2006 - 10:18 PM

There would be ways of doing it but its not really a key feature on your site. So it would use up so much time and effort and processing power that it just aint worth it :P

If you want the opera one too let me know.
sypher design - North Wales Web Design | Latest Work: - Scala Cinema

CSS - Can't See Sh*t
0

#16 User is offline   BigMike Sidelka 

  • W.R. Sergeant
  • Group: Members
  • Posts: 241
  • Joined: 31-July 06
  • Gender:Male
  • Location:C-Town, Ohio

Posted 31 July 2006 - 10:21 PM

View Postsypher, on Jul 31 2006, 11:18 PM, said:

There would be ways of doing it but its not really a key feature on your site. So it would use up so much time and effort and processing power that it just aint worth it :P

If you want the opera one too let me know.

Well now that i know im using Images, i think i handle it. thanks =)
0

#17 User is offline   sypher 

  • the owner3r
  • Group: Administrators
  • Posts: 1,578
  • Joined: 04-April 06
  • Location:North Wales, UK
  • Interests:Art, Boxing, MMA, Graphic Design, Web Design etc. ;)

Posted 31 July 2006 - 10:28 PM

No problem :)
sypher design - North Wales Web Design | Latest Work: - Scala Cinema

CSS - Can't See Sh*t
0

#18 User is offline   marcamos 

  • W.R. General
  • Group: Administrators
  • Posts: 2,849
  • Joined: 04-April 06
  • Gender:Male
  • Location:Massachusetts - USA

Posted 31 July 2006 - 10:30 PM

Best of luck Mike, we're always be here to help.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • This topic is locked

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users