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

Enlarging Web Page Images with Mouseover

The HTML page box.html shows 2 images that do the mouse-over enlargement trick. It needs to use the absolute positioning its divs are using in order to keep the page from getting messed up during enlargements. Unless divs are nailed down, they can be shoved aside unaesthetically during div enlargements. Absolute positioning nails them down nicely so they stay in place, and the codes in the function make sure that the expanded image is on the top layer and therefore on top of all else.

The one on the left does an enlargement only, so only one pic is needed.

The one on the right does a rollover image replacement that basically exchanges the 1st pic for the second.

Most image rollovers replace images with equal dimensions. But in this case, we want the dimensions to go up a bunch. This will mean overlapped images, so it was important to handle the z-index issue (layers). Without this fix, the pic on the left would have the pic on the right on top of it once it enlarged because it is on a higher layer, but forcing it to layer 99 at mouseover and back to its original layer number at mouseout is a good fix.

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.

Note all the parameters needed in the function so that the height and width of the div as well as the source of the image can get handled:

In the function exchange(i,w,h,d,z,n,s), here are the parameter meanings:

i=image's id

w=image's width

h=image's height

d=id of div that is holding the image

z=z-index (layer in screen's window) of div that is holding the image

n=name of image object

s=source name of jpeg image

Also, the global variable for layer position saving is:

save_zindex=div's z-index before enlarging or exchanging

The values in the function call are the parameter values:

onMouseOut="javascript:exchange('id2_i',150,222,'id2_d',save_zindex,'here','SteamerOnTrestle-small.jpg');return true"

The saved size of the image above is 351 x 520, but you force it to be 150 x 222 until it gets hovered. If you want all pics to be 150 wide as thumbnails, put the larger image in ImageForge or IrfanView and select Resize/Resample and put 150 in the width box and select Preserve Aspect Ratio and you'll see the correct height that will give you the 150 width. Don't actually change the image size in the Resize/Resample dialog—hit Cancel instead. You just needed the info, and you can load one pic after another and get all the info for them all, if you have many.

The point is that you need good values for the parameters: ('id2_i',150,222,'id2_d',save_zindex,'here','SteamerOnTrestle-small.jpg'). Of course, you can also use a calculator, if you like, to get the heights from the widths using a ratio!

'id2_i' is the id of the image and 'id2_d' is the div's id for the 2nd div on the page, which helps you keep organized

150 is the width

222 is the height

save_zindex is how I force a div to have its original layer value after forcing it to 99 temporarily during mouseover

'here' is the image's name--not to be confused with src file name

'SteamerOnTrestle-small.jpg' is the thumbnail image's src file name—my sample pic

For simple enlargement, the only codes you need are:

<DIV id='id1_d' style="position:absolute;top:200px;left:200px"><IMG ID="id1_i" onMouseOver="javascript:enlarge('id1_i',351,520,'id1_d',99);return true" onMouseOut="javascript:enlarge('id1_i',150,222,'id1_d',save_zindex);return true" SRC="SteamerOnTrestle.jpg" WIDTH=150 HEIGHT=222 BORDER=0></DIV>

------ and:-------

var save_zindex = 0

function enlarge(i,w,h,d,z) { e=document.getElementById(i); e.style.width=w+'px';e.style.height=h+'px';e=document.getElementById(d);save_zindex=e.style.zIndex;e.style.zIndex=z;}
// -->

But for replacement, you need:

var save_zindex = 0

function exchange(i,w,h,d,z,n,s) {e=document.getElementById(i);e.style.width=w+'px';e.style.height=h+'px';e=document.getElementById(d);save_zindex=e.style.zIndex;e.style.zIndex=z;document[n].src=s;}

// -->

------ and:-------

<DIV id='id2_d' style="position:absolute;top:200px;left:500px"><IMG ID="id2_i" onMouseOver="javascript:exchange('id2_i',351,520,'id2_d',99,'here','SteamerOnTrestle.jpg');return true" onMouseOut="javascript:exchange('id2_i',150,222,'id2_d',save_zindex,'here','SteamerOnTrestle-small.jpg');return true" SRC="SteamerOnTrestle-small.jpg" WIDTH=150 HEIGHT=222 BORDER=0 name='here'></DIV>

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

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

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