[Pro] Rollover text bubbles

I’ve got a section where I have multiple graphic areas (not grouped or combined in any way) set as single stand alone rollovers (invisible to visible) on top of a larger graphic. Each of these items has the Force Download PHP Action on them as well.

This all works fine. Now I’m trying to figure out how to add rollover text bubbles to each graphic rollover so the user knows what they are getting if they click the “button”.

I’ve tried Extended Attributes “New” “Name” with “ACRONYM TITLE” & “Value” (with pop up content) - but it’s not showing up in Safari/Browser Preview.

Building custom graphic text rollover bubbles is a last resort. Any thoughts? Anything out there that can do variations on this visually (box text, dialog, thought, comic book etc.?)


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

BTW, I’ve looked at OverLib - http://www.bosrup.com/web/overlib/?

It does the job - But hoping to stick within the Freeway Pro actions/functions realm if possible…


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

Heres a couple of pages that use Tooltips

http://www.deltadesign.co/fw_examples/jquery-tooltip.html

http://www.deltadesign.co/fw_examples/css3tooltip.html

David


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

hoping to stick within the Freeway Pro actions/functions realm if possible…

Nothing FW actionwise available apart from Target Show/Hide Layer etc.

D


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

The A tag that wraps around the IMG tag (to create the rollover) is probably masking the image’s title. Try applying the title to the link, rather than the image itself. To do this, apply a manual link to the image that you have applied Rollover to. Use the Hyperlink dialog (Command-K), choose External and enter javascript:; as the link, and then add your title text to the Title field.

The Rollover Action will apply a link to any image that it is applied to UNLESS a link already exists.

Walter

On Dec 18, 2011, at 10:11 AM, Karen E wrote:

I’ve got a section where I have multiple graphic areas (not grouped or combined in any way) set as single stand alone rollovers (invisible to visible) on top of a larger graphic. Each of these items has the Force Download PHP Action on them as well.

This all works fine. Now I’m trying to figure out how to add rollover text bubbles to each graphic rollover so the user knows what they are getting if they click the “button”.

I’ve tried Extended Attributes “New” “Name” with “ACRONYM TITLE” & “Value” (with pop up content) - but it’s not showing up in Safari/Browser Preview.

Building custom graphic text rollover bubbles is a last resort. Any thoughts? Anything out there that can do variations on this visually (box text, dialog, thought, comic book etc.?)


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

On 18 Dec 2011, 2:36 pm, DeltaDave wrote:

Heres a couple of pages that use Tooltips

http://www.deltadesign.co/fw_examples/jquery-tooltip.html

http://www.deltadesign.co/fw_examples/css3tooltip.html

David

Thanks David, these are great - but a lot of code involved for something so simple. I don’t have a lot to do so maybe creating the individuals would be fine for now, but I would love to also learn this. So maybe at some point I can revisit the coded approach and figure out (step by step) how to integrate that into FW.


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

On 18 Dec 2011, 3:26 pm, waltd wrote:
apply a manual link to the image that you have applied Rollover to. Use the Hyperlink dialog (Command-K), choose External and enter javascript:; as the link, and then add your title text to the Title field.

Thank you Walter - this sounds like it could be usable - but -
after entering the info into the dialog (and later reopening) External/Protocol/javascript -

javascript:; -
comes back as javascript:%3B

javascript:; -
comes back as
javascript:%3B`%20

I’ve tried ever imaginable variation of what specific characters to enter after javascript: - starting with just a semi-colon and up. No joy.

This -

The Rollover Action will apply a link to any image that it is applied to UNLESS a link already exists.

To clarify, the graphic boxes for this already have a rollover on them (not attached to any other item) to make them only appear on mouseover.

A link kind of exists in the form of a Force Download (PHP) Action also applied to each item.

I’m not sure what the “UNLESS” condition is going to mean in this case.

The under construction site is here - the specific items I’m wanting to “bubble” are the chocolates - as each of them will be download links.
http://www.ormistunes.com


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

Then try entering just a octothorp (#) instead. Or try javascript:void(); . Freeway is escaping characters here, and that’s the issue.

Walter

On Dec 18, 2011, at 12:52 PM, Karen E wrote:

On 18 Dec 2011, 3:26 pm, waltd wrote:
apply a manual link to the image that you have applied Rollover to. Use the Hyperlink dialog (Command-K), choose External and enter javascript:; as the link, and then add your title text to the Title field.

Thank you Walter - this sounds like it could be usable - but -
after entering the info into the dialog (and later reopening) External/Protocol/javascript -

javascript:; -
comes back as javascript:%3B

javascript:; -
comes back as
javascript:%3B`%20

