Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Jun 2019
    Posts
    21

    Default mouseover on two line text link does not highlight the whole text

    I'm wondering if someone can help me.
    Take a look at the footer on my site at https://www.hudsonriverinlay.com.
    When you mouseover, the links are highlighted as specified in my "common website link colors" settings (I'm not using underlines).
    However, the text of the links is separated into two lines, and thus the mouseover highlight occurs separately on each line!
    The expected behavior is that the entire text block (top and bottom lines) should both be highlighted simultaneously during the mouseover, not each line separately.
    Does someone know how to fix this?
    Thank you

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    13,986

    Default Re: mouseover on two line text link does not highlight the whole text

    It is a "feature" specific to Xara as your text is broken into SPANs across lines and the link is separately applied.

    I came up with this naff solution many years ago: https://www.talkgraphics.com/showthr...-on-my-website.
    It still works but I wouldn't endorse it.

    If you only have a couple then I would create and group a couple ofText Lines with the hyperlinked text repeated and also give this the same link.
    After you position over the current link, move it to the MouseOver layer.
    Now when you hover over the original all of the MouseOver text pops up.

    I keep holding back expecting Xara to actually deliver a better HTML rendering that would overcome the need for such kludges.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  3. #3
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    39,775

    Default Re: mouseover on two line text link does not highlight the whole text

    Moved to Web Design Chat.
    Gary W. Priester
    Mr. Moderator Emeritus Dude
    , Sir

    gwpriester.com | Custom-Stereograms.com | eyeTricks on Facebook






  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,723

    Default Re: mouseover on two line text link does not highlight the whole text

    Slightly different approach. Preview the attached xar for details.
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    13,986

    Info Re: mouseover on two line text link does not highlight the whole text

    Quote Originally Posted by Egg Bramhill View Post
    Slightly different approach. Preview the attached xar for details.
    Thanks for this Egg.

    It is fine for buttons where you can define a Rectangle.
    You don't get a simple shape for a phrase across two line of wider text in a large Text Area.

    Another method, where the Background is White, this to place connected boxes over the text and the gap between and Add Shapes.
    You move this to MouseOver, add the same Link and then Screen (Bleach) it.
    On hover all text under is tinted to the colour of the shape.

    This is my best and final offer:

    • Add 'htmlblocktext' to the Text Area.
    • Separate out links so there is only ever one in a paragraph.
    • Add this CSS to the Website Code (head):

    <style>
    p:hover > a {
    color: red;
    }
    </style>

    • Change the 'color' to match your MouseOver link colour.


    All links in a paragraph will all change to the MouseOver colour when you hover over any so a single link spanning many lines will now change colour as a single action.
    Any changes to the text layout are now automatically handled.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  6. #6
    Join Date
    Jun 2019
    Posts
    21

    Default Re: mouseover on two line text link does not highlight the whole text

    Thanks to you all for these options. I'm working on it.
    Re. Acorn's solution - I'd like to use your "final offer" but when I add the name 'htmlblocktext' to the Text Areas and preview, all the text disappears! Strange - I thought perhaps because of the font, so I tried a "web safe font" but that also disappears in the preview.
    re. Egg's solution - I downloaded and tested. Very nice, I'll probably use this approach and fix it when I get more time. Thank you!
    I'll update you all here when I get a chance to finish this.

  7. #7
    Join Date
    Jun 2019
    Posts
    21

    Default Re: mouseover on two line text link does not highlight the whole text

    I finally got this fixed at https://www.hudsonriverinlay.com/ using Egg's solution. Egg, I wonder how you came up with that. Was it just trial and error or is there some principle behind it that makes it work?
    Acorn I have no idea why I couldn't get your method to work. Adding htmlblocktext as a name somehow causes the textblock to disappear in the preview, do you have any idea why?
    Thanks again to all for your help.

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,723

    Default Re: mouseover on two line text link does not highlight the whole text

    prman,
    Glad it works for you.

    I dislike the way xara creates it's navbars which creates too many small images slowing down the page load. I now create text (with no links) in the MouseOff layer. I copy it and Ctrl+Shift + V to paste it in place on the MouseOver layer. If you preview it at this stage the MouseOver layer doesn't show as there's no trigger to open it.

    Next create a rectangle over your text blocks in the MouseOver layer. They can also be rounded rectangles but as they're not visible there's not much point, just retain them as rectangles.
    Apply a url link.
    Set the rectangles to 99% alpha.

    Preview again and the MouseOver layer should fire.

    One slight issue with using this method is the text in the MouseOff layer remains visible under the MouseOver layer, so a colour change in the over layer might be fringed by the under layer, or you may wish the MouseOff layer to have a bold style whilst the MouseOver layer is not bold, so the under layer will show through. It's simple to overcome however by just placing a rectangle below the text on the MouseOver layer the same colour as the navbars colour.

    As you're only using rectangles the browser can render them as such & NOT an image. Further if the visitor zooms in/out on the browser these 'buttons' remain sharp whereas Xaras image based buttons start to look less sharp.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    13,986

    Info Re: mouseover on two line text link does not highlight the whole text

    Quote Originally Posted by prman View Post
    I finally got this fixed at https://www.hudsonriverinlay.com/ using Egg's solution. Egg, I wonder how you came up with that. Was it just trial and error or is there some principle behind it that makes it work?
    Acorn I have no idea why I couldn't get your method to work. Adding htmlblocktext as a name somehow causes the textblock to disappear in the preview, do you have any idea why?
    Thanks again to all for your help.
    prman, sorry you haven't had a chance to try my approach.

    Here is a play file with a number of options: CSS - Multiline Links.xar
    For your specific need, Egg's will suffice.

    Acorn

    P.S. I have extended the CSS to include H1/H2/H3 Tags.
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  10. #10
    Join Date
    Jun 2019
    Posts
    21

    Default Re: mouseover on two line text link does not highlight the whole text

    Thanks Egg for the further explanation. I will probably use this method from now on

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •