[Pro] Trigger text link Hover state by mousing over a graphic

Freeway
1

I have 1 graphic link and 1 text link on a page. I want to mouseover the graphic and cause the text link to display its HOVER state. And when I mouseoff the graphic, the text link should return to its normal (LINK) state.

Ditto for the ACTIVE state. When I click the graphic, the text link should display its ACTIVE state.

How can this be accomplished in CSS?

If CSS cannot do it, what about JavaScript?

Thanks,

James Wages

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

2

If you wrap the link around both the image and the text, then this is what will happen quite naturally. It will then be up to you to style the image within the link so that it looks the way your current layout does. Of course you could also use JavaScript and two links “slaved together” to give the illusion of them being a single link. But the HTML/CSS way is much easier and lighter-weight.

Walter

On May 20, 2015, at 1:24 AM, JDW email@hidden wrote:

I have 1 graphic link and 1 text link on a page. I want to mouseover the graphic and cause the text link to display its HOVER state. And when I mouseoff the graphic, the text link should return to its normal (LINK) state.

Ditto for the ACTIVE state. When I click the graphic, the text link should display its ACTIVE state.

How can this be accomplished in CSS?

If CSS cannot do it, what about JavaScript?

Thanks,

James Wages

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

3

Since the graphic and link will not always be right next to each other, I am unsure precisely how to go about “wrapping both the graphic and the link.”

James W.

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

4

The image has to start out as an inline image in the same paragraph of text as the linked words, and be wrapped with the same link as the text. What you do, styling-wise, to make the image appear elsewhere is entirely separate from the construction.

In code, it’s basically this:

<p><a href="foo"><img src="bar.jpg">Some text here</a></p>

When you mouse over the link (whether you are mousing over the image or the text – it wraps both of them) then the :hover pseudo-class is applied to the contents of the link, and whatever you have done to style that takes over. You’re not triggering the effect from the picture or the text separately, you’re triggering it from the tag itself, and it’s the common parent.

If you want to drag JavaScript into this, then you could give the two elements the same classname or something like that (to tie them together in a manner that JavaScript can find again later). Then you would have to use something besides the :hover pseudo-class to trigger the style change.

<a href="foo"><img src="bar.jpg" class="synchronized"><a>
<p class="synchronized"><a href="foo">Some text here</a></p>

<link to prototype.js, first>
<script type="text/javascript">
	document.on('mouseover', '.synchronized', function(evt, elm){
		$$('.synchronized').invoke('addClassName', 'my-hover');
	});
	document.on('mouseout', '.synchronized', function(evt, elm){
		$$('.synchronized').invoke('removeClassName', 'my-hover');
	});
</script>

That’s a lot more code, you will agree, and it’s really doing the same thing as the first example. Now there would have to be some CSS magic involved to get them to look alike, but nothing close to all that JavaScript. Plus you have to download the 32K of Prototype just to get it to work in as little JS as I have written here.

Walter

On May 20, 2015, at 4:32 PM, JDW email@hidden wrote:

Since the graphic and link will not always be right next to each other, I am unsure precisely how to go about “wrapping both the graphic and the link.”

James W.

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

5

Let’s ignore JS and focus on your easy solution. I understand how easy it is to view it in terms of the code. Using Freeway to accomplish that is the hard part!

Here’s a super-tiny, super-simple, single-page FW7 doc:

http://cl.ly/082N1b3P3j1K

I put 2 examples on that page, one with CSS positioning, which looks stupid because I never can figure out CSS positioning in Freeway, and the one below that is positioned perfectly and beautifully with a table. In either case though, you see that putting your arrow cursor over the graphic (in the browser) doesn’t highlight the text link.

Of course, the reason why is because I don’t see clearly how to do that in Freeway.

Even if I double-click inside the CSS-positioned box and SELECT ALL, then add my link, the link is not applied in the way in which it is intended (the way you are discussing with me).

So how do I accomplish this in Freeway?

Thanks,

James W.

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

6

Here’s an example:

http://scripty.walterdavisstudio.com/links/

Draw an HTML box on the page to hold the elements. Double-click inside it so you see a flashing text cursor. Type your text, then left-arrow to the beginning of the line. Insert / Graphic Item, fill with your photo. Make sure you have a text cursor, then select all and apply your link. The link will wrap around both the image and the text, because they are in the same paragraph.

