Question

what do i need to do beacuse i am new to jquery is the following:
I want: when the user clicks an exact link. An exact image should appear in the middle of the screen with a fade effect or without (whatever easier) and then it will disappear after 4 seconds.

In the head i included this:

<script src="http://code.jquery.com/jquery-latest.js"></script>

In the Body i included this:
<a href="#" id="myLink">click</a>
<img src="achievement.png" id="myImage" style="display:none">

i figured it out, now how do i set it to overlay over the content of the website? CSS probably

Answer 1

What about something like this:

$('#myLink').click(function(){
    $('#myImage').fadeIn().delay(4000).fadeOut();
});

Here is a good way to center an image on the screen using css:

html:

<div id="myImage"></div>

css:

#myImage{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: url(path/to/image.png) center center no-repeat;
}

note that I’m using a <div> tag with a background image instead of a <img> tag. This is much easier to center using css.