Creating Hover Effect over Existing text in html, Hover Effect Pop Up Options

[TPhillips]

Hello all, Please excuse my obvious lack of html/CSS coding prowess but I have been tasked with what seems to be an incredibly arduous task. I have a web page that is already complete. I have been asked to make a word that is on the page
"hoverable" so that when the end-user hovers over it with their mouse, it automatically pops up a detailed chart (image). The chart image naturally disappears once the end-user removes the mouse pointer off of the text. Can this even be done and if so, exactly where would I place the code in the current html file and assuming also the CSS file? I attached both files if someone here would be willing to look at them. This just has me so frustrated because evidently, I'm too stupid to figure it out.

Example: Line 119 in html file attached[i]> The word "STATUS" would need to become hoverable. It needs to also remain a clickable link as it is currently. Just cannot figure it out.

Thank you in advance.

[pandy]

And what should appear and where?

[TPhillips]

And what should appear and where?

I would just need to image to appear in the lower center of the page regardless of the screen size...the image will be something like the one attached[b].I would just say have it viewable at the lower third of the viewable page at 100%. I can certainly replace the image if needed later.


Other option:??? Maybe the image can have it's own option to be viewed at 100% or higher and be closed manually??? That may be getting too complicated for me.

[pandy]

OK, and overlap the text?

While it can be done with CSS, the easiest is JS and the easiest to understand is old school JS.

Place this either in a script block in HEAD or in a linked to js file.

CODE

  function showIt()
  {
     document.getElementById('chart').style.display = 'inline';
  }
  
  function hideIt()
  {
     document.getElementById('chart').style.display = 'none';
  }

Add this to your style sheet.

CODE

  #chart       { position: absolute;
                 bottom: 30%; left: 50%;
                 margin-left: -200px;
                 display: none }

That will hide the chart and place it in the middle and 30% form the bottom when we show it.


Add the image at the bottom of the page, just before </body> . Note that ju must give it the same ID that's used by the JS and CSS.

HTML

<div>
<img src="https://forums.htmlhelp.com/uploads/post-27820-1614195255_thumb.jpg" widht="400" height="204" alt="Blah blah" id="chart">
</div>

Call the script snippets from the link.

CODE

<a href="https://myfedex.sharepoint.com/teams/EnterpriseArchitectureSPARXEA" target="https://myfedex.sharepoint.com/teams/EnterpriseArchitectureSPARXEA" target="_parent" class="text-black" onmouseover="showIt()" onmouseout="hideIt()">

Try it and ask about the bits you don't understand. No need for me to explain what you do understand, I think.

[TPhillips]

OK, and overlap the text?

While it can be done with CSS, the easiest is JS and the easiest to understand is old school JS.

Place this either in a script block in HEAD or in a linked to js file.

CODE

  function showIt()
  {
     document.getElementById('chart').style.display = 'inline';
  }
  
  function hideIt()
  {
     document.getElementById('chart').style.display = 'none';
  }

Add this to your style sheet.

CODE

  #chart       { position: absolute;
                 bottom: 30%; left: 50%;
                 margin-left: -200px;
                 display: none }

That will hide the chart and place it in the middle and 30% form the bottom when we show it.


Add the image at the bottom of the page, just before </body> . Note that ju must give it the same ID that's used by the JS and CSS.

HTML

<div>
<img src="https://forums.htmlhelp.com/uploads/post-27820-1614195255_thumb.jpg" widht="400" height="204" alt="Blah blah" id="chart">
</div>

Call the script snippets from the link.

CODE

<a href="https://myfedex.sharepoint.com/teams/EnterpriseArchitectureSPARXEA" target="https://myfedex.sharepoint.com/teams/EnterpriseArchitectureSPARXEA" target="_parent" class="text-black" onmouseover="showIt()" onmouseout="hideIt()">

Try it and ask about the bits you don't understand. No need for me to explain what you do understand, I think.

I will try this first chance I get in the AM. Thanks so much..we shall see how much I mess up....or......if I can pull it off!

[TPhillips]

This, unfortunately, did not work completely right but it's SOOOO Close! The image shows up at the very bottom and attempts to "push" the entire page and results in a jumpy mess.
I believe that this is MY FAULT> Is there a way to adjust it so that it appears OVER the center of the page? I mean I just want it as an "Overlay" and then I can adjust just how big the image needs to be and the coordinates.
I misspoke and stated at the bottom and I also did not answer your question about overlaying it...and "yes" I do want it as an overlay on the page. (Over the text)