Click once on the image, choose Item / Extended, click on

. Use the New button to add each of the following name/value pairs (adjust to suit your design):

top / -28px
left / -260px
width / 200px
height / 200px
position / absolute

Preview to see the effect. What you have done (by applying position: absolute to an inline image) is remove it from the text flow so it can be positioned outside of the text box. It’s like the bad old days in QuarkXPress 2, using negative margins and nested text boxes to “hang” punctuation while keeping it in flow. The negative dimensions above are used to pull the image box out of its parent, and are relative to the top-left corner of that parent box. The image will only move into its real position in the Preview or Preview in Browser modes, so you may have to fiddle with it a bit to figure out the precise offset.

The last bit of this is the hover style. The only reasonable way to construct this is with the Styles palette and a “Tag-only” style. Enter the entire selector into the Tag field, make sure you tab delete tab in the Name field to clear out the automatic name Freeway enters, and then build up the style you want to see. I went with a pale blue background color, but you can do whatever you like.

Walter

On May 20, 2015, at 9:15 PM, JDW email@hidden wrote:

Let’s ignore JS and focus on your easy solution. I understand how easy it is to view it in terms of the code. Using Freeway to accomplish that is the hard part!

Here’s a super-tiny, super-simple, single-page FW7 doc:

http://cl.ly/082N1b3P3j1K

I put 2 examples on that page, one with CSS positioning, which looks stupid because I never can figure out CSS positioning in Freeway, and the one below that is positioned perfectly and beautifully with a table. In either case though, you see that putting your arrow cursor over the graphic (in the browser) doesn’t highlight the text link.

Of course, the reason why is because I don’t see clearly how to do that in Freeway.

Even if I double-click inside the CSS-positioned box and SELECT ALL, then add my link, the link is not applied in the way in which it is intended (the way you are discussing with me).

So how do I accomplish this in Freeway?

Thanks,

James W.

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

7

Walter, thank you for the details. I found some problems though:

  1. Your trick doesn’t work on pass-thru images, sadly. And since I almost never use regular graphic boxes, using almost exclusively pass-through images, that is a big difference indeed. But for the sake of testing your steps, I used a regular Graphics Box.

  2. You say to “Click once on the image (my Graphics Box), choose Item / Extended, click on

    ”, but if you click on a GRAPHIC box and Choose EXTENDED there is only or available for editing. There is no
    . But perhaps you meant to say ?

  3. I added TOP, LEFT, WIDTH, HEIGHT and POSITION into , and when I preview in the browser, I see the graphic popped out of the text box. But since I am using a 144ppi High-resolution graphic, it looks strange and horrible. It’s about 5 times bigger than what I see in Freeway, pixelated as can be. So it’s clear this trick doesn’t play well with Retina graphics.

Best,

James Wages

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

8

Why not? What happens when you insert a pass-through image inline? It works just fine here. And sorry about the div vs ing, I mis-typed that bit. You got the idea.

Walter

On May 21, 2015, at 4:00 AM, JDW email@hidden wrote:

Your trick doesn’t work on pass-thru images, sadly

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

9

Okay, you’re right about the pass-through technically working, so long as I add your Extended hack. It looks different in Freeway’s Page View, but in the browser it ends up the same. BUT…

Like I said in my previous post, when using hi-rez graphics (144ppi), it doesn’t matter if I use a Graphics Box or an HTML Box (pass-thru), the graphic EXPLODES IN SIZE in the browser.

ScreenShot of Freeway’s Page View:
http://cl.ly/image/0y2K032G0I0S

Screen Shot of Browser Preview:
http://cl.ly/image/1N322O3f3s18

The size of the graphic you see in Freeway’s Page View is the size you SHOULD see in the browser. But for some reason, the 144ppi graphic doesn’t like your Extended trick, as per what you see in the Browser Preview SS above.

Your thoughts on this would be appreciated.

Thanks,

–James W.

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

10

That’s because you used the 200px dimensions that I used, but you can just delete both of those (height and width) from the extended attributes. I had that in my code because that’s the size I wanted the image to appear. It’s not important to the trick.

Wallter

On May 21, 2015, at 7:56 PM, JDW email@hidden wrote:

Okay, you’re right about the pass-through technically working, so long as I add your Extended hack. It looks different in Freeway’s Page View, but in the browser it ends up the same. BUT…

