/    Sign up×
Community /Pin to ProfileBookmark

Im not sure if this is possible, I’ve been searching for ever.

Copy linkTweet thisAlerts:
Jul 14.2006

hello all,

Let’s see, hmmm…. Im trying to get a image to popup next to your mouse cursor when you place your mouse over a text link, I would like the image to follow the cursor untill the mouse cursor is off the text link. Is this possible? If any could explain to me what i need to search for or what script I need to use I would greatly appreciate it.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@A1ien51Jul 14.2006 — Try playing with the script here:

http://dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

Eric
Copy linkTweet thisAlerts:
@serovectraauthorJul 14.2006 — Thank you very much, I'll see what I come up with and report back ?
Copy linkTweet thisAlerts:
@serovectraauthorJul 14.2006 — I guess I'm to the point where I should ask how much will it cost me to get a moderator to script something like this for me?
Copy linkTweet thisAlerts:
@ananiasJul 14.2006 — When you followed the link that A1ien51 posted, did the demo tooltips on that page work in your browser?
Copy linkTweet thisAlerts:
@James_GatkaJul 14.2006 — serovectra: Try this one. [B]Adjust the path and file name of the floating images. Then copy the code AS IS then save it as an .html document. Don't cut pieces from it and then paste them to another document. [/B]

[CODE]<html>
<head>
<script type="text/javascript">


var floatWidth = 220; // set the width of the floating image
var floatHeight = 160; // set its height

var midWindow = 0;
var nContainer = "";
var IE = false;

if (navigator.appName == 'Microsoft Internet Explorer'){IE = true}

function stayHome(m){

if (IE)
{
var currX = event.clientX;
var currY = event.clientY;
}
else {
var currX = m.pageX;
var currY = m.pageY;
}
if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
{
var iL = document.documentElement.scrollLeft;
var iV = document.documentElement.scrollTop;
}
else {
var iL = document.body.scrollLeft;
var iV = document.body.scrollTop;
}
if (currX > midWindow-30)
{
var msgWidth = nContainer.clientWidth;
if (IE){nContainer.style.left = (currX-msgWidth-10+iL)+'px'}
else {nContainer.style.left = (currX-msgWidth-10)+'px'}
}
else {
if (IE){nContainer.style.left = (currX+10+iL)+'px'}
else {nContainer.style.left = (currX+10)+'px'}
}
if (IE){nContainer.style.top = (currY+iV-(floatHeight/2))+'px'}
else {nContainer.style.top = currY-(floatHeight/2)+'px'}
}

document.onmousemove = stayHome;

function insertFloatMsg(){

var styleStr = "<style type='text/css'>.msgFloat {Position:Absolute;Top:0;Left:0;Border-Style:Solid;Border-Width:1px;Background-Color:Yellow;Padding-Right:5px;Padding-Left:5px;Padding-Top:5px;Padding-Bottom:5px;}</style>";
var divStr = "<div class='msgFloat' id='isFloat'>&nbsp</div>"
document.write(styleStr);
document.write(divStr);
nContainer = document.getElementById('isFloat');
}

function hideImage(){

while (nContainer.lastChild)
{nContainer.removeChild(nContainer.lastChild)}
document.getElementById('isFloat').style.display = 'none';
}

function showImage(isImg,currItem){

document.getElementById('isFloat').style.display = 'inline';
var nIMG = document.createElement('img');
nContainer.appendChild(nIMG);
nIMG.setAttribute('src',isImg);
nIMG.setAttribute('width',floatWidth);
nIMG.setAttribute('height',floatHeight);
currItem.onmouseout=hideImage;
}

function getMidWindow(){

if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
{
midWindow = document.documentElement.clientWidth/2;
}
else {
midWindow = document.body.clientWidth/2;
}
}

function initFloatImg(){

insertFloatMsg();
hideImage();
if (!IE){document.captureEvents(Event.mousemove)}
getMidWindow();
}

onresize=getMidWindow;

</script>
</head>
<body>
<table align='center'>
<tbody>
<tr>
<td height='300' align='center'>
<a href='someLink.html' onmouseover="showImage('1/first.jpg',this)"> This is a Link </a>
</td>
</tr>
<tr>
<td height='300' align='center'>
<a href='anotherLink.html' onmouseover="showImage('1/second.jpg',this)"> This is another Link </a>
</td>
</tr>
</tbody>
</table>

<!-- Keep the following line as the last line in the body -->
<script type="text/javascript"> initFloatImg() </script>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@serovectraauthorJul 14.2006 — When you followed the link that A1ien51 posted, did the demo tooltips on that page work in your browser?[/QUOTE]

Yes it did work, I also took the code and worked with it, but to my dismay I realized that im dumber than I thought. I tried adding a

[COLOR=Blue]background-image:url(/images/image.gif);[/COLOR]

inside the link, but the link would just display the text instead of the image, I tried placing it in many different ways, with no success. Then I ran out of Ideas.
Copy linkTweet thisAlerts:
@serovectraauthorJul 14.2006 — Oh my god James I love you, lol. Seiously your awesome, I give you like a 100 kudos. By the way if you dont mind me asking, where did you find this, or is it something that you scripted yourself?
Copy linkTweet thisAlerts:
@James_GatkaJul 14.2006 — serovectra: Yes, I wrote it. Hope it works out for you. I just noticed that I forgot the script tags when I posted it. I'll repost it with the tags.
×

Success!

Help @serovectra 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.18,
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,
)...