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!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.

waubain

Technical User
Dec 13, 2011
200
US
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.

 
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?
 
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.
 
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
 
feherke,
I found the extra space and removed it and I no longer get the error. Thank you.
 
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>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top