Yup, it’s you. You’ve got to get these images organized in such a way
that you can call them by name and not have any confusion.
Start by getting rid of everything else on the page except the three
normal buttons and the three over buttons. Make sure that all of them
are layered objects, with the Layer checkbox checked in the Inspector.
Then click on the word Site at the top of the left pane, so it
switches over to Page. You should see the page name, with six image
names underneath that. Drag them up and down in the list so that you
see this:
index.html
about
aboutOver
market
marketOver
outdoor
outdoorOver
Rename the images by option-clicking on each name in the list and
typing in the desired name.
Now, while nothing on the page is selected (click somewhere blank on
the page) open the Actions palette, and click on the Protaculous tab
and the top Function Body button. There, you’ll see $(‘over’).hide();
Ask yourself, “what on this page is named ‘over’?” And extra points if
you say, “Nothing!”
At this point, you can do one of two things (but not both):
$w('aboutOver marketOver outdoorOver').each(function(name){
$(name).hide();
});
or
$('aboutOver').hide();
$('marketOver').hide();
$('outdoorOver').hide();
Now your over images will hide properly when the page loads.
Next, you need to go through all of the Observer Actions (applied to
the about, market, and outdoor images) and make sure that the name of
the “Over” version is corrected so they read
$('aboutOver').appear();
or the like, as appropriate for their specific “partner” image, and
also that the “over” images all have the correct names as well:
$('aboutOver').fade();
But if you’ve come this far (and gotten this close) you might want to
know how to make this work in one function applied in Protaculous,
rather than Protaculous AND two instances of Observer for each
animation.
So you’ve gone through and renamed your images as described above. Now
click on each one in the list in the left pane, and in the Actions
palette, click the little (x) in the tab where it reads Observer. The
little cog icon should disappear from each of the six image names.
Now click on the page somewhere blank, and open up the Function Body
editor in Protaculous. Paste in this:
$w('about market outdoor').each(function(name){
var name = name;
$(name + 'Over').hide().
observe('mouseout',function(evt){
this.fade();
});
$(name).observe('mouseover',function(evt){
$(name + 'Over').appear();
});
});
Preview, and see how it works.
What it’s done, line by line, is this:
- Set up an array of three words, and pass that to an iterator[1]
named each - Inside the each method, let the variable name stand for the current
word - Use the Prototype shortcut for document.findElementById() ($) to
find an element on the page with the ID
[whateverNameIsCurrentlyEqualTo] + ‘Over’, and hide it. - Using that same handle again, start an observer on the mouseout
event. - When a mouseout occurs, fade the element that triggered that event.
- Close the observer
- Find an element on the page with the ID
[whateverNameIsCurrentlyEqualTo] and set an observer on the mouseout
event. - When that event happens, cause the
[whateverNameIsCurrentlyEqualTo] + ‘Over’ element to re-appear. - Close listener.
- Close iterator.
So the trade-off is that you have to name everything correctly. But
wait, that’s not such a trade-off because you have to do that anyway.
Walter
-
An iterator is a kind of function that will loop over a collection
of elements, yielding the current element to itself for further
processing. If you’ve done any traditional JavaScript programming, you
might recognize this construct:for(i=0; i < something.length; i++){
alert(something[i]);
}
An iterator is that, but with rocket boosters and inline skates, and
maybe ninjas.
On May 23, 2011, at 7:36 PM, stuart wrote:
Walter Hi thanks …its beginning …
the only issue i have is when it loads http://www.web.nonfacture.co.uk/index.html
the images dont load correctly …is that meStu
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