R
E
S
O
U
R
C
E
S
       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
_______________________

HOME
SEO, Google, Privacy
   and Anonymity
Browser Insanity
JavaScript
Popups and Tooltips
Free Website Search
HTML Form Creator
Animation
Buttons and Menus
Counters
Captchas
Image Uploading
CSS and HTML
PHP
AJAX
XPATH
Website Poll
IM and Texting
Databases—MySQL
   or Not MySQL
Personal Status Boards
Content Management
   Systems
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

Making an Image Enlarge When The Mouse Cursor Is Hovering Over It

An impressive trick can be done with any of the images on your web page: displaying an enlarged version of the image on top of the image when the mouse cursor hovers the image.


On the following page, the div itself gets enlarged and so does the image, and the z-index gets altered as well, but all this is temporary during mouseover. At mouseout, it all reverts back to the way it was: Enlarging Web Page Images with Mouseover

If you prefer a mouseover enlarger that pops up the big image away from the thumbnail image, check out Popping Up a Bigger Image to the Side But Not on Top of the Thumbnail Image.

One trick that's close to mouseover image enlargement is pop-ups; they're not the same, but they're close: Web Page Pop-ups-Fifteen Simple Methods

Okay—to work. The following is an enlarger of images that relies on monitoring the mouse cursor coordinates.Below is the code that makes the magic happen.

<table style="position:absolute;top:1500px;left:265px" align="left" border="1" width="50" height="50" cellspacing=0 cellpadding=0>
  <tr>
    <td width="50" height="50"><IMG SRC="doorknob.gif" WIDTH=50 HEIGHT=50 BORDER=0 onMouseOver="javascript:if(k==0){move(265);k=1;}return true"></td>
  </tr>
</table>

Above is the table that contains the image to hover over, and the javascript that (when the mouse hovers) runs the function that displays the larger image. Immediately below is the bigger image which loads with the rest of the page, but it's at left=-500px so no one can see it until the move routine kicks in during hovering. And why is there no onMouseOut above, you ask. We're glad you asked. You can't register an onMouseOut for an image that's covered by another image. They're on different z-index layers so there's no way the mouse can register leaving an image it can't even find any more! So we have to resort to parameter checking and mouse coordinate checking routines, as described below.

<div id="o" style="position:absolute; left:-500px; top:1500px; width:400px; height:400px; border:3px groove #888;"><IMG SRC="doorknob-big.gif" WIDTH=400 HEIGHT=400 BORDER=0></div>

Below is mouse coordinate checking and parameter checking code found in the script part of the page's head section. First is declaring of the critical x and y variables. Next is finding out if the user has Firefox/Mozilla/Netscape. Next is the event capturing function (run with onLoad in the body tag: <body onload="startmouse()">) that starts mouse coordinate checking beginning at page load and continuing until the page is exited. Next is the mouse coordinate checker function the previous function starts up. Just before exiting this function we use a parameter checker that sees if the cursor is over the big image. The image is at xx position (left) and yy position (top) with width ww and height hh. The parameter checker hides the big image at left=-500 once the cursor is off the image—acting like onMouseOut should have acted. More on this bug in the browsers.

<SCRIPT LANGUAGE="JavaScript">
<!--
var x = 0;
var y = 0;
var Netscape=(navigator.appName.indexOf("Netscape") != -1);

function startmouse() {if(Netscape) {document.captureEvents(Event.MOUSEMOVE);} document.onmousemove=getCoords;
}

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;
}
if(k==1&&(x>(xx+ww)||x<xx||y>(yy+hh)||y<yy))
{k=0;move(-750);}
}

var k = 0;
var yy = 1800;
var xx = 265;
var ww = 50;
var hh = 50;

function move(l){e=document.getElementById('o');e.style.left=l;}

//-->

</script>

Try it out!