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

Keeping Floating Thumbnail Enlargement Centered Onscreen While Scrolling

The HTML page 123test.html shows 2 columns of images that do the mouse-over enlargement trick—but the enlargement goes to the center of the screen, and it stays centered while scrolling. It needs to use fixed positioning for the floating central div in order to work. Fixed positioning nails it down nicely so it stays in place, regardless of scrolling.

The method we need here is to have each thumbnail contain a mouseover javascript that inserts its big version's source file name into the src property of the big fixed central div. When hovering on the thumbnail picture with a cursor, the hidden big picture is given new src that in no way interferes with the rest of the page. The original thumbnail is untouched and unaffected.

Note the parameters needed in the function so that the src of the central big div can get changed:

In the function pic(n,s) {document[n].src=s;}, here are the parameter meanings:

n= big fixed div's name

s= src file name

In more detail, here is the CSS and JavaScript needed:

<style type="text/css">
body {font:normal 16px Arial, sans-serif;background-image:url(123test.gif);background-attachment:fixed;}
#fixed {position: fixed;
  border:1px solid black;
  top: 150px;
  left: 300px;
  position: expression("absolute");
  top: expression(eval(document.body.scrollTop)+150);}
#div2 {background: url('b.gif');
  background-attachment: fixed;
  background-position: expression((calculateBgX(this))+"px "
function calculateBgX(oElement) {return document.body.scrollLeft - getOffsetLeft(oElement);}

function calculateBgY(oElement) {return document.body.scrollTop - getOffsetTop(oElement);}

function getOffsetTop(oElement) {var iResult= oElement.offsetTop;
while (oElement.offsetParent) {oElement = oElement.offsetParent;iResult += oElement.offsetTop;}
return iResult;}

function getOffsetLeft(oElement) {var iResult= oElement.offsetLeft;
while (oElement.offsetParent) {oElement = oElement.offsetParent;iResult += oElement.offsetLeft;}
return iResult;}

function pic(n,s) {document[n].src=s;}


Here is the image, which is in a table, calling the source-changing function via a mouseover:

<IMG SRC="123test1.jpg" WIDTH=142 HEIGHT=107 BORDER=0 onMouseOver="pic('q','123test1.jpg')">

No mouseout is needed since whatever big image is in the big central div can stay there until replaced.

The background-image:url(123test.gif) in the CSS for the BODY is simply a white square but feel free to put any background you like there—it will stay put and so will the central big div no matter how much you scroll. On the other hand, leave the div2 background: url('b.gif'); exactly as it is, even though it is bogus and there isn't (and shouldn't!) be such a background available for the div2 CSS. It just helps the code run better. Leave it. The div2 is the fixed background of the whole 1024-wide page. The background-attachment: fixed for div2 means that the background will stay put, as will the big central div, and background-position: expression((calculateBgX(this))+"px "+(calculateBgY(this))+"px") calculates how the whole page's background stays put, even though various divs on higher layers as well as nonbackground content of div2 scrolls when the page does. Pretty cool how it is CSS but has a JavaScript formula in it anyway, just like the one for the fixed big central div: top: expression(eval(document.body.scrollTop)+150) which keeps this div steady and fixed at top = 150px regardless of all the scrolling action beneath it.

I tested the above html codes in IE6 and IE8 and Firefox and all is well.

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

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

Or pop up to the side of the thumbnail, not on it: Popping Up a Bigger Image to the Side But Not on Top of the Thumbnail Image

If you want an enlarger that uses mouse cursor monitoring, try Making an Image Enlarge When The Mouse Cursor Is Hovering Over It