[Pro] Change cell colour on Rollover?

Hi all,

Designers block!!! lol

I’ve got a html/graphic item acting as a button (blue). I wish to change the cell colour on Rollover. How is this done?

I’ve tried using the Cell bg colour on rollover action with no joy? Is this restricted to form/table items only?

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is this graphic item the only action item (link or submit) within the table cell? You could add some JavaScript to make the entire cell take on the behavior of the action item, or you could make the background of the table cell respond to a hover on the action item itself. Can you show an example page with the problem and a little more info about the desired effect?

Walter

On Jan 9, 2012, at 8:14 AM, Mr worm wrote:

I’ve got a html/graphic item acting as a button (blue). I wish to change the cell colour on Rollover. How is this done?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt, its really basic really. Just a simple rollover indicated via a colour change on the html item once rolled over. (this is what I’m trying to achieve)

Within the html div (button) is an inline graphic item and html item which, both explains what the button is and the buttons link.

I just wanted the BG colour to change once hovered to show that its actually active.

Do this explain it any better?

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I dont want the button to be a graphic item if I can help as the html that resides within the button will help my sites SEO as these buttons are on the .index page.

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So if you want an HTML box that contains a link to act “button-y”, there’s two ways to handle this. One is simply CSS. You can style a link to behave like a button very easily. Click on your HTML box, and then in the Style tab of the Inspector, open up the Links area. Go straight to the More button. Open the Extended dialog and add:

  • display: block
  • padding: 1em 2em
  • text-decoration: none
  • background-color: #ff9

This will give you a giant block of yellow around each link inside that box. If you set the box to height: auto (click the up-down arrow icon left of the height field in the Inspector so it dims out) then the box will shrink-wrap around the link, and you’ll have your button. Now if you edit the hover attribute of the links in the same interface, you can add a different background color and have a really button-like effect.

The other way to manage this is with JavaScript. If your desire is to have the entire block outside of the link to indicate clickability, then you can watch the button/link for a mouseover and use that event to trigger a background color change on the surrounding box. Apply Protaculous to the page, and choose Prototype-packed from the Library picker. Note the ID of the box you are watching (it’s labeled Title in the Inspector when you select the box). Hopefully the box will only contain one link somewhere inside it. The following snip of JavaScript assumes that and also assumes that the box is called item42. Change as appropriate:

var box = $('item42');
var restore = box.getStyle('background-color');
box.down('a').observe('mouseenter', function(evt){
	box.setStyle('background-color:#ff9');
});

box.down('a').observe('mouseleave', function(evt){
	box.setStyle({backgroundColor:restore});
});

This will watch the link inside the HTML box, and when that link is moused over, will toggle the background color of the box itself.

Walter

On Jan 9, 2012, at 10:05 AM, Mr worm wrote:

I dont want the button to be a graphic item if I can help as the html that resides within the button will help my sites SEO as these buttons are on the .index page.

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walt, the Javascript method works best for what I’m trying to achieve. However, how world the above code snippet change if I was to have multiple buttons on the .index page?

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The script I posted would work a little differently then. What you would do is add a class attribute to the boxes that you wanted to affect, and the code would change a little bit. Once those changes were done, the one instance of the script would work for any box that had that classname added to it. (You use Item / Extended to add the class attribute.)

$$('.boxy').each(function(elm){
	var restore = elm.getStyle('background-color');
	elm.down('a').observe('mouseenter', function(evt){
		elm.setStyle('background-color:#ff9');
	});
	elm.down('a').observe('mouseleave', function(evt){
		elm.setStyle({backgroundColor:restore});
	});
});

So in this example, you would open up Item / Extended, click new, and enter

  • Name: class
  • Value: boxy

(You don’t add the leading period when adding the classname, but you use it when referring to it later – that’s how you know it’s a class rather than an ID or tag name.)

Walter

On Jan 10, 2012, at 7:54 AM, Mr worm wrote:

Thanks Walt, the Javascript method works best for what I’m trying to achieve. However, how world the above code snippet change if I was to have multiple buttons on the .index page?

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Followed your instructions Walt with no luck…

Can’t fathom what I may be doing wrong? Now testing…

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sample document: http://scripty.walterdavisstudio.com/boxylinks.freeway.zip

You need to have installed Protaculous, latest version. Be sure to check the item/extended dialog to see how I indicate the classname for these elements.

Walter

On Jan 10, 2012, at 12:09 PM, Mr worm wrote:

Followed your instructions Walt with no luck…

Can’t fathom what I may be doing wrong? Now testing…

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

My working were indeed the same… However, stripping out my working methodically, it seems the link color action I had applied to each button was stopping the javascript from working?

Guess I need to use the links in the inspector to control the link styling of the buttons walt?

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Changing the inspector link styling only highlights the small area surrounding the text within the button now!?? And not the entire button Walt.

Can the html item (button) not have any styling applied then? Mine have CSS corners, link colour, contains inline html & graphic items with the main html item title used as the link.

Many thanks Walt

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can you post a link to your example page? I think I can see a way out of this for you, but it will be highly dependent on your specific layout. As an alternate suggestion, nothing you have described is terribly difficult to do long-hand in CSS, so you might consider having bare links in your HTML box, and then use the Link Inspector to make them button-like. Even neater, you could add a style to the head of your page like this:

.boxy a {
	border-radius: 9px;
	background-color: #666;
	color: #fff;
	border: 1px solid #ccc;
	padding: 4px 8px;
	display: inline-block;
}

And get some nice buttons that way.

Walter

On Jan 11, 2012, at 4:34 AM, Mr worm wrote:

Changing the inspector link styling only highlights the small area surrounding the text within the button now!?? And not the entire button Walt.

Can the html item (button) not have any styling applied then? Mine have CSS corners, link colour, contains inline html & graphic items with the main html item title used as the link.

Many thanks Walt

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Buttons only example page:

http://www.edwardlawlor.co.uk/2012/fw/walt.html

What do you think walt?

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This should just work if you add the boxy classname to each of the boxes. Click once on each of the blue boxes so the outer handles are showing. From the main menu, choose Item / Extended. Make sure the DIV segment of the dialog is highlighted, not the DIV Style segment. Click New, and add the following name/value pair:

  • Name: class
  • Value: boxy

Repeat this for each of the boxes. Now when you mouse over the link text, the box should change color.

Walter

On Jan 12, 2012, at 6:17 AM, Mr worm wrote:

Buttons only example page:

http://www.edwardlawlor.co.uk/2012/fw/walt.html

What do you think walt?

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options