having an issue with a page getting the email to open from a picture

Question

I am making a new web page, and has been a while since I written any code. my issue is that I am trying to use a picture as part of the page and have also as my email link. can someone please check my code and tell me what I am doing wrong, the picture works but it doesnt do anything when I load the site to my host. the back ground picture works fine but the slot is the one I am having issues with here is what I have:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="flavicon icon" href="http://carymcclure.com/favicon.ico" /> 
   <style>
  
body {
background-image: url(../img/background.gif);
background-repeat: no-repeat;           
  }
  </style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Cary McClures' Portfolio</title>
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
</head>
<body background="../img/background.gif" class="embed-responsive">

    <a href: mailto:chef@carymcclure.com>
    <img style="float:right; margin-right:150px; margin-top:350px" 
    <img src="../img/slot.gif" width="216" height="89" alt="email"/></a>
</body>
</html>

also having issue with my code for the flavicon - doesnt load.. any help would be greatly appreciated.

thanks but the problem is I don't want any text just the picture I already have placed, how would I code that? — chef cj, Jul 29 '21 at 00:00
guess what I am trying to say is using all the image information how would I code that to link email? — chef cj, Jul 29 '21 at 00:02

score 0 · Answer 1 · answered Jul 29 '21 at 00:15

You have a typo in your anchor tag:

<a href: mailto:chef@carymcclure.com>
<img style="float:right; margin-right:150px; margin-top:350px" 
<img src="../img/slot.gif" width="216" height="89" alt="email"/></a>

That href is not valid. href is an attribute, so the syntax is

<a href="mailto:emailaddresshere">content here</a>

MDN reference

You also have two image tags, with the first one being incomplete. Not sure what you're trying to do there.

For your code, that means something like this should work (slightly formatted, so that you can see the changes a bit better):

<a href="mailto:chef@carymcclure.com">
    <img 
        style="float:right; margin-right:150px; margin-top:350px" 
        src="../img/slot.gif" 
        width="216" 
        height="89" 
        alt="email" />
</a>

I eliminated one image tag, assuming that there was only supposed to be one image with a picture of your email address (not a great idea, and I'm not sure why you're doing that, but that's a long discussion that belongs somewhere else).

You might have issues with the image itself rendering; that local path has to resolve relative to where the email message is stored once retrieved. You probably need to make that an absolute link to where it resides on your server, or read up on embedding images in your message (for example) and adjust the path accordingly.

thanks so much i will give these a try and look in to the embedding. — chef cj, Jul 29 '21 at 20:27

score 0 · Answer 2 · answered Aug 06 '21 at 13:25

In fact, you have 2 typos issues in your code.

Missing = sign in href attribute of the tag.
First <img> tag has no ending tag.

Please check the correction below.

<body background="../img/background.gif" class="embed-responsive">
    <a href="mailto:chef@carymcclure.com">
    <img style="float:right; margin-right:150px; margin-top:350px"/> 
    <img src="../img/slot.gif" width="216" height="89" alt="email"/>
    </a>
</body>

having an issue with a page getting the email to open from a picture

2 Answers2