Like I said in my previous post, when using hi-rez graphics (144ppi), it doesn’t matter if I use a Graphics Box or an HTML Box (pass-thru), the graphic EXPLODES IN SIZE in the browser.

ScreenShot of Freeway’s Page View:
http://cl.ly/image/0y2K032G0I0S

Screen Shot of Browser Preview:
http://cl.ly/image/1N322O3f3s18

The size of the graphic you see in Freeway’s Page View is the size you SHOULD see in the browser. But for some reason, the 144ppi graphic doesn’t like your Extended trick, as per what you see in the Browser Preview SS above.

Your thoughts on this would be appreciated.

Thanks,

–James W.

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

11

Stupid me, you’re absolutely right. I can’t believe how stupid I can be overlooking the obvious. The exploding pic is now fixed. Thanks!

BUT, only Graphic Boxes work as expected with your trick. When I use an HTML box and PassThru, the rollover effect works, but the PassThru doesn’t pop outside the container box.

Freeway ScreenShot (Page View): http://cl.ly/image/2F1x0L452C1U

Browser ScreeShot: http://cl.ly/image/063S142C1n0X

Here is the code:

<body>
<div id="PageDiv">
	<div id="ContainsGraphicsBox"><p class="f-fp f-lp"><a href="index.html"><img id="GraphicsBox" src="graphicsbox.png" alt="">mytext</a></p>
	</div>
	<div id="ContainsPassThru"><p class="f-fp f-lp"><a href="index.html"><img id="PassThru" src="KIRAMEK_logo-tiny_144ppi.png" alt="PassThru">mytext</a></p>
	</div>
</div>
</body>

Here is a relevant portion of “index.css”:

#PageDiv { position:relative; min-height:100%; max-width:500px }
#ContainsGraphicsBox { position:absolute; left:183px; top:51px; width:232px; min-height:47px; z-index:1; background-color:#e1e1e1 }
#GraphicsBox { left:-100px; top:-28px; width:38px; height:27px; overflow:hidden; position:absolute }
#ContainsPassThru { position:absolute; left:183px; top:207px; width:232px; min-height:47px; z-index:2; background-color:#e1e1e1 }
#PassThru { width:38px; overflow:hidden; top:-28; left:-100; position:absolute }

–James W.

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

12

I can’t duplicate that here. Follow these steps:

  1. Draw an HTML box on the page. Double-click inside it.
  2. Insert / Graphic Item. Choose your image, check pass-through and high-resolution. (Note that the border of the image turns green, because it becomes an HTML item.)
  3. Apply the style attributes (position: absolute, negative left and top).
  4. Type the rest of your text, select all, and apply your link.
  5. Preview in a browser.

I can’t not make it work here.

Walter

On May 21, 2015, at 9:47 PM, JDW email@hidden wrote:

BUT, only Graphic Boxes work as expected with your trick. When I use an HTML box and PassThru, the rollover effect works, but the PassThru doesn’t pop outside the container box.

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

13

Thanks, Walter, it’s now popping outside its box as it should.

I now just need to figure out how to get the graphic and the text to vertically center with respect to each other inside the same colored box. I normally use a table for vertical centering since it’s fast and easy (put the graphic in the left cell and the text link in the right cell). Ernie taught me the proper “responsive” way as per the following thread:

http://freewaytalk.net/thread/view/161777

But the problem is that vertical centering method doesn’t allow me to select both the graphic and the text and put a link on both at the same time, such that mousing over the graphic will trigger HOVER on the text link.

I can hack together something that looks like its vertically centered on Macs using Safari, but if the text size changes on Windows or if the user makes the text size change, then the text will be off-center as show in this short screencast (no sound):

http://cl.ly/150c2k0e0P0g

Using a table, I can make them both vertically center perpetually, regardless of how the text shrinks or expands, but since they would be in separate cells in that case, I could not select both and apply a link to them.

It never fails that I seek to achieve something so simple which in turn ends up becoming so complex!

–James Wages

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

14

There’s one more trick you can try for this, and I can confirm that it works and is responsive. First, apply my PrefixFree Action to the page, or else get ready to type a lot of different browser prefixes into your CSS.

Instead of using top with a negative pixel value, use this:

transform: translateY(-50%);

