StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCross-Browser Unique Shaped Link
text
Body
copied!<p>I'm working on a web app that will allow users to enter content and then submit it out to people's phones. It works like a charm, but I'm having some problem with the logo. The logo is the following:</p> <p><img src="https://i.stack.imgur.com/GaH00.jpg" alt="enter image description here"></p> <p>I have a button on the left that is a different link, which is why we don't want the logo link to cover it up.</p> <p>My first idea was to use a border-radius, but the angle at the bottom is too sharp for that. For example, if I use a border radius of: 0 0 75px 75px, it does the following:</p> <p><img src="https://i.stack.imgur.com/YPo0L.jpg" alt="enter image description here"></p> <p>So, if we make the angles bigger, let's say to: 0 0 100px 100px, it does the following:</p> <p><img src="https://i.stack.imgur.com/hxDpV.jpg" alt="enter image description here"></p> <p>(There's no difference.)</p> <p>If I increase the bottom left, it pushes out the bottom right, and vice versa. I ended up doing the following because there's no link on the right side.</p> <p><img src="https://i.stack.imgur.com/HQJN2.jpg" alt="enter image description here"></p> <p>There's still a small, minor space on the left, but it's way better. Except now there's a big link on the right, which might bother the end user because there shouldn't be anything there.</p> <p>So, we chose to use image maps and did the following:</p> <p><img src="https://i.stack.imgur.com/6BXyD.jpg" alt="enter image description here"></p> <p>And that works! ... kinda. The bottom left corner of the image now, above the red link, is a dead space. So, an alternative is we then make the bottom corner a different link. Let me illustrate.</p> <p><img src="https://i.stack.imgur.com/k2YPZ.jpg" alt="enter image description here"></p> <p>That fixes that. Until the user scrolls. As you can see, the logo (and header) are fixed. The navigation is not. The following then happens.</p> <p><img src="https://i.stack.imgur.com/4fAEP.jpg" alt="enter image description here"></p> <p>I'm using jQuery so it won't be hard then to get the distance scrolled, compare it to what navigation item is in that area and change that section of the image map to match it... but I feel I'm overkilling this.</p> <p>(And then, to top it off, different users have a different navigation...)</p> <p>Do you know of a similar solution? Or am I stuck with image maps and jquery link changes?</p> <p>Thanks a lot!</p> <p>Edit: To confirm the "dead space" I was linking to, please review the image below:</p> <p><img src="https://i.stack.imgur.com/xyD4o.jpg" alt="enter image description here"></p> <p>Even though the image map is around the shield, the shield is still an image and has square corners, leaving the corners an unlinkable area, unless another image map is made for that area. I did that, but because the navigation scrolls, that linked area no longer matches the navigation below it. A border-radius on the image map would kind of fix the issue also, but I've gone with a different approach.</p> <p>Hopefully that answers the question! </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload