Button Appear Over Image OnMouseover, Is it possible?

[dargpat]

I'm making a script similar to Hot or Not.  But I want the Hot or Not button to be unique.

 

Lets say when an image has loaded for you to vote on.  I would like for the vote buttons to not be visible until the user mouse over the image.

 

Is it possible to have the voting buttons(which are images) fade in over the image to be voted and possible to make the buttons click-able??

 

If so, how can I do this and can someone help me make the script.

 

I included an attachment of what I'm looking for!

 

Thanks

 

[attachment deleted by admin]

[trq]

Here is some code I wrote using jQuery for pretty much the same thing at work.

 

$(document).ready(function() {
    $(".movie-hover").hover(
        function() {
            var $current = $(this).find("img");
            var pos = $current.position();
            var top = pos.top;
            var left = pos.left;
            var $img = $(
                '<img id="playbtn" src="/assets/img/140x90/play-button.png" />'
            ).css({
                'position': 'absolute',
                'top': top,
                'left': left,
                'z-index': '100000'
            })
            $current.before($img);
        },
        function() {
            $('#playbtn').remove();
        }
    );
});

 

This will display the image /assets/img/140x90/play-button.png over the top of any image contained within a div of the class .movie-hover.

 

Should be pretty easy to adapt to your needs.

[dargpat]

Here is some code I wrote using jQuery for pretty much the same thing at work.

 

$(document).ready(function() {
    $(".movie-hover").hover(
        function() {
            var $current = $(this).find("img");
            var pos = $current.position();
            var top = pos.top;
            var left = pos.left;
            var $img = $(
                '<img id="playbtn" src="/assets/img/140x90/play-button.png" />'
            ).css({
                'position': 'absolute',
                'top': top,
                'left': left,
                'z-index': '100000'
            })
            $current.before($img);
        },
        function() {
            $('#playbtn').remove();
        }
    );
});

 

This will display the image /assets/img/140x90/play-button.png over the top of any image contained within a div of the class .movie-hover.

 

Should be pretty easy to adapt to your needs.

 

Thanks!! .. I love it .. it works like a charm!! ....but I have one more problem.  As I'm not that familiar with java or jquery as I am with php .. I tried the last 3 hours to re-write this code with no success, to display two buttons.  I know its something simple but I can not figure it out.  Please help once more .. Thanks thorpe!!

[trq]

You just need to add two images.

 

var $img1 = $(
  '<img src="/assets/img/140x90/image1.png" />'
).css({
  'position': 'absolute',
  'top': top,
  'left': left,
  'z-index': '100000'
});
var $img2 = $(
  '<img src="/assets/img/140x90/image2.png" />'
).css({
  'position': 'absolute',
  'top': top,
  'left': left,
  'z-index': '100000'
});
$current.before($img1);
$current.before($img2);

 

Of course you will also need to play around with the top & left css attributes. At the moment, both images would be lined up in the top left hand corner of the underlying image.

[dargpat]

ahhh! .. Believe it or not I actually tried that and I couldn't get it to work.  But now after your mentioning of playing with the css, It works!  I couldn't figure out why I was only seeing the second image ...lol!

 

Thanks a Million!! :D

 

 

 

You just need to add two images.

 

var $img1 = $(
  '<img src="/assets/img/140x90/image1.png" />'
).css({
  'position': 'absolute',
  'top': top,
  'left': left,
  'z-index': '100000'
});
var $img2 = $(
  '<img src="/assets/img/140x90/image2.png" />'
).css({
  'position': 'absolute',
  'top': top,
  'left': left,
  'z-index': '100000'
});
$current.before($img1);
$current.before($img2);

 

Of course you will also need to play around with the top & left css attributes. At the moment, both images would be lined up in the top left hand corner of the underlying image.