CODEWITHSUNDEEP
csshyperlink
Steve Whitehead
Steve Whitehead

Reputation: 3

Creating an email or HTML link within a class

I'm a beginner at all this however i will do my best to explain.

I used Stack Overflow to figure out how to position an image on top of another one. My reason for this is because i want a large bar at the top of my website with contact details, with a part of it linking to an email address.

I used the following code:

CSS:

.imgA1 { 
   position:absolute; top: 0px;
   left: 0px; z-index: 1; } <br> .imgB1 {
   position:absolute; top: 0px; left:
   100px; z-index: 3; 
}

HTML:

<img class=imgA1 src="images\headings\red_heading.jpg"><br>
<img class=imgB1 src="images\headings\red_heading_email.jpg">

PLEASE NOTE: I've had to put a space between the < and the img class above or else it wont display my code!!

All the above works really well, however i want to add an email link to the second class above, so when someone clicks it an email client opens.

I hope all this makes sense.

Anyway help/advice would be fantastic.

Kind regards,

Steve

What i want to do is add a link to the "imgB1" section above...

Upvotes: 0

Views: 3397

Answers (7)

justacoder
justacoder

Reputation: 2704

By default, images that are hyperlinked will have a border around them (usually blue). Make sure to remove it via css or with the IMG attribute border="0"

Upvotes: 0

aphonicx
aphonicx

Reputation: 1

< img class=imgA1 src="images\headings\red_heading.jpg"> < img class=imgB1 src="images\headings\red_heading_email.jpg">

You can't have a link through a CSS class because CSS only defines DISPLAY/LAYOUT properties.

You will have to add an html anchor tag to the img.

Upvotes: 0

lgaud
lgaud

Reputation: 2479

If the approaches above don't work because of the positioning change on the image (not sure if they will or not), you can set the "onclick" property of the image to a function like this:

<script type="text/javascript">    
function sendEmail() {

        var domain = "test.com"; // this makes it a bit harder for a spammer to find the e-mail
        var user = "test";
        var subject = "Some subject Line"; // You can also set the body and some other stuff, look up mailto

        var mailto_link = 'mailto:' + user + '@' + domain + '?subject='+subject;

        win = window.open(mailto_link,'emailWindow'); // all you see is the mail client window
        if (win && win.open &&!win.closed) win.close();
    }    
</script>

<img class=imgB1 src="images\headings\red_heading_email.jpg" onclick="sendEmail()"/>

Upvotes: 0

MiPnamic
MiPnamic

Reputation: 1267

it's quite... strange... but you can do that with Javascript, as example in JQuery you can do something like this:

$(document).ready(function() {
    $('.imgB1').each(function() {
        $(this).prepend('<a href="link_to_point_to">');
    });
});

Note that I've not tested it

Upvotes: 0

Andbdrew
Andbdrew

Reputation: 11895

i think what you want is:

< img class=imgA1 src="images\headings\red_heading.jpg"> < img src="images\headings\red_heading_email.jpg">

with the same css. this should apply the positioning to the anchor tag, which in turn contains the image you want to overlay.

Andy

Upvotes: 0

Chris Pickett
Chris Pickett

Reputation: 2822

I'm not sure that I understand, but to add a link to the image you would just need to put it inside an anchor tag, and to open an email client you would use an href of mailto:[email protected]

<img class=imgA1 src="images\headings\red_heading.jpg">
<a href='mailto:[email protected]'>
 <img class=imgB1 src="images\headings\red_heading_email.jpg">
</a>

You may also need to add a border: none to the imgB1 class, as by default images have a border when they are hyperlinked.

Upvotes: 0

Kushal
Kushal

Reputation: 3168

Place your <img> tags within <a> (Anchor) tag, and with the href attribute of anchor tag, your code to open an email client of user upon click on image will look something like this.

<a href="mailto:[email protected]">< img class=imgB1 src="images\headings\red_heading_email.jpg"></a>

Now clicking on the image will launch site visitors default mail client with "to" the mail address "[email protected]".

Upvotes: 1

Related Questions