Is there a way to include an email string attribute within an anchor tag in HTML?

Looking for a solution

<img class="img_thumb" src="images/cropped9.jpg" author-email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78f928e9d8f888980a78f88938a868e8bc984888a">[email protected]</a>">

along with

<a class="email" href="mailto:"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee869b879486818089ae86819a838f8782c08d8183">[email protected]</a>"</a>

I am trying to create a clickable email link, and I have followed the instructions to do the following:

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3abb6aab9abacada483abacb7aea2aaafeda0acae">[email protected]</a>"></a>

However, my email is within an img attribute. How can I include it in the href?

Your help is appreciated.

Answer №1

To extract the attribute author-email from the img element and assign it to the a element's href attribute, you can utilize the .getAttribute method.

Check out this Fiddle for demonstration

var image = document.getElementsByClassName('img_thumb')[0];

var a = document.getElementsByClassName('email')[0];
a.href = "mailto:" + image.getAttribute('author-email');

console.log(a)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The sticky position is failing to function properly when I set the float property to the left on other

I noticed that the position sticky for the header stops working once I add float:left to another element. The tricky part is, if I remove the float:left from main>div, the sticky header works fine. Despite my efforts to find a solution through Google, n ...

Angular Bootstrap Modal not Displaying

<img id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='assets/barrel.jpg' alt='Text dollar code part one.' /> <div id="myModal" class="modal fade" *ngIf="isModalShowing"> <div class=" modal-lg ...

The "Selected" option does not function properly within Angular's reactive form implementation

I am facing an issue with my dropdown menu where I want the first option to be selected by default, but it is not working as expected. I suspect that the problem lies in how I initialized the control with a default undefined value in the .ts file. Even whe ...

What is the best method for automatically closing the modal window?

I implemented a modal window on my website. Within the modal, there is a green button labeled "Visit" which triggers the "Bootstrap Tour". I aim for the modal to automatically close when the tour starts. To access this feature on my site, users need to ...

Disappearing Bootstrap 3 Dropdown Issue Caused by Tab Click

There is an issue with the drop-down menu I created: When I click on tabs like ALL or FILM, it closes all elements. To reopen, I have to click again on the button PRODUCT.dropdown-toggle. The code example looks like this: var App = function () { ...

Change the background color of the final menu item to stand out and fill the remaining space

The menu appears as a full-screen background, but the actual menu items are of fixed width. The last item in the menu is displayed in a different color. <div class="nav"> <ul> <li><a href="#">Link</a></li> <li& ...

Creating equality in height among input file fields and other elements with Bootstrap 5

Utilizing a straightforward template to display a registration form with a file attachment field: /* facing an issue when adjusting the height for myself */ .mycustom { line-height: 2.75; z-index: 999; } <!-- <a href="/cdn-cgi/l/email-protecti ...

How can I improve the empty space in HTML after PHP processing?

Here are the lines displayed in HTML: <a href='http://www.1stheme.dev/?frontiles=1946'> <article class="post-1946 frontiles type-frontiles status-publish hentry Width_1_Height_1 " style="width:326px;height:326px;text-align:left;" id="po ...

Adding text to an image using PHP's GD library

I am facing an issue with my image creation code in image_creator. <?php header("Content-Type: image/jpeg"); $im = ImageCreateFromGif("photo.gif"); $black = ImageColorAllocate($im, 255, 255, 255); $start_x = 10; $start_y = 20; Imagettftext($im, 12, 0, ...

Is there a way to create a JavaScript script that automatically updates a webpage for all users simultaneously?

I have developed a web application that enables users to modify content using JavaScript. Currently, these changes are only visible on the local browser and do not involve AJAX. However, I am wondering how I can ensure that these DOM alterations are refle ...

Issue alert with Vue animations

I have created a functional demonstration of VUE JS menu animation. However, I am encountering an issue due to having two root elements inside the menu component, resulting in the following warning: [Vue warn]: Runtime directive used on component with no ...

Are events flaring up, yet yielding no results?

I've been following a course on Pluralsight about creating web apps using .NET Core. The instructor uses jQuery version 2.4.3, but I decided to use the latest jQuery version 3.x. I copied the code exactly as shown in the course: (function () { v ...

Personalized program name appears when CTRL key is pressed

How can I create a custom title that only appears when the CTRL button is pressed? Example: Normally, the title will not display when the mouse hovers over it. However, if the user holds down the CTRL button while hovering over the title, it will appear. ...

How can one transform a web-based application into a seamless full-screen desktop experience on a Mac?

"Which software can be utilized to enable a web application to display an icon on the desktop of a Mac computer, while also opening up the web application in a fully immersive full-screen mode that supports all the touch and gesture functionalities provi ...

Can 'fr' units be used in the `calc()` function of CSS?

In this particular scenario, the query arises whether the CSS calc() function extends its support to the fr unit as presented in the below example? .sample-grid { --main-fr: 60fr; grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr ...

Contrasting click() with dispatchEvent for triggering a click event

While exploring a webpage, I accidentally came across an HTML button that caught my attention. Intrigued, I decided to experiment with programmatically clicking it using the following code: button.click(); However, much to my surprise, simply calling &apo ...

The art of website creation: incorporating images into the background and using image tracing techniques

Trying to figure out where to find a solution for this. I had the idea of using a semi-transparent Photoshop design as a background and building on top of it, almost like tracing over it. This way, aligning things would be much easier. I remember Microsoft ...

Unable to retrieve element using getElementById with dynamically assigned id

After researching on Google and browsing through various Stack Overflow questions (such as this & this), I have not been able to find a solution. I am currently working on validating dynamically generated rows in a table. The loop and alert functions a ...

Combining the Power of Bootstrap with Yii Framework

As a newcomer to the Yii framework, I am looking to incorporate my Bootstrap design into this platform. One issue I have encountered is related to my custom CSS. In Bootstrap, we use navbar-default for styling the navbar. I customized my navbar color by ...