I’ve tried ever imaginable variation of what specific characters to enter after javascript: - starting with just a semi-colon and up. No joy.

This -

The Rollover Action will apply a link to any image that it is applied to UNLESS a link already exists.

To clarify, the graphic boxes for this already have a rollover on them (not attached to any other item) to make them only appear on mouseover.

A link kind of exists in the form of a Force Download (PHP) Action also applied to each item.

I’m not sure what the “UNLESS” condition is going to mean in this case.

The under construction site is here - the specific items I’m wanting to “bubble” are the chocolates - as each of them will be download links.
http://www.ormistunes.com


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

Actually, if you just put javascript: in there (nothing else) it will do what’s needed without throwing any errors. You do that to avoid having the window scroll up to the top (which is what happens if your page is scrolled and you click on an empty anchor link).

Walter

On Dec 18, 2011, at 12:55 PM, Walter Lee Davis wrote:

Then try entering just a octothorp (#) instead. Or try javascript:void(); . Freeway is escaping characters here, and that’s the issue.

Walter

On Dec 18, 2011, at 12:52 PM, Karen E wrote:

On 18 Dec 2011, 3:26 pm, waltd wrote:
apply a manual link to the image that you have applied Rollover to. Use the Hyperlink dialog (Command-K), choose External and enter javascript:; as the link, and then add your title text to the Title field.

Thank you Walter - this sounds like it could be usable - but -
after entering the info into the dialog (and later reopening) External/Protocol/javascript -

javascript:; -
comes back as javascript:%3B

javascript:; -
comes back as
javascript:%3B`%20

I’ve tried ever imaginable variation of what specific characters to enter after javascript: - starting with just a semi-colon and up. No joy.

This -

The Rollover Action will apply a link to any image that it is applied to UNLESS a link already exists.

To clarify, the graphic boxes for this already have a rollover on them (not attached to any other item) to make them only appear on mouseover.

A link kind of exists in the form of a Force Download (PHP) Action also applied to each item.

I’m not sure what the “UNLESS” condition is going to mean in this case.

The under construction site is here - the specific items I’m wanting to “bubble” are the chocolates - as each of them will be download links.
http://www.ormistunes.com


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


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

Thanks again Walter!

javascript:# - doesn’t get skewed, but javascript:void(); does.

Unfortunately, # yields no resultant info dialog.

I’m seeing these of course as “Titles” on all actual Hyperlinks.

As an experiment I applied it to another graphic item with different actions - CSS3Rollover+SoundFX Graphic and it worked fine. (RedApple lowerLH corner of my under construction page)

Now I’m starting to think the Rollover+ForceDownloadPHP on these graphics is interfering with it.


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

On 18 Dec 2011, 5:16 pm, waltd wrote:

Actually, if you just put javascript: in there (nothing else) it will do what’s needed without throwing any errors.

Yes, and it is working everywhere I’ve tried this - except where I actually NEED it to work. :-/

Detective time. Graphic in pasteboard

  • added the blank javascript: - dragged onto the page - works

Back to pasteboard - Added the stand alone rollover - back to page - still works

Back to pasteboard -
Added ForceDownloadPHP - back to page = broken!

So there’s the culprit. I may have to rethink this now. A second rollover graphic text box would react quicker than these info boxes anyway and give me another place to add something more engaging. Maybe that’s the way to go.


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

I’ve ended up drawing quick temporary speech bubbles in Photoshop and combined them with HTML text boxes for each then grouped them - Applying the Target/Show/Hide action - this works well, and ultimately more customizable.

That should do it… Thanks again David and Walter for the assists!


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