Help with Interactive Periodic Table

Hi?

I’m working on an interactive periodic table, and I want the elements to show their data when my mouse hover over it.

This is what I have:

When I hover over Hydrogen, it appear, and when I continue to hover to other elements it will disappear, but if I continue to hover to the background it does nothing! :grimacing: I know why it work this way, but don’t know how to fix it.

Please help me! This is my first post, so please help! I register my account just to ask this question. Please, and thanks!

Sorry for any grammar mistake.

1 Like

Hello and welcome to the forum !

Great to have you here!

just set element = “”; prior to testing

If I may say, your program looks beautiful.

You might get leaner code if you would look into Object oriented programming.

Then you would have a class Element and derived from it a list with elements you can for loop over.

Warmest regards,

Chrisir


void checkHitbox() {

  element = "";

  test(1, 1, "H");
2 Likes

Thanks for the warm reply! :brown_heart: :brown_heart: :brown_heart: :brown_heart:
I solved it!
I added more hitboxes around the table so that when my cursor touched them, the variable “element” will turn to “~”(anything that represent “nothing” to you).

P.S. :
Sorry! I’m a noob at classes and arrays!!! :frowning:

2 Likes
  test(0,0,"~");
  test(1,0,"~");
  test(2,0,"~");
  test(2,1,"~");
  test(3,1,"~");
  test(3,2,"~");
  test(3,3,"~");
  test(4,3,"~");
  test(5,3,"~");
  test(6,3,"~");
  test(7,3,"~");
  test(8,3,"~");
  test(9,3,"~");
  test(10,3,"~");
  test(11,3,"~");
  test(12,3,"~");
  test(12,2,"~");
  test(12,1,"~");
  test(13,1,"~");
  test(14,1,"~");
  test(15,1,"~");
  test(16,1,"~");
  test(17,1,"~");
  test(17,0,"~");
  test(18,0,"~");
  test(19,0,"~");
  test(19,1,"~");
  test(19,2,"~");
  test(19,3,"~");
  test(19,4,"~");
  test(19,5,"~");
  test(19,6,"~");
  test(19,7,"~");
  test(19,8,"~");
  test(18,8,"~");
  test(17,8,"~");
  test(16,8,"~");
  test(15,8,"~");
  test(14,8,"~");
  test(13,8,"~");
  test(12,8,"~");
  test(11,8,"~");
  test(10,8,"~");
  test(9,8,"~");
  test(8,8,"~");
  test(7,8,"~");
  test(6,8,"~");
  test(5,8,"~");
  test(4,8,"~");
  test(3,8,"~");
  test(2,8,"~");
  test(1,8,"~");
  test(0,8,"~");
  test(3,7,"~");
  test(3,6,"~");
  test(0,7,"~");
  test(0,6,"~");
  test(0,5,"~");
  test(0,4,"~");
  test(0,3,"~");
  test(0,2,"~");
  test(0,1,"~");
  test(1,9,"~");
  test(1,10,"~");
  test(1,11,"~");
  test(2,11,"~");
  test(3,11,"~");
  test(4,11,"~");
  test(5,11,"~");
  test(6,11,"~");
  test(7,11,"~");
  test(8,11,"~");
  test(9,11,"~");
  test(10,11,"~");
  test(11,11,"~");
  test(12,11,"~");
  test(13,11,"~");
  test(14,11,"~");
  test(15,11,"~");
  test(16,11,"~");
  test(17,11,"~");
2 Likes