Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1

waubain · Nov 18, 2020

I have text embedded in a <td> that displays the current phase of the moon (via a php script). If you hover over the text a small image of the moon in that phase appears below the text. All this works as it should.
The problem is if the user clicks on the text, they get a error:

"Not Found The requested URL was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Here is the html line that displays the moon phase and triggers the image if moused over

Code:

<td class="desc-td"><span class="hiddentxt"><a href="images/<?php echo $theimage;?>">Moon Phase: <?php echo $thephase;?></a></span><span class="hiddenimg"><img src="images/<?php echo $theimage;?>" width="125"/></span></td>

I tried to use a php ternary operator to test for a valid link and I also tried css: pointer-events: none; but could not get either to work.

Can anyone suggest a solution so if the user clicks on the text nothing will happen?

Thank you.

spamjim · Nov 19, 2020

What does the generated HTML look like once it is in the browser?

What JS are you using to show the image on mouse over?

waubain · Nov 19, 2020

Here is a link to my page in question. Link
If you hover over the Moon Phase an image appears. If you click on the text an error occurs which is what I am trying to prevent.

There is no js, only css which is below.

Code:

    <style>
        .hiddenimg {
          display: none;
          position: absolute;
          right: 110px;
          top: 40px;
          z-index: 1;
        }
        .hiddentxt:hover ~ .hiddenimg {
          display: inline;
        }       
        img {
            border-radius: 10%;
        }
    </style>

Thank you.

feherke · Nov 19, 2020

Hi

That doesn't really match :

Code:

<a href="images/[highlight pink]<?php echo $theimage;?>[/highlight]">Moon Phase: [highlight lime]<?php echo $thephase;?>[/highlight]</a></span><span class="hiddenimg"><img src="images/[highlight aqua]<?php echo $theimage;?>[/highlight]" width="125"/>

Code:

<a href="images/[highlight pink] 2.jpg[/highlight]">Moon Phase: [highlight lime]Waxing Crescent[/highlight]</a></span><span class="hiddenimg"><img src="images/[highlight aqua]2.jpg[/highlight]" width="125"/>

So apparently [tt]<?php echo $theimage;?>[/tt] is used twice but $theimage's value first is "[highlight red] [/highlight]2.jpg" then "2.jpg". Looks like the code you posted initially got changed in meantime.

Anyway, you should hunt down the source of that extra space character and eliminate it. Then clicking will lead to the image.

Feherke.
feherke.github.io

waubain · Nov 20, 2020

feherke,
I found the extra space and removed it and I no longer get the error. Thank you.

jjgupta915 · Jan 20, 2021

hi this is bset way to write HTML for image not found

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>
Example to hide the 'Image Not Found' icon i.e.
<img src="error.png" width="20px" />
</h2>
<img id="HideImg" src="geeksforgeeks-6.png" />
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1

waubain

Technical User

spamjim

Instructor

waubain

Technical User

feherke

Programmer

waubain

Technical User

jjgupta915

Technical User

Similar threads

Part and Inventory Search

Sponsor