FrontPage Ready Free: Buttons, Icons, Mouse-Overs, Animations and
Images.
|
1000's of Buttons/Templates to choose from!
Please wait, images may take a while to load.
|
How to swap different size images on mouse over with FrontPage 2003
behaviors.
Here's the scenario; you have 2 images of different sizes that you
want swap on mouse-over.
If you don't mind the images being resized to the same size use the
standard swap image mouse-over.
If you want to retain the image sizes you are going to have use
something else.
(Probably the best way is to use an image editor and make both images
the same size.)
There a several ways to do this, I'll show you my favorite way.
Here are the images I am going to use:
w-235 h-56
w-460 h-60
First if you are like me and just want the code get it
here. (view
source)
You may also want to turn on "Show Layer Anchors", so you can see your
insertion points in design view. >Tools >Page Options >General >Show
anchor points for layer
- Both images should already be imported into your website.
- Next choose >Insert >Layer
- Your cursor is now inside the layer, >Insert Picture
- Use the handles on the the layer to wrap the image.
- Deselect the layer. Then using the same insertion point as the
first layer and insert a second layer >Insert >Layer
- Your cursor is now inside the second layer, >Insert (your
second) >Picture
- Now select the second layer:
- Then choose >Format >Layers
(note if you don't see this use the arrow to expand)
- Now go to the second layer and set it for hidden, by clicking
under the image of the eye, until you get a closed eye.
- Now select layer1 (you can use the right hand pane) the switch
to >Format >Behaviors (or use the right hand pane- See also)
- Now making sure the layer is selected (not the image) choose (on
the right hand Behavior Pane) >Insert >Change Property >Visibility
>Hidden >Check the box >Restore on mouseout event.
- Now change the onclick to onmouseover on the right hand pane.
- Ok now we got the first image to disappear on mouseover, no we
need to get layer2 to appear.
- Choose >Insert>Change Property - Select Element -ID-Layer 2 -
Make it visible. On the right hand pane change onclick to
onmouseover.
Notes: FrontPage is a little buggy with this so you may need to go
back to layer1 mouseverover and change it to visible again. Also
other scripts on the page may interfere with this.
- Sample here.
|
