What I’m describing will give you an enormous block around the link –
as large as you make the padding – that changes color when the link
is moused over. Download this sample document to see what I mean: http://scripty.walterdavisstudio.com/links.freeway.zip
If you want a link within a table cell or DIV to cause that entire
block to change color, even when there are other contents besides the
link within that block, then you have to make some additional efforts
with JavaScript and a little CSS as a marker for the script to use
when targeting the effect.
Use the Add Selector Action to apply a single classname to each of the
blocks you want to behave this way. For this example, I’m using the
class ‘block’ but really it could be anything you choose, as long as
you also change the script below to match exactly. The block must
contain at least one link as text, only the first link (if there are
more than one) will be honored by the effect.
Apply the Protaculous Action to the page, and set the Library picker
to prototoype-packed. Click on the top Function Body button and paste
in the following:
$$('.block').each(function(elm){
var link;
if(link = elm.down('a')){
elm.observe('mouseenter', function(evt){
elm.addClassName('blockOver');
});
elm.observe('mouseleave', function(evt){
elm.removeClassName('blockOver');
});
elm.observe('click', function(evt){
window.location.href = link.href;
});
}
});
Now the final step is for you to create a class style called
blockOver. Use the Styles palette’s gear menu to choose New Style.
Disregard whatever is in the Name field, and in the Tag field, type
exactly this:
.blockOver
Now highlight whatever is in the Name field, delete it , and PRESS TAB
on your keyboard. Next, use the Character style picker to add
Background Color to the style, and give it whatever highlight color
you like.
Publish your site, and you should see a background color filling the
block whenever it is moused over. If you click anywhere within the
block, it will have the same effect as clicking on the first link in
the box.
Walter
On Sep 11, 2011, at 6:59 AM, Stu :: Nonfacture wrote:
Thanks
Yes I was able to do that not a problem
the image was to make the whole area print on mouse over not just
were the text was
I was able to change the background on the just the text area the
idea was to convert the whole of the area of the box in pink not
just where the text is
Stu
On 10 Sep 2011, at 17:27, Walter Lee Davis wrote:
Try this:
-
Draw an HTML box where you want the links to appear. Double-
click into it, and create your links, taking care not to apply ANY
styling to them at all.
-
Click elsewhere on your page, then click on the HTML box once so
it’s selected and the handles are showing on the corners and sides
of the box.
-
In the Inspector, locate the Style tab and the Links segment of
that tab. Set up your basic link style there (including font and
style), and set the Hover state to have the pink background and
nothing else. Then back in your basic link style, open the Extended
dialog and then click New. In the sub-sub dialog that appears, you
will see a Name and Value field. Enter padding for the name, and
‘10px 20px’ (without the quotes) for the value. You can adjust
these values later if you like.
Preview, and you should see the effect you’re after.
Walter
On Sep 10, 2011, at 7:23 AM, stuart wrote:
placed either in table and as individual html boxes
the text is white on a black background and all Im trying to do is
on mouse over the background is to go pink and on mouse out go
back to normal state …
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options