Since you all are getting so good at making rooms, I am going to
show you more tricks you can do with the finished product :))
What you will need for this tutorial is:
Here's my finished room:
<"subject=Happy 5th Birthday Schultzy!!" onmouseover="filter('c299','c173')" onmouseout="filter('c299','c652')">![]() |
![]() |
![]() |
![]() |
![]() |
Run your mouse over the different photos.
Here's how I did it.
When you go to save your finished room as a jpg, make another copy
(shift D).
On copy two of the finished room, I added text in layers underneath
the dog's photos. When that was how I liked it, I merged visible layers,
and saved as a jpg.

My image is 560 x 300. I have my ruler on, and I want to cut out the first dog on the left side. With ruler turned on, I can estimate that the first cut is a little over 100. Double click on your selection tool. A box will come up.

| The values I entered will select the left dog's photo. Write these
numbers down as they appear - you will need them later.
Edit / copy / edit / paste as a new image. Save as (whatever) 1a.jpg. |
![]() |
Make your text image active now and double click the selection tool. The same values will come up. Hit okay. Edit / copy / edit / paste as a new image. Save as (whatever) 1b.jpg. You have just made your first two images for the java on-off.
Go back to the original room, and double click on the selection tool. The same numbers will come up, but we need to change them slightly. Top and bottom will remain the same in this example, but the left and right values will change.
Keep in mind that your finished image will look much "cleaner" if you keep the size values either the same or similar. In my example, all left and right images are 105 x 300. The center image is 140 x 300. This works well with the gallery style room. If you are good at math, you could multiply 105x4 and get 420. Now subtract 420 from 560. What do you get? 140! So if my 2 left sections are 105 each and my 2 right sections are 105 each, my center would have to be 140.
Okay, on to the second image. In the selection box, your original values were left 0, right 105. Enter 105 for the left value, and 210 for the right value. Edit / copy / edit / paste as a new image. Save as (whatever) 2a.jpg.
Do the same thing for the text image, using the same values, and continue on.
The next time you double click on the selection tool, you will need to add the width and height values of the next image. In my case, the middle image is 140 x 300. So my values for left will be 210(105+105), and right will be 350 (140+210). See why you need the paper?
Continue cutting and pasting as new images until your image is totally cut up :))
Hint: The next piece is Left 350, Right 455. You added 140 to the left because of the center piece, 105 to the right.
For the last piece, you add 105 to both the left and right to get Left 455, Right 560.
Now for the java :))
I really like the Mouseover Whipper because it does all the work for you. Just follow the directions, and paste the code as directed into your page.
To arrange the images right up close together I used a table format.
Here's what mine looks like:
