You won’t be able to do this with a standard Freeway rollover, but you
can do it with some extended code.
First, and easiest way as long as you don’t care about IE users seeing
the effect:
Draw your DIV (HTML Layer Box) to define the area you want the change
to happen within. Note the Name of the layer in the Freeway Inspector.
Either using the Page / HTML Markup dialog or the Styles / Add Style
dialog, add a new CSS rule for that box. Let’s imagine that it’s
called item4 in the Inspector. Use either one of the following:
###Page / HTML Markup
<style type="text/css">
#item4:hover { background-color: #ff9; }
</style>
Change the color to whatever you like, this is a medium yellow for
example.
###Styles (cog menu) New Style
- Click into the Tag field, enter ‘#item4:hover’ in the field
(without the quotes).
- Tab into the Name field, delete whatever is there, and tab back out
of that field to save the change.
- Click on the Character (+) menu and pull down to add Background
Color, change the color to your desired setting.
This will cause this element to highlight whenever the cursor is
hovered over it.
Harder way will require some extra JavaScript coding to get around
IE’s lack of support for the :hover pseudo-class. (This is based on
the solution I posted yesterday to making full table cell hovers work,
but this is much simpler because we don’t care about child links
propagating up to the DIV’s click event.
###IE-pandering method
- Apply the Protaculous Action to the page, and choose prototype-
packed from the Library picker.
- As before, draw your layer and check its ID.
- Click on the pasteboard, so nothing is selected, then click the
second Function Body button in the Actions palette. Enter the
following code in the dialog (adjusting the ID to match your layer).
var elm = $('item4');
var bg = elm.getStyle('background-color');
elm.observe('mouseover',function(evt){
elm.setStyle({backgroundColor:'#ff9'});
});
document.observe('mouseover',function(evt){
var el = Event.element(evt);
if(elm != el && !el.descendantOf(elm))
elm.setStyle({backgroundColor:bg});
});
Again, you could change this color definition (line 4) to whatever you
like.
Note that in both techniques, if you have drawn a box to define the
edges of the effect and then draw new elements over the top of that
box (as child elements, that is) then the effect will be contiguous –
the highlight will not be interrupted when you mouse over one of the
children.
If you simply draw your box, set the code as above, and then send that
element to back, then anything that lies between your mouse and the
box will interrupt the effect. The trick to keep that from happening
is to make all of the elements that lie above the layer into children
of the box where you have defined the effect. Click on the Site pane
header so it reads Page, then find the items in the list below your
element (item4, in this example). Anything below that element will be
above it in the stacking order. Drag these element names up and to the
left, directly below item4, and you will see them indent right below
it, and the item4 element in your design view will highlight with a
blue selection rectangle to indicate that it is accepting the drag.
Walter
On Jan 22, 2009, at 9:01 AM, ed watt wrote:
Hello,
I’m trying to make a rollover that activates when the mouse enters
anywhere in a specific area on the page (that includes html text and
graphics).
The closest I can get is here (rollover first case study image).
http://www.thisisdesigned.com/sites/jcandp/home4/
What’s the best way to get the background grey to appear when the
mouse goes anywhere in that area? Can’t find anyhing in the
knowledge base on this but maybe not looking for the right terms?
Any help much appreciated!
Ed
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