CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

css row colour mouseover change

Discuss css row colour mouseover change in the CSS Help forum on Dev Shed.
css row colour mouseover change Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 23rd, 2004, 11:51 AM
Prism128's Avatar
Prism128 Prism128 is offline
Ultimate Gamer
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: London
Posts: 9 Prism128 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 sec
Reputation Power: 0
Question css row colour mouseover change
Hi,

I have found this code in a php thing of mine and I would like to change it, and this bit off css is what makes it "happen". As it stands, when you mouse over a row nothing happens. What I would like it to do is change colour of the whole row (rows 1-4) (Like in phpMyAdmin browse section). This is the code I think I should change:

Code:
/* Common elements */
.row1 { background-color: #F5F9FD }
.row2 { background-color: #DFE6EF }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #E4EAF2 }


I also have this bit of CSS that can change ONE row's colour, but not all of them at the same time. If it helps, this is the code. I have edited the code into the main php file I have, in all the rows, but it only changes one "cell" when you hover over it, and not the whole row.
Code:
<td class="row4" onmouseover='window.status="{$info['name']}"; 
this.style.backgroundColor=iOver;' onmouseout='window.status="Done"; 
this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">;
</td>
</span></td>


Thanks,

Prism128

PS: The iOver and iOut (in the second code) are colour references in a php file
Reply With Quote
  #2  
Old February 23rd, 2004, 01:59 PM
INF INF is offline
Standards User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Posts: 146 INF User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 6 m 4 sec
Reputation Power: 6
It only changes the cell because the css is applied to the <td> if you apply it to the <tr> instead, it should work.
Reply With Quote
  #3  
Old February 23rd, 2004, 02:02 PM
Prism128's Avatar
Prism128 Prism128 is offline
Ultimate Gamer
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: London
Posts: 9 Prism128 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 sec
Reputation Power: 0
Thumbs up thanks
k, thanks mate, will try.

Prism128
Reply With Quote
  #4  
Old February 23rd, 2004, 02:11 PM
Prism128's Avatar
Prism128 Prism128 is offline
Ultimate Gamer
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: London
Posts: 9 Prism128 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 sec
Reputation Power: 0
Thumbs down
i have tried it but to no avail. this is the code i put in:
Code:
function ForumRow($info) {
global $ibforums;
return <<<EOF
        <tr this.style.backgroundColor=iOver;' this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';"    > 
          <td class="row4" align="center">{$info['img_new_post']}</td>
          <td class="row4"><b><a href="{$ibforums->base_url}showforum={$info['id']}">{$info['name']}</a></b><br /><span class='desc'>{$info['description']}<br />{$info['moderator']}</span></td>
          <td class="row2" align="center">{$info['topics']}</td>
          <td class="row2" align="center">{$info['posts']}</td>
          <td class="row2" nowrap="nowrap">{$info['last_post']}<br />{$ibforums->lang['in']}:&nbsp;{$info['last_unread']}{$info['last_topic']}<br />{$ibforums->lang['by']}: {$info['last_poster']}</td>
        </tr>
EOF;
}


Prism128

BTW: any text with $ before it is my php language, as well as the things like: ['posts'] etc
Last edited by Prism128 : February 23rd, 2004 at 02:13 PM.
Reply With Quote
  #5  
Old February 24th, 2004, 10:28 AM
Prism128's Avatar
Prism128 Prism128 is offline
Ultimate Gamer
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: London
Posts: 9 Prism128 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 sec
Reputation Power: 0
Someone please answer!!

Prism128
Reply With Quote
  #6  
Old February 24th, 2004, 12:30 PM
bambam's Avatar
bambam bambam is offline
macho member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2002
Posts: 207 bambam User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 m 40 sec
Reputation Power: 7
you were so close ...

<tr class="row4" onmouseover='window.status="{$info['name']}";
this.style.backgroundColor=iOver;' onmouseout='window.status="Done";
this.style.backgroundColor=iOut;' onclick="java_script_:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">;

<td>
cell 1
</td>

<td>
cell 2
</td>

</tr>

INF waz raite

I've done this b4, know it works, ciao
Reply With Quote
  #7  
Old February 24th, 2004, 01:52 PM
Prism128's Avatar
Prism128 Prism128 is offline
Ultimate Gamer
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: London
Posts: 9 Prism128 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 sec
Reputation Power: 0
thanks alot mate!! il try it in 1/2 hour (when ive done some work) and let u know.

thanks again,

Prism128
Reply With Quote
  #8  
Old February 24th, 2004, 04:34 PM
Glide Glide is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2003
Posts: 56 Glide User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
And make sure that the css property 'background-color' is not being set on <td>'s generally at all (not even to transparent), it needs to be set to 'inherit' (which is the default if not changed).
Reply With Quote
  #9  
Old February 25th, 2004, 10:42 AM
Prism128's Avatar
Prism128 Prism128 is offline
Ultimate Gamer
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: London
Posts: 9 Prism128 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 sec
Reputation Power: 0
Post
I copied the code into the right place, but it still doesn't work.
however, there was an extra semi-colon that makes an extra
line appear above the table. this showed me that it was "semi-working"
Here is a flash-in-a-zip file for you to see. 288KB.

http://cty.hopto.org/help/forums.zip

Thanks for the help so far, I feel that the end isn't far off!!

Prism128
Reply With Quote
  #10  
Old February 25th, 2004, 01:20 PM
bambam's Avatar
bambam bambam is offline
macho member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2002
Posts: 207 bambam User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 m 40 sec
Reputation Power: 7
; semicolon found (**red** below)

Quote:
<tr class="row4" onmouseover='window.status="{$info['name']}"; this.style.backgroundColor=iOver;' onmouseout='window.status="Done"; this.style.backgroundColor=iOut;' onclick="java_script_:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">***;***


You can also turn the cursor to a hand by using
this.style.cursor='pointer'

more here
http://www.htmlcenter.com/tutorials...als.cfm/55/CSS/
Reply With Quote
  #11  
Old February 25th, 2004, 02:08 PM
Prism128's Avatar
Prism128 Prism128 is offline
Ultimate Gamer
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: London
Posts: 9 Prism128 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 sec
Reputation Power: 0
I know where the semi-colon is/was, i just left it there to show that the code "works". If i take out THAT semi-colon, nothing happens. However, I will follow the link you just gave me. Thanks.

Prism128

PS. Thanks for the pointer, I will add it when i have read the linked page!!

Thanks again for your help
Reply With Quote
  #12  
Old February 25th, 2004, 02:58 PM
bambam's Avatar
bambam bambam is offline
macho member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2002
Posts: 207 bambam User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 m 40 sec
Reputation Power: 7
Sorry for pointing out the obvious ... i'm goofing of from work a little too much ...

all the best!
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > css row colour mouseover change

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway. 
Stay green...Green IT