First, what’s the link to # doing on the employee photo? Are you
trying to use that to trigger your bio appearing? Second, is this the
structure that all of your bio/photo groups will have? If so, you can
use Prototype to do this. You’ll need to get a handle on each of the
bios and each of the photos. It would be simplest if you could apply a
classname to each, so there would be <article id="side-content" class="bio_text"> ... </article> and <img class="smallpolaroid bio_photo" src="{sized}" alt="{image_alt}"/> repeated once for each
person. Then, to gather each of your elements, and to hide your bio
text, you would do something like this:
var texts = $$('.bio_text').invoke('hide');
var photos = $$('.bio_photo');
Now you have two Arrays of the same length containing the elements you
need to work with, and so the rest is pretty simple. You walk through
the array of photos, setting each member up to respond to a mouseenter
event by showing its apposite bio text:
photos.each(function(elm, idx){
var idx = idx;
elm.observe('mouseenter',function(evt){ texts[idx].show(); });
elm.observe('mouseleave'),function(evt){ texts.invoke('hide'); });
});
This script relies on you always having the same number of bios and
photos, because that’s how it keeps track of which photo refers to
which bio. This also means you should never use those marker
classnames for anything else on your page (so don’t use them to carry
styling information, because Freeway loves to use that over again, and
that will break this solution).
That should get you started. All the JavaScript code above needs to be
added to the bottom of your HTML code, just before the /body tag, in a
script block; and in the head of your page, you need to include the
link to prototype.js. I like to use Googles CDN for this:
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js
"
type="text/javascript">
</script>
Walter
On Aug 25, 2010, at 4:05 AM, RobP wrote:
I’m working on a site for a healthclub using FW and EE. One page is
defined as an introduction page of the employees. The page has 2
columns. In the right column all the photo of the employees are
listed. I want to show the bio (text) in the left column for that
specific person while hovering over it’s photo.
I’m puzzling on this already for a while and can’t find a working
solution. There are 2 challenges: showing content on another part of
the page while hovering and displaying the bio that belongs to the
photo your hovering over.
The page can be viewed here: http://www.thewavealmere.eu/about_us/onze_medewerkers/
My html looks like this:
{/bio_gallery}
</div>
</aside>
<section class="span-16 last">
<div class="main-content">
<article id="side-content">
<hgroup>
<h1>{title}</h1>
<h2>{bio_subtitel}</h2>
</hgroup>
<p>{bio_body}</p>
</article>
<ul id="biografie">
{bio_gallery}
<li ><a href="#" {exp:imgsizer:size src="{image}" width="80"
height=“100”}>
![{image_alt}]()
{/exp:imgsizer:size}
{image_firstname}
{/bio_gallery}
{/exp:weblog:entries}
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