Img Anchor Tag

HTML & CSS
1

I added an anchor tag to an image and it hovers perfectly fine
in my HTML email on my code editor https://codepen.io/csosa7/pen/prPLMP

But when I send the test email, it does not hover.

2

What you do mean it “hovers” just fine? That the link works? Or you have some special effects on hover? Or the cursor turns to a hand? Or it actually goes to the linked page?

Obviously HTML email supports <a> links so as long as your markup is correct, this should work to create a link. It won’t work if email in plain text mode and only shows raw html or strips it out.
If the email app blocks the picture from loading, the link might not work without it’s picture loaded.

So what do you mean it “does not hover”?

3

I mean the cursor does not turn into a hand in my email
client.

See below.

4032Ă—3024 2.18 MB

4

OK, so I assume the link works though and your HTML must be correct.

Do you see the hand icon for other links in emails you receive? Email clients will process HTML however they want to, so some clients might simply not show a hand period.

You could also try adding css to the link such as cursor:pointer; to see if that increases client support for the hand to show up.

Either cursor:pointer will work, or the client will automatically do whatever it will do for <a> links by default. Not much else you can do. Email clients are notoriously bad at processing HTML consistently. You couldn’t pay me enough to try and design an HTML email that will look exactly the same in every possible email client!

1 Like
5

Yeah

<table id="main-table" style="border:none;" width="600">
	<tbody>
		<tr>
			<td style="border:none"><img alt="" height:="" id="header" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_01.jpg" style="border-width: 0px;border-style: solid;padding-left:0px;padding-right:0px;display:block" width="600" /></td>
		</tr>
		<tr>
			<td style="border:none">
			<table style="border:none;font-size:18px;">
				<tbody>
					<tr>
						<td style="border:none;vertical-align:top;"><img alt="icons" class="icon-sections" height="165" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_02.jpg" width="200" /></td>
						<td style="border:none;">
						<p id="intro"><strong>Hi ~Contact.FirstName~,</strong><br />
						<br />
						Below is a direct link to the<br />
						YTU Pose of the Week video:<br />
						<br />
						<strong>Weekly Pose</strong>: %pose_name<br />
						<br />
						<strong>Therapeutic Benefits:</strong> %therapeutic_application</p>
						</td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td style="border:none"><a href="https://www.tuneupfitness.com/weekly-yoga-pose"><img src="%email_image" width="600" /></a></td>
		</tr>
		<tr>
			<td style="border:none;"><img alt="" src="https://tuneupfitness.stage.avatarnewyork.com/sites/default/files/email_images/pose_notification_redesign_email_final_06.jpg" width="600" /></td>
		</tr>
		<tr>
			<td style="border:none;"><a href="https://www.tuneupfitness.com/shop/yoga-at-home-program"><img alt="" src="https://tuneupfitness.stage.avatarnewyork.com/sites/default/files/email_images/pose_notification_redesign_email_final_07.jpg" style="width: 600px;cursor:pointer;" /></a></td>
		</tr>
		<tr>
			<td style="border:none;">
			<p id="outro" style="color:#788767; margin-left:35px;">Warmest,<br />
			Jill Miller<br />
			Creator, Yoga Tune Up®</p>
			</td>
		</tr>
	</tbody>
</table>

Yes I do.

Yeah now the cursor showed up, but the question is will the link work when I click on it.

6

Good to hear! Ya changing the cursor in CSS doesn’t affect functionality of a link.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.