FIRST: I created a .js file and added that first block of code that you provided to me in there. I called Cardhover.js

SECOND: I added your second block of code to my existing CSS. I placed it at the bottom.

THEN: I added your 3rd block of code to the html (index) file at the bottom being careful to place it just before </body> .

THEN: I added the "call Up" in the html (to the line of code that references the word "STATUS")

NOTE: AND THIS IS MY FAULT: I did not specify that I would like the image popup to appear OVER the page text. (not at the bottom). I may have stated I wanted it at the bottom but I misspoke. I want it so that it is clearly visible over the face of the page.

This post has been edited by TPhillips: Feb 25 2021, 11:10 AM

[pandy]

It should overlay the text.

You see it, but not where you want, so I guess it's the CSS that went wrong. Could you post the relevant bits as you have them now? Or better post the whole thing maybe.

[TPhillips]

It should overlay the text.

You see it, but not where you want, so I guess it's the CSS that went wrong. Could you post the relevant bits as you have them now? Or post the whole thing.

 mbr_additional.css ( 45.47k ) Number of downloads: 191
 index.html ( 10.91k ) Number of downloads: 186


OK,..now its overlaying BUT...it stutters (flickers) like crazy...hmmm,..wondering if its just a postioning thing? Maybe I need to have it just off to the left or something??? Is it conflicting with the current javascript that enables the boxes to darken and lighten as they are hovered over? I have a video clip (very small file 414KB) that illustrates what is happening but OF COURSE it won't let me upload it here.

Here is the link to the video that illustrates what is happening during my tests:
Flickering Issue

This post has been edited by TPhillips: Feb 25 2021, 12:19 PM

[pandy]

There is no reference to mbr_additional.css in the HTML. Did you rename it when you uploaded it here? And the is no SCRIPT tag either.

[TPhillips]

There is no reference to mbr_additional.css in the HTML. Did you rename it when you uploaded it here? And the is no SCRIPT tag either.

Yes:
In the HTML:
Lines 119, 183 and 188

[pandy]

If I add those it works, but the chart shows up a bit from the top of the page, not 30% from the bottom as intended. So there must be some CSS conflict.

It could be worse on the real page too, since you have a bunch of canned CSS that you link to and I can't see the effect of that.

[TPhillips]

If I add those it works, but the chart shows up a bit from the top of the page, not 30% from the bottom as intended. So there must be some CSS conflict.

It could be worse on the real page too, since you have a bunch of canned CSS that you link to and I can't see the effect of that.

OK,..well...It was worth a shot and do appreciate your time more than you know. I guess it is just going to have issues. It likely needed to be baked in from the page's inception.
I may try and remove the block shading java script and see if that has any positive impact but assuming it won't.

Thank you.

[TPhillips]

If I add those it works, but the chart shows up a bit from the top of the page, not 30% from the bottom as intended. So there must be some CSS conflict.

It could be worse on the real page too, since you have a bunch of canned CSS that you link to and I can't see the effect of that.

OK,..well...It was worth a shot and do appreciate your time more than you know. I guess it is just going to have issues. It likely needed to be baked in from the page's inception.
I may try and remove the block shading java script and see if that has any positive impact but assuming it won't.

UPDATE: removing the other JavaScript that controls the hover shading effect on the 3 blocks (squares) had no positive effect. What a shame because the pop up appears but the flickering
is just insane and makes it unusable. Not sure where the conflict is. It's almost like the pop up is not superseding everything else and is competing with something.



Thank you.

[pandy]

There is no reference to mbr_additional.css in the HTML. Did you rename it when you uploaded it here? And the is no SCRIPT tag either.

Yes:
In the HTML:
Lines 119, 183 and 188

No. There is no script tag in the whole page and the word mbr_additional can't be found either. We must be looking at different documents.

[pandy]

If I add those it works, but the chart shows up a bit from the top of the page, not 30% from the bottom as intended. So there must be some CSS conflict.

It could be worse on the real page too, since you have a bunch of canned CSS that you link to and I can't see the effect of that.

