Area map not working for me

None of these suggestions work for what I am wanting to do. Way back in my “dark ages”, before Freeway Pro, I did all my coding by hand. Then all the coding became to much for me!

So here I am in Freeway. I use to be able to put a thumbnail into a page and make it a selectable link that displayed the various colors for link>hover>and so forth. I have tried three different ways using Freeway but so far nothing has worked.

My images are definitely links, but there isn’t anything that would indicate that to someone using a browser, except for the text next to it.

Does any of this make sense?

Here is the URL of the page I am working on:
http://www.photoartnet.com/gallery.html


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

By default, Freeway codes all images that have links wrapped around them so that no border shows on the link. It is indeed quite old-school for an image to have a “visited” style border on it, so I’m not surprised you’re having trouble making this happen.

To get these borders to appear, you’re going to have to override the default style, which is set at the document level (so any style you add that is more specific should do the trick).

If you add something as simple as this to the head of your page, you should get the default borders back:

<style type="text/css">
a img { border: 2px solid }
</style>

But you probably want to be quite a bit more specific than that. Select the nearest parent HTML item to your linked images (and here I’m assuming that you have built your page using nested construction techniques of one sort or another, either fully inline, or at least grouped or positioned children), and note its Name/ID in the Inspector. Now use that as the base for your style rule:

<style type="text/css">
#item42 a img { border: 2px solid }
</style>

What this does is “scope” the rule to only apply to the linked images that are descendants of that particular box. This keeps your rule from being too broad and applying to things you don’t want it to.

Walter

On Sep 18, 2013, at 12:56 PM, gunner holmes wrote:

None of these suggestions work for what I am wanting to do. Way back in my “dark ages”, before Freeway Pro, I did all my coding by hand. Then all the coding became to much for me!

So here I am in Freeway. I use to be able to put a thumbnail into a page and make it a selectable link that displayed the various colors for link>hover>and so forth. I have tried three different ways using Freeway but so far nothing has worked.

My images are definitely links, but there isn’t anything that would indicate that to someone using a browser, except for the text next to it.

Does any of this make sense?

Here is the URL of the page I am working on:
http://www.photoartnet.com/gallery.html


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

I must not be building my site(s) the way you indicated Walter. I tired what you said and but still no joy. all I want is for the border to turn a different color when the cursor rolls over it, just as a text link does.


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

Then you will need to make your styles accordingly. Adding what I did will just get the border to show.

#item42 a img { border: 2px solid blue; }
#item42 a:hover img { border-color: red; }
#item42 a:visited img { border-color: purple; }

You can add alternates for :link, :visited, :hover and :active, and you must do so in that order. The pseudo-class goes on the a, but the border is specified on the image.

Walter

On Sep 18, 2013, at 1:40 PM, gunner holmes wrote:

I must not be building my site(s) the way you indicated Walter. I tired what you said and but still no joy. all I want is for the border to turn a different color when the cursor rolls over it, just as a text link does.


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

all I want is for the border to turn a different color when the cursor rolls over it

Here is an example that uses image rollovers
http://www.deltadesign.co/FW6Test/gunner.html

This uses the method from here http://www.deltadesign.co/fw_examples/fwactions/rollover.html

On the FW page is your thumbnail image and the Rollover image container layered on top of it. I have left the 3 images that I used to create the rollover states on display but they do not appear in the layout.

If all your thumbs are the same size then the Rollover image container can be duplicated for each thumb and only the hyperlink changed.

David


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

Dave, I only have one image the thumbnail. I tried putting another, second graphic box around it but that didn’t work out. So I will try out your method illustrated here.

thanks


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

I found my old folder with an old hand coded index.html in it. Here is how the code worked the way I wanted it to do. It was in a Table.

Doorway in Sienna, Italy Doorway in Lucca, Italy Parisian doorway Doorway in Roussillion, France

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

Well, you can’t actually use that code any more, because the border attribute is gone from the image tag as of over 10 years ago. That’s still perfectly legal HTML 3.2, but nobody uses that any more – it’s been replaced by HTML4, XHTML, and HTML5.

If you want to put a bunch of linked images in a table, Freeway makes that desperately easy to do. Draw a table, select the number of rows and columns, set the borders to none and add some padding, okay the dialog. Double-click inside each cell and choose Insert / Graphic Item from the main menu. This will put an empty image container in each cell. Open up a folder containing your images in Finder, switch to Freeway (with that folder peeking in behind the document window) and drag each image into a cell of the table until the image box lights up. Use the Scale and Pad command (Shift-Command-P) followed by Fit Box to Content (Shift-Command-D) to fit the image into the box. Select each image and choose the link target with the picker at the bottom of the application window.

Now add a set of styles to your page head that look something like this:

<style type="text/css" media="screen">
  #yourTableId td a {
    display: block;
    margin: 0;
    text-decoration: none;
    font-size: 1px;
    overflow: hidden;
  }
  #yourTableId td a img {
    border: 4px solid blue;
  }
  #yourTableId td a:visited img {
    border-color: purple;
  }
  #yourTableId td a:hover img {
    border-color: red;
  }
</style>

And you have the borders of your dreams. (Note that you must change this to match the actual ID of your table.)

You may need to adjust the cell dimensions of your table or images so that the borders have room to appear – Freeway won’t show these HTML borders in the design view, only in the preview or preview in browser views.

Now this may seem like a lot of extra work for some borders on images, and if you look at it through the lens of how you’re used to doing this, you’re absolutely right. But the point of CSS is to get as much of the presentational stuff out of the page and into a stylesheet, where it won’t dilute the semantic meaning of your content. And if you want to change all your borders later, you have one place to look, not 8 or 12 individual instances of border=“4”. If you want dotted borders, or double-grooves, or any of thousands of different combinations of border radii and shadows and hover-glows – you edit one bit of style code and don’t touch the HTML at all.

Walter

On Sep 19, 2013, at 1:59 PM, gunner holmes wrote:

I found my old folder with an old hand coded index.html in it. Here is how the code worked the way I wanted it to do. It was in a Table.

Doorway in Sienna, Italy Doorway in Lucca, Italy Parisian doorway Doorway in Roussillion, France

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