...

View Full Version : Onmouse over text display as help



Mythri
09-24-2012, 10:30 AM
Hi,

I have developed an e-commerce site. For user form input box, i want to put a question mark icon as help tool. When user takes mouse on that icon it should display the help text. I am not getting how to do it. Please someone help me in doing this

WolfShade
09-24-2012, 02:36 PM
It can be done easily with a JS library like jQuery (http://jquery.com/) or qTip2 (http://craigsworks.com/projects/qtip2/).

UPDATE: There's also overLib (http://www.bosrup.com/web/overlib/).

vwphillips
09-24-2012, 03:10 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

.theclassname {
position:absolute;z-Index:101;left:40px;top:0px;width:200px;height:200px;background-Color:#FFFF66;border:solid red 1px;
}

</style>

<script type="text/javascript">

function Help(obj,ud){
if (!obj.help){
var div=document.createElement('DIV');
div.className=obj.rev;
div.innerHTML=obj.rel;
document.body.appendChild(div);
obj.help=[div,div.offsetLeft,div.offsetTop];
}
var xy=[0,0],o=obj;
while(o){
xy[0]+=o.offsetLeft;
xy[1]+=o.offsetTop;
o=o.offsetParent;
}
obj.help[0].style.visibility=ud?'visible':'hidden';
obj.help[0].style.left=xy[0]+obj.help[1]+'px';
obj.help[0].style.top=xy[1]+obj.help[2]+'px';
}



</script>
</head>

<body>
<center>
<a rel="the help 0 html" rev="theclassname" onmouseover="Help(this,true);" onmouseout="Help(this,false);"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="40" height="40" /></a>
<a rel="the help 1 html" rev="theclassname" onmouseover="Help(this,true);" onmouseout="Help(this,false);"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="40" height="40" /></a>
<br /><br /><br />
<a rel="the help 2 html" rev="theclassname" onmouseover="Help(this,true);" onmouseout="Help(this,false);"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="40" height="40" /></a>

</center>
</body>

</html>

xelawho
09-24-2012, 03:26 PM
keeping it simple...


<style type="text/css">
img{height:30px;
width:30px}
</style>
</head>
<body>
<img src="http://www.infendo.com/wp-content/uploads/2011/05/question-mark.jpg" title="I am the help"/><input type="text"/>
</body>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum