Home      Products & Services      Contact Us      Links

WebHatchers will design & develop your site for you.

Website Menu Heaven: menus, buttons, etc.

Send us your questions.

site search by freefind

SEO, Google, Privacy
   and Anonymity
Browser Insanity
Popups and Tooltips
Free Website Search
HTML Form Creator
Buttons and Menus
Image Uploading
Website Poll
IM and Texting
   or Not MySQL
Personal Status Boards
Content Management
Article Content
   Management Systems
Website Directory
   CMS Systems
Photo Gallery CMS
Forum CMS
Blog CMS
Customer Records
   Management CMS
Address Book CMS
Private Messaging CMS
Chat Room CMS
JavaScript Charts
   and Graphs

Free Personal Status Boards (PSB™)

Free Standard Free PSB

Free PSB Pro Version

Free Social PSB

Free Social PSB Plus (with Email)

Free Business PSB

Free Business PSB Plus (with Email)

PSB demo

Social PSB demo

Business PSB demo

So what's all this PSB stuff about?

Chart comparing business status boards

PSB hosting diagram

PSB Licence Agreement

Copyright © 2002 -
MCS Investments, Inc. sitemap

PSBs, social networking, social evolution, microcommunities, personal status boards
PSBs, social networking, business personal status boards
website design, ecommerce solutions
website menus, buttons, image rotators
Ez-Architect, home design software
the magic carpet and the cement wall, children's adventure book
the squirrel valley railroad, model railroad videos, model train dvds
the deep rock railroad, model railroad videos, model train dvds

Link Images Script

Tooltips don't need to be fancy. But if your cursor is hovering over a name of a person, then a popup tooltip that shows his or her photo is a nice change from the plain old text ones. In the test page, the links go to pretend website URLs that are not real—the names aren't even accurate. The monkey on the top link has no link so we used a # symbol in its place. You can call our photos link images, image links, link photos, popup photos, popup images, or whatever.

The Link Images test page will work on Windows IE 5.5, 6, 7, 8, Safari, Chrome, Firefox, Opera, and . . . that's all we tested. Images will just pop up, but they will not follow the cursor.

Now—on to the script code:

The first section of code is standard mouse cursor coordinate reading.

Next comes the pic() function that displays the photo. The coordinates of the link text get offsets added to them and the photo div styles get their left and top positions adjusted. Then in the picout() function, the left property gets set back offscreen where the photos normally reside in this script.

In the body tag, the onload event runs the mouse cursor coordinate reading script which continues to function for the whole duration the user is on this web page. Next, the images in the divs get offscreen positioning and unique ids. Finally, the links. They get onmouseover and onmouseout events that run the pic() and
picout() functions, respectively. In real use, these links could be names inside sentences or paragraphs or buttons or whatever—anything that will take a link.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Link Image Script</TITLE>
<meta name="description" content="Link Image Script">
<meta name="keywords" content="Link Image Script,tooltip images,image tooltips,javascript, dhtml, DHTML">


function startmouse(){document.onmousemove=getCoords;}

var x=0;
var y=0;

function getCoords(e){
if (!e) var e = window.event;
if (e.pageX){
x = e.pageX;
y = e.pageY;
else if (e.clientX){
x = e.clientX + document.body.scrollLeft;
y = e.clientY + document.body.scrollTop;

function pic(q) {var e=document.getElementById(q);s=x+35;u=y-135;e.style.left=s+'px';e.style.top=u+'px';}

function picout(q) {var e=document.getElementById(q);e.style.left='-1999px';}

// -->

<BODY SCROLL="auto" BGCOLOR="#FFFFFF" onLoad="startmouse()">

<p><B><center><h2>Link Image Script</h2></B></center></p>

<div id='a1' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:300px'><IMG SRC="mycursor.gif" WIDTH=100 HEIGHT=125 BORDER=0></div>

<div id='a2' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:300px'><IMG SRC="face1.jpg" WIDTH=100 HEIGHT=125 BORDER=0></div>

<div id='a3' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:300px'><IMG SRC="face2.jpg" WIDTH=100 HEIGHT=125 BORDER=0></div>

<div id='a4' style='background-color:#fff;z-index:99;position:absolute;left:-1999px;top:300px'><IMG SRC="face3.jpg" WIDTH=100 HEIGHT=125 BORDER=0></div>

<div style='position:absolute;left:300px;top:200px'>
<a HREF="#" onmouseover='pic("a1")' onmouseout='picout("a1")'>testme</a><BR><BR><BR><BR>
<a HREF="http://lolassupercoolwebsiteishere.info" onmouseover='pic("a2")' onmouseout='picout("a2")'>Lola</a><BR><BR>
<a HREF="http://fifissupercoolwebsiteishere.info" onmouseover='pic("a3")' onmouseout='picout("a3")'>Fifi</a><BR><BR>
<a HREF="http://jenissupercoolwebsiteishere.info" onmouseover='pic("a4")' onmouseout='picout("a4")'>Jeni</a><BR><BR>