How to create help on mouse over on an image | November 2024

home / software / tips and tricks / How to create help on mouse over on an image

How to create help on mouse over on an image

Category: Java Script
view more software Tips and Tricks

Updated: 06/29/2012 07:06 AM
Author: Shiju Mathews

Status: Resolved.

On web pages users are expecting help on certain areas. Usually this can be implemented by showing a div area with required help text. When the user 'mouseout' from the image, hide the div.
The main trick is thatm, we need to identify the co-ordinates of the image, to determine where we need to show the help text.

First add 'mouseover' and 'mouseout' events to an image which is using as help icon.

Also add the div in the page

Now it is time to implement the Javascript functions.

function toggleDiv(id, flagit, e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// Give required room to show the Div element.
// make sure that, the idv is not going to cover the image
posx = posx - 310;
posy = posy + 10;
if (flagit=="1"){
if (document.layers) {
document.layers['' + id + ''].visibility = "show";
document.layers['' + id + ''].top = '' + posy + 'px';
document.layers['' + id + ''].left = '' + posx + 'px';
}
else if (document.all) {
document.all['' + id + ''].style.visibility = "visible";
document.all['' + id + ''].style.top = '' + posy + 'px';
document.all['' + id + ''].style.left = '' + posx + 'px';
}
else if (document.getElementById) {
document.getElementById('' + id + '').style.position = "absolute";
document.getElementById('' + id + '').style.top = '' + posy + 'px';
document.getElementById('' + id + '').style.left = '' + posx + 'px';
document.getElementById('' + id + '').style.visibility = "visible";
}
}
else if (flagit == "0")
{
if (document.layers) document.layers['' + id + ''].visibility = "hide";
else if (document.all) document.all['' + id + ''].style.visibility = "hidden";
else if (document.getElementById) document.getElementById('' + id + '').style.visibility = "hidden";
}
}

If you want to see a woking example visit my web site Sign up page

Indian Resources by Category

Indian Grocery Stores

Indian Dress Stores

Indian Churches

Indian Associations

Indian Restaurants

Indian Jewelry Stores

Indian Hindu Temple

alt="Add your business to our listing Free"

Software Resources

Tips and Tricks

Interview Questions for C#

Interview Questions for ASP.Net

Interview Questions for SQL Server

Tags: How to create help on mouse over on an image

Updated on: November 2024