Do that to your picture, and it will float up to halfway. Unfortunately the text to the right of it will appear a little low. So to fix that, you also need to float the picture up half of its height. Make a new style in the Styles palette with the Tag set to #yourBoxName span, and use Extended to add the same transform value, plus display: inline-block.

Walter

On May 24, 2015, at 8:48 PM, JDW email@hidden wrote:

Thanks, Walter, it’s now popping outside its box as it should.

I now just need to figure out how to get the graphic and the text to vertically center with respect to each other inside the same colored box. I normally use a table for vertical centering since it’s fast and easy (put the graphic in the left cell and the text link in the right cell). Ernie taught me the proper “responsive” way as per the following thread:

http://freewaytalk.net/thread/view/161777

But the problem is that vertical centering method doesn’t allow me to select both the graphic and the text and put a link on both at the same time, such that mousing over the graphic will trigger HOVER on the text link.

I can hack together something that looks like its vertically centered on Macs using Safari, but if the text size changes on Windows or if the user makes the text size change, then the text will be off-center as show in this short screencast (no sound):

http://cl.ly/150c2k0e0P0g

Using a table, I can make them both vertically center perpetually, regardless of how the text shrinks or expands, but since they would be in separate cells in that case, I could not select both and apply a link to them.

It never fails that I seek to achieve something so simple which in turn ends up becoming so complex!

–James Wages

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

15

Sorry, this should have read float the text up half its height.

Walter

On May 24, 2015, at 9:58 PM, Walter Lee Davis email@hidden wrote:

also need to float the picture up half of its height

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

16

Walter, thank you for the guidance. I used your Action and code to put something together, but since the graphic and text are to be centered inside a colored DIV, the problem is that the PIC is fixed. So I can make the DIV grow or shrink with the text, but the PIC remains in a fixed location.

Here’s the FW7 doc: http://cl.ly/2d1Y1R1v3F0I

–James

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

17

In other words, it would look something like this to start:

But then when you increase the text size in the browser (set Safari to “Zoom Text Only” and then press CMD+ a few times), the text shouldn’t pop outside the gray box, the pic and text should remain vertically centered relative to each other, and remain centered in their gray container box.

—James W.

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

18

Take a look at the differences between yours and my fork of your changes: Edit fiddle - JSFiddle - Code Playground The business with translateY 50% and translateY -50% wasn’t arbitrary. By using the same distance in positive and negative directions on container and children, the element is centered vertically.

Walter

On May 25, 2015, at 5:20 AM, JDW email@hidden wrote:

In other words, it would look something like this to start:

Edit fiddle - JSFiddle - Code Playground

But then when you increase the text size in the browser (set Safari to “Zoom Text Only” and then press CMD+ a few times), the text shouldn’t pop outside the gray box, the pic and text should remain vertically centered relative to each other, and remain centered in their gray container box.

—James W.

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

19

And once you look at that, try fiddling with the padding on the gray box to be in ems rather than pixels. That way the padding will change when you zoom the text and remain proportional.

Walter

On May 25, 2015, at 11:05 AM, Walter Lee Davis email@hidden wrote:

Take a look at the differences between yours and my fork of your changes: Edit fiddle - JSFiddle - Code Playground The business with translateY 50% and translateY -50% wasn’t arbitrary. By using the same distance in positive and negative directions on container and children, the element is centered vertically.

Walter

On May 25, 2015, at 5:20 AM, JDW email@hidden wrote:

In other words, it would look something like this to start:

Edit fiddle - JSFiddle - Code Playground

But then when you increase the text size in the browser (set Safari to “Zoom Text Only” and then press CMD+ a few times), the text shouldn’t pop outside the gray box, the pic and text should remain vertically centered relative to each other, and remain centered in their gray container box.

—James W.

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

20

Walter, this is the first time I’ve really played with “em” padding. As such, it’s certainly MUCH easier to fiddle with it in jsfiddle than to accomplish it in Freeway. In Freeway with my gray box selected, if I open the Inspector and access Padding in the “Dimensions” section, I can type “2em” (and other em values) without problem. But if I click the Padding popup, choose Custom, then try to type different em values for Top/Btm versus Left/Right, Freeway converts them to px! Is that a limitation of em? Or is it a Freeway imposed limitation? If Freeway, is this imposed for a reason or is the functionality “just not there”?

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