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"&开发者_JAVA技巧gt;

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...

---

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:myname@mail.com">< 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 "myname@mail.com".

---

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:theemail@address.com

<img class=imgA1 src="images\headings\red_heading.jpg">
<a href='mailto:me@me.com'>
 <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.

---

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

---

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

---

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()"/>

---

< 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.

---

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"