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"