/    Sign up×
Community /Pin to ProfileBookmark

changing box that moves w/ the cursor

I got a script from javascript.internet.com called DHTML Tooltip Generator (at [url]http://javascript.internet.com/messages/dhtml-tooltip-generator.html)[/url]. It makes tooltips when you put your cursor over a link (like “alt=” in HTML) except it lets you write code in the tooltip. While your cursor is hovering over the link, it moves with the cursor like the alt tooltips do, the top left of the tip being at the right of the cursor. What I want to do is modify the code a bit so the tip is underneath and aligned center with the cursor, but I’m a beginner with javascript and I don’t know which part of the code instructs it to do that or how I can change it. The code goes like this (I eliminated the part at the bottom because I know it’s got nothing to do with it):

var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0

if(ns){
doc = “document.”; sty = “”
}
if(ie){
doc = “document.all.”; sty = “.style”
}

var initialize = 0
var Ex, Ey, topColor, subColor, ContentInfo

if(ie){
Ex = “event.x”
Ey = “event.y”

topColor = “#43206d”
subColor = “#ddddee”
}

if(ns){
Ex = “e.pageX”
Ey = “e.pageY”
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=overhere

topColor = “#43206d”
subColor = “#ddddee”
}

function MoveToolTip(layerName, FromTop, FromLeft, e){

if(ie){
eval(doc + layerName + sty + “.top = ” + (eval(FromTop) + document.body.scrollTop))
}

if(ns){eval(doc + layerName + sty + “.top = ” + eval(FromTop))
}

eval(doc + layerName + sty + “.left = ” + (eval(FromLeft) + 15))

}

function ReplaceContent(layerName){

if(ie){
document.all[layerName].innerHTML = ContentInfo
}

if(ns){
with(document.layers[layerName].document)
{
open();
write(ContentInfo);
close();
}
}

}

function Activate(){
initialize=1
}

function deActivate(){
initialize=0
}

function overhere(e){

if(initialize){

MoveToolTip(“ToolTip”, Ey, Ex, e)
eval(doc + “ToolTip” + sty + “.visibility = ‘visible'”)
}

else{
MoveToolTip(“ToolTip”, 0, 0)
eval(doc + “ToolTip” + sty + “.visibility = ‘hidden'”)
}

}

Can someone help me with this? Thanks in advance.

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@KorApr 25.2005 — From the begining I must tell you that this script is deprecated

var ie = document.all ? 1 : 0

var ns = document.layers ? 1 : 0
[/quote]

This script will not run under Mozilla and Moz compatible browsers (probably between 20 and 25% of the users)

The modern browsers use document.getElementById() (or other DOM) reference.
Copy linkTweet thisAlerts:
@Warren86Apr 25.2005 — Here's a different approach, using two variables to easily position the tooltip.

<HTML>

<Head>

<Script Language=JavaScript>

var absStr = "Position:Absolute;Top:0;Left:0";
var yOff = 55; // use this to position the message in the vertical axis
var xOff = 100 // use this to position the message in the horizontal axis

function isNext(fName){

window.location = fName;
}

function stayHome(){

iL = document.body.scrollLeft;
iV = document.body.scrollTop;
mX = event.screenX-xOff+iL;
mY = event.screenY-yOff+iV;
document.getElementById('isFloat').style.left = mX;
document.getElementById('isFloat').style.top = mY;
}

document.onmousemove = stayHome;
window.onscroll = stayHome;

function insertFloatIMG(){

styleStr = "<Style>.msgFloat {"+absStr+";Border-Style:Solid;Border-Width:1px;Background-Color:Yellow;Padding-Right:5px;Padding-Left:5px;Padding-Top:3px;Padding-Bottom:3px;Font-family:Tahoma;Font-Size:13pt;Line-Height:95%;}</Style>";
divStr = "<DIV class=msgFloat id=isFloat></DIV>"
document.write(styleStr);
document.write(divStr);
}

function hideMessage(){

document.getElementById('isFloat').style.visibility = 'hidden';
}

function showMessage(toolTip){

document.getElementById('isFloat').style.visibility = 'visible'
document.getElementById('isFloat').innerHTML = toolTip;
}

function initToolTip(){

insertFloatIMG();
hideMessage();
}

</Script>

</Head>

<BODY>

<center>

<a href=# onclick="isNext('Link1.html')" onmouseover="showMessage('This is a message for the first link')" onmouseout='hideMessage()'>First Link</a>

<br><br><br>

<a href=# onclick="isNext('Link2.html')" onmouseover="showMessage('This is a message for the second link')" onmouseout='hideMessage()'>Second Link</a>

</center>

<!-- Keep the following line immediately preceding the closing Body tag -->

<Script> initToolTip() </Script>

</Body>

</HTML>
×

Success!

Help @athanatis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...