How add JQuery code in HTML?

Question

I am trying to make a mouse effect with a gif file and I found the following code:

<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>      
$(function(){
    $("body").mousemove(
        function(e){
            $("<img src='http://www.favicon.cc/logo3d/618187.png' />")
            .css({
                'position':'absolute', 
                'top':e.pageY+5,
                'left':e.pageX+-15,
                'width':'30px',
                'height':'30px'
            }).prependTo( $(document.body))
            .fadeOut(100, 'linear', function(){
                $(this).remove(); 
            });
        });
});
</script>
</body>

When I ran the html file I cannot see anything, for it, I think I am making a mistake in the code, Could anybody help me to fix?

works fine on mine [chromium] (obviously there's nothing in it, but there are stars when you the mouse). did you change anything on that code? — xcorat
– xcorat, Commented Sep 10, 2013 at 22:06
your HTML code posted here is wrong, you forget some closing tags — A. Wolff
– A. Wolff, Commented Sep 10, 2013 at 22:06
It's working here with html instead of body: jsfiddle.net/fNZeX — Joe
– Joe, Commented Sep 10, 2013 at 22:06
You appear to be missing your opening <body> tag, and your closing </head>. — jmoerdyk
– jmoerdyk, Commented Sep 10, 2013 at 22:07

Sergio · Accepted Answer · 2013-09-10 22:43:12Z

3

Attach the mouse listener to $(document) instead of $('body').

Also in your code you are missing your closing </head> and start <body> tag (that you were using in the selector).

Demo here

edited Sep 10, 2013 at 22:43

answered Sep 10, 2013 at 22:07

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sergio Over a year ago

@AlejandroCastan, I updated the answer. If it was useful please click to accept the answer.

xcorat · Accepted Answer · 2013-09-10 23:28:02Z

1

While you have few errors in the code, it works fine.

The reason you don't see anything in firefox is that the body of the HTML is empty and the stars won't show up unless there's content.

It works fine on chromium and rekonq.

Just add content, and it will work fine

<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>      
$(function(){
    $(function(){
$("html").mousemove(
    function(e){
        for(i = 0; i < 5; i++){
            $("<img src='http://www.favicon.cc/logo3d/618187.png' id='hover_" +i+"' />")
            .css({
                'position':'absolute', 
                'top':e.pageY+i*5,
                'left':e.pageX+i*10,
                'width':'30px',
                'height':'30px'
            }).prependTo( $(document.body))
            .fadeOut(100, 'linear', function(){
                $(this).remove(); 
            });
        }
    });
});
});
</script>
</head>
<body>
<h1> Add content </h1>
<p> some content </p>
</body>
</html>

Test jsfiddle

you can change the dimensions as you want. If you want you can create an array with the given dX and dY changes and use that to position the images.

or try this, Test jsfiddle

edited Sep 10, 2013 at 23:28

answered Sep 10, 2013 at 22:17

xcorat

1,4922 gold badges20 silver badges37 bronze badges

6 Comments

Alejandro Castan Over a year ago

Hi all,Thanks to all your answers ! It is works fine right now but I would need to add several images together in different places, for it, Could you how add more.png images to the code?

Alejandro Castan Over a year ago

Hi xcoat, I tried your code and Firefox works fine right now but like I said I would need to add several png images together and in different places for it, Is it possible add any Array or something? Thanks

Alejandro Castan Over a year ago

I would need to do some similar to this dynamicdrive.com/dynamicindex13/trailer.htm but the one gif object should be in the center and the other gif objects around it. thanks

Alejandro Castan Over a year ago

Yes I did, and always appears only an image

Alejandro Castan Over a year ago

Hi xcorat, thanks again sorry for my ignorance but in your code appears several times the same image and I would need to add different images and a little more big that this. Would it be possible? Best Regards

|

Collectives™ on Stack Overflow

How add JQuery code in HTML?

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related