CODEWITHSUNDEEP
javascriptjquerycss
petko_stankoski
petko_stankoski

Reputation: 10713

Image on hover event

Here is what I have:

.error
{
background: url(error.jpg) no-repeat right top;
}

and via JQuery I give or take the class "error" to a textbox. So, the textbox has the image as a background, but not the whole textbox, but only its right part. What I now want to make is on hover on the image (not the textbox) to show title of the image. How to add title to the image and how to make its on hover event?

Upvotes: 0

Views: 217

Answers (2)

Ed Kirk
Ed Kirk

Reputation: 583

For hover you can use:

$('#myElement').hover( function () {/*in focus code */},
                       function () {/*out of focus code*/});

To determine if just that image has been hovered you'll need to attach to the mousemove event and get the mouse coords when over the element and work it out yourself. I'd store the current mouse coords after each mousemove event of your element and then in your hover functions determine if you are within the image area.

var currentMousePos;
$('#myElement').mousemove(function (event) {
  currentMousePos = {(event.pageX - $('#myElement').left), 
                     (event.pageY - $('#myElement').top)};
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Because the image is part of the background of the input, you can't attach events to it.

You can however place an alt or title attribute on the input itself which will act like a tooltip in all browsers.

Upvotes: 3

Related Questions