I’ve set up a gallery of large thumbnails, which seems to be working nicely in browser preview - the images are good and stretchy, rollovers working fine, etc. But as soon as I add a hyperlink to one of the thumbnails - linking it to an internal page - it shrinks down and it loses its flexibility (see link below to view the before & after). The rollover still works fine, and the hyperlink itself performs as expected - only my thumbnail is suddenly a brick. Anyone have any ideas as to why this is happening?
It looks like adding the hyperlink makes FW move the style=“width: 31.372549019607842%” from the img Tag to the enclosing href instead.
Not knowing how you put this together I can’t really speculate why this is happening but it would certainly be worth an email to support(a)softpress.com
Meantime if I get a minute I will have a go with this myself.
Thanks, David - I never would have been able to pick out that detail on my own using the Inspector in my browser! But I can see now what you’re referring to. It’s very strange. Do you think there’s a way to solve the problem via the Extended dialogue, either in the hyperlink window or on the image itself? Not that I’m well-versed in such things, I just notice that lots of “fixes” tend to start there. Thank you for taking the time to help me puzzle this out…if it weren’t for this hiccup, I’d be zooming toward the finish line on this project. So frustrating!
Sure! I just used the standard “Rollover” action on the thumbnails - nothing else is applied to the images.
The thumbs themselves are 320px wide pass-through graphics, flexible width and height, with a margin of 10 all the way around.
The thumbs are contained in an inline HTML wrapper (“imageWrapper”), which is center-aligned (margin-auto), width set to Fixed %, height set to Flexible.
The outermost container (“bodyWrapper2”) is an inline HTML wrapper that is center-aligned, width set to Available, height set to Flexible.
That’s it…that’s all I did for that whole section. Let me know if you have any other questions. And thanks again!!
Hey David! Just wondering if you were able to puzzle out any kind of a solution to this weird problem? I’ve tried everything I can think of (not a very long list, I’m afraid). Perhaps there’s a snippet of code I could add to the page that would prevent FW from moving the ‘width’ style from the IMG to the HREF? Anything you can think of would be greatly appreciated…thanks in advance for your awesome help!
My original setup had the thumbnails placed directly inside an HTML container (as inline pass-thru graphics). Looks like they each needed their own individual wrapper, within that outer HTML box (plus some other tweaks). Just for future posterity, here are the steps I took for each thumbnail:
Deleted the content of the pass-thru image, leaving an empty HTML box
Clicked inside that, and inserted another HTML item
Imported the thumbail as a pass-thru into that 2nd HTML box
Right-clicked on the image, and chose ‘Extended’
In the IMG Style tab, I added width-100% and height-100%
Applied the hyperlink directly to the pass-thru image
My troubleshooting took me through a zillion different variations of these steps, this is the combo that finally worked.
Below is a sample of the fixed thumbnail grid - I’ve applied a hyperlink to the first 3 thumbnails. As you can see, everything stays nice and stretchy now!
Another way to do this that you may want to experiment with is applying the image as the background image of the now-empty HTML box. Background images are inherently flexible, and you can control them a lot better these days with the new CSS3 background-size attributes (some Extended styling required to use that trick).
Walter
On Apr 3, 2015, at 11:23 PM, Jeannette email@hidden wrote:
Hey David,
Good news, I managed to fix the problem!
My original setup had the thumbnails placed directly inside an HTML container (as inline pass-thru graphics). Looks like they each needed their own individual wrapper, within that outer HTML box (plus some other tweaks). Just for future posterity, here are the steps I took for each thumbnail:
Deleted the content of the pass-thru image, leaving an empty HTML box
Clicked inside that, and inserted another HTML item
Imported the thumbail as a pass-thru into that 2nd HTML box
Right-clicked on the image, and chose ‘Extended’
In the IMG Style tab, I added width-100% and height-100%
Applied the hyperlink directly to the pass-thru image
My troubleshooting took me through a zillion different variations of these steps, this is the combo that finally worked.
Below is a sample of the fixed thumbnail grid - I’ve applied a hyperlink to the first 3 thumbnails. As you can see, everything stays nice and stretchy now!
