×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

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

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

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

(OP)
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.

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

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?

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

(OP)
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.

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

Hi

That doesn't really match :

CODE --> PHP code

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

CODE --> generate HTML

<a href="images/ 2.jpg">Moon Phase: Waxing Crescent</a></span><span class="hiddenimg"><img src="images/2.jpg" width="125"/> 

So apparently <?php echo $theimage;?> is used twice but $theimage's value first is " 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

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

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

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

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>

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close