OK,..well...It was worth a shot and do appreciate your time more than you know. I guess it is just going to have issues. It likely needed to be baked in from the page's inception.
I may try and remove the block shading java script and see if that has any positive impact but assuming it won't.

UPDATE: removing the other JavaScript that controls the hover shading effect on the 3 blocks (squares) had no positive effect. What a shame because the pop up appears but the flickering
is just insane and makes it unusable. Not sure where the conflict is. It's almost like the pop up is not superseding everything else and is competing with something.



Thank you.

Well, if you can link to the page on the web so I can see everything I might be able to figure it out. For example that other JavaScript you talk about isn't referred to in the HTML you uploaded either.

No promise though. I don't want to dig too deep into those libraries you use.

[TPhillips]

Well, if you can link to the page on the web so I can see everything I might be able to figure it out. For example that other JavaScript you talk about isn't referred to in the HTML you uploaded either.

No promise though. I don't want to dig too deep into those libraries you use.

Wish I could link to the actual page but its behind a firewall.
HOWEVER It is actually referenced in the html I sent you.
(see line 182) it's called "cardLowlight.js)

Another thing I noticed.
When I removed the onmouseout="hideIt()" from the call Up (line 119) in the html (to the line of code that references the word "STATUS") the flickering stops...but unfortunately now there is no way to close the pop up. Maybe a way to add an option to manually close it?

This post has been edited by TPhillips: Feb 25 2021, 02:06 PM

[pandy]

Wish I could link to the actual page but its behind a firewall.
HOWEVER It is actually referenced in the html I sent you.
(see line 182) it's called "cardLowlight.js)

Yes, it is! Sorry. my Find tool must have been stuck on case sensitive or something. But I still don't see that CSS.

I can't help with this if you can't make everything available. You have a lot of CSS and (as I know now) a lot of JS that I can't see the effect of. No way to know what messes up. It would still be hard if you had it on the web. Those libraries and stuff aren't easy to deal with.

Why do you need all of that BTW? Most often people just plug everything they find in even if they have no or minimal use for it. It makes everything more complicated and slows down the page. Not saying you do that, I'm just curious.

[TPhillips]

Wish I could link to the actual page but its behind a firewall.
HOWEVER It is actually referenced in the html I sent you.
(see line 182) it's called "cardLowlight.js)

Yes, it is! Sorry. my Find tool must have been stuck on case sensitive or something. But I still don't see that CSS.

I can't help with this if you can't make everything available. You have a lot of CSS and (as I know now) a lot of JS that I can't see the effect of. No way to know what messes up. It would still be hard if you had it on the web. Those libraries and stuff aren't easy to deal with.

I understand. Here is something I did manage to figure out. I took the code you gave me for the CSS and altered the margin-left:

I changed it to -700px and that shifts the box off of the "STATUS" box and then it works. But I noticed if I shrunk my screen size down to simulate a smaller screen from a user..the box is naturally cut off a bit.

this tells me that the solution for now may be in just finding a better position.

[pandy]

OK. That's because your chart doesn't have the same size as the image I used. I centered the box horizontally. But that trick is depending on the actual width of the box.

If you position a box absolute and give it a left offset of 50%, that will place its left edge exactly in the middle of the page. We probably don't want that, so to center it you then move it to the left by half its own width, using e negative left margin. Then the center of the box will be in the center of the page.

So if the box is 500px wide, you get the below. Say the box has the id #box.

CODE

#box    { position: absolute; left: 50%;
          margin-left: -250px }

[TPhillips]

OK. That's because your chart doesn't have the same size as the image I used. I centered the box horizontally. But that trick is depending on the actual width of the box.

If you position a box absolute and give it a left offset of 50%, that will place its left edge exactly in the middle of the page. We probably don't want that, so to center it you then move it to the left by half its own width, using e negative left margin. Then the center of the box will be in the center of the page.

So if the box is 500px wide, you get the below. Say the box has the id #box.

CODE

#box    { position: absolute; left: 50%;
          margin-left: -250px }

Pandy,..I wanted to take this quick moment to say thank you. Thanks for helping me out and providing a solution to my particular challenge. I know many people come to these forums, post their problems, get answers, and never offer acknowledgment or appreciation for the help.
I DO appreciate it and just wanted to extend my gratitude.

Take care.