-2

OK, so This may have parallel questions like this one but I still have not quite got what I am aiming at.

EDIT: As this question attracted negativity, I need to point out that I am requesting guidance on how it is done. I have googled around and found jQuery solutions to similar scenarios - including the link I gave above. I'm not being stupid, I'm just genuinely asking for guidance and help from the tech community. So, that said... here's the situation:

I want to make a png image of an arrow rotate to point to the tabs of the menu in a wordpress site - so if you hover over the menu link, the image points at it too, but when you mouse away, the image returns to normal orientation.

I don't want it to totally follow the mouse at all times, just when the mouse is over a menu item.

Can anyone guide me as to the simplest way to do this?

Community
  • 1
  • 1
Bevan
  • 566
  • 4
  • 7
  • 19
  • Please share what code you have tried already? – Tim Dec 09 '16 at 09:51
  • Acutally, he tried nothing ... http://stackoverflow.com/help/how-to-ask – Deadpool Dec 09 '16 at 09:56
  • Hey I have some weird bug in my Wordpress website, do you know how to fix it? – sdvnksv Dec 09 '16 at 09:58
  • @Deka87 - Start your own thread and there's many more than me who can help – Bevan Dec 10 '16 at 08:19
  • @Deadpool that's a bit harsh. I want to understand what is required before I try and implement it. So of course I've tried nothing yet. I'll edit the question to make it clearer. – Bevan Dec 10 '16 at 08:21
  • @varlogtim I've not run any code yet, I'm looking for guidance. – Bevan Dec 10 '16 at 08:21
  • 1
    This is an interesting request. You would need a menu of known dimensions. You know the images distance away from the menu, then determine the distance to the left or the right of a midpoint. Then: a^2+b^2=c^2. Then use sin, cos, or tan to determine the angle of the "triangle". (Otis/Had A/Hit Of/Acid) Then rotate the image accordingly. – Tim Dec 10 '16 at 08:28
  • OK, sounds clear enough. However, the menu resizes with the device viewing it, so the 'known dimensions' will change – Bevan Dec 10 '16 at 08:31

1 Answers1

1

I believe that this can be done with a "responsive" layout as well, i.e., one that works on different screen resolutions/sizes.

The position of elements on screen can be determined and is explained here: Retrieve the position (X,Y) of an HTML element

Since we are able to determine the position and size of the menu items, we can determine two side of a triangle; from the arrow to the menu item. Then using Pythagorean Theorem, you can calculate the length of the Hypotenuse. Then using the properties of sine, cosine, and/or tangent you can calculate the angles of the triangle and rotate the arrow appropriately.

This is how you would write the code. I may write it at some point in the future.

Community
  • 1
  • 1
Tim
  • 2,139
  • 13
  • 18
  • Thanks. Give me a couple days and I'll report. – Bevan Dec 10 '16 at 09:10
  • If you write the code for it, and it is dynamic, for sure post it because that would be cool! Good post, in my opinion! – Tim Dec 10 '16 at 09:28
  • I never built this in the end, but used sprites and a:hover instead. But your answer was the best and most informative so I've accepted it as the answer. – Bevan Jan 18 '17 at 11:16