6 replies [Last post]
TwitchOSX
Offline
newbie
Oregon
Last seen: 17 years 17 weeks ago
Oregon
Joined: 2003-06-25
Posts: 1
Points: 0

Anybody know how to change the background color of a table cell on hover of that cell in Dreamweaver? I have found ways to do this using the onMouseOver and onMouseOut which work, however, I want to find out how to do this from within Dreamweaver so that my workflow can be smoother. Also, is it possible to have a table cell, with a link within it. and on the hover of the cell, change the properties of the hover on the link and ALSO allow the cell to be linkable as well as the text? Basically so you dont have to actually click on the text itself to enable the link. Thanks

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 8 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Table Cell Background change on Hover

Hi TwitchOSX,
You could try adding onclick and onmouseover events to the td element that way you don't really need a link in the cell, just call javascript functions to swap the background color etc.

Sorry I don't use Dreamweaver so can't help with that.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Table Cell Background change on Hover

I did use dreamweaver once or twice... I seem to remember that it is possible. I'd suggest a quick search around google for 'dreamweaver onmouseover' or similar, unless a Dreamweaver expert turns up here.... good luck tho!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 7 years 23 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Table Cell Background change on Hover

I use Dreamweaver MX for my development and I haven't come across this feature inbuilt into it. If it would be there it should be under Design>>Behaviours. I also checked the Dreamweaver Extensions repository and couldn't find anything similar. That said, you might want to search the net to see if someone has written an extension for that behaviour. You may want to go to the Macromedia Dreamweaver Extensions site and look at the authors web pages to see if you can find any. Good luck

http//melbourne.ug.php.net

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 7 years 23 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Table Cell Background change on Hover

Update...... I just found what you wanted but it doesn't come free. Here is the link http://www.macromedia.com/cfusion/exchange/index.cfm#loc=en_us&view=sn121&viewName=Dreamweaver%20Extension&extID=1005264&catID=44

http//melbourne.ug.php.net

chameleon2011
Offline
newbie
Last seen: 15 years 51 weeks ago
Joined: 2004-10-28
Posts: 4
Points: 0

Use CSS for Hover - Won't work in IE :(

Try using this CSS code appropriately:

tr:hover{
	background-color: #FFFF66;
}

It'll highlight the row when you hover over it - the big letdown is that it won't work in IE.

mickieluv
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Table Cell Background change on Hover

Hi Twitch,

I use a similar method for the styling of the news section and main portfolio links on my website:

http://www.madewithpixels.co.uk

I realise that you are probably looking for a CSS solution (which unfortunatley I cant give you). But i might be able to help with Dreamweaver.

in the past I've used the 'goTo URL' and the 'open BrowserWindow' javascript behaviours to achieve the effect your after, they are not quite what your looking for, but you can insert the behaviours into a normal link and then re-purpose them to your liking.

your code should look something like this: (this is taken from the news frame of my website).. you can see the frame on its own by typing the following URL into your browserhttp://www.madwithpixels.co.uk/news_main.html

  <tr>
    <td colspan="4" class="news_body" 
                onclick="window.open('http://www.coolwebsites.dk','_blank');"
				onmouseover="this.style.backgroundColor='#FF00FF'; this.style.cursor='hand'; this.style.color='#FFFFFF';" 
                onmouseout="this.style.backgroundColor='#7C8088'; this.style.color='#CCCCCC';"><strong>link goes here </strong></td>
  </tr>

that example is a simple way of partly acheiving the effect you want.

A more complicated version can be seen in the folio section of my site [urlhttp://www.madewithpixels.co.uk/folio.html[/url]
As you can see, the folio navigation down the left hand side of the page is similar to the news_main.html setup from the first example, except that the links (cells and text) form kind of a 'collapsable nav bar' made with lots of frames (yes i know, i know)...

This version of the code is more like you asked for... the cells themselves are the links that 'expand' the navigation, and when open the text links will close the nav. there is a javascript 'fade' class in action on the text links, and the cells themselves act as buttons to call seperate frames.

the code looks like this

 <tr>
    <td class="folio_button" 
                onclick="window.open('frame1.html', 'frame1'); window.open('frame2.html', 'frame2');"
				onmouseover="this.style.backgroundColor='#FF00FF'; this.style.cursor='hand'; this.style.color='#FFFFFF';" 
                onmouseout="this.style.backgroundColor='#7C8088'; this.style.color='#CCCCCC';"><strong>world wide web </strong></td>
  </tr>

You can view this code in action without the rest of the page around it by going here (the nav wont actually work, because you'll remove the frameset by loading it directly into a browser, but you'll be able to view the source properly at least http://www.madewithpixels.co.uk/folio_main.html

I'm pretty sure that you can apply the same features using CSS, as the overStates themselves are called with a .style class anyway... i just havent got round to trying it with CSS just yet (it's next on the list)

I hope all this helps and gets you someway to solving your problem. if you have any questions, just shout.

Cheers, good luck

Mike

www.madewithpixels.co.uk
design | graphics | multimedia