Rollover the links below:
INDIA CHINA JAPAN USA UK
This will tell you to use the Show-Hide feature in layers.
You can create five links (which correspond to five images.
The corresponding image should be displayed when the mouse
moves over a link.
Step 1
Open a new document and type the links 'India, China, Japan, USA and UK'. Make these as null links. i.e. enter a '#' in the Link text box under Properties window.
Step 2
Clicking on Insert>Layout Object>Layer
to insert a layer,and Insert an image into the layer. You
can make the image sizes uniform by giving the height and
width of the image in the image properties.
Step 3
The layers panel shows the layer names. (if its not showing
click on Windows>layers) Change this name
by double clicking on the name and type 'india'. Click on
the eye icon left to the name 'india', the image will be hide.
Step 4
Repeat the steps 2 and 3 for the rest of theimages. There
are 5 links and 5 images and 5 layers have to be created.
Step 5
Once you created the five layers position all the layers
in the same way. Do this by viewing each layer at a time and
changing the values of L and T in the layer
properties than manually positioning it.
Step 6
Choose the first link 'India' and goto Behaviors
panel (if this panel is not displayed click on
Windows>Behaviors) click on the tab with a + sign
to add behavior. You can select Show-Hide Layersfrom
the pop-up menu. The Show-Hide Layer window appears, and shows
the five layers created, select the layer 'india' and click
on show, the word 'show' appears near the layer name, close
the window.
Step 7
The behavior and action is displayed. You need to change the
'onClick' to 'onMouseOver'. Click on the option and select
'onMouseOver' behavior. In the next row add another behavior
'onMouseOut' and follow the same step as before to open the
Show-Hide Layer and click on 'hide' to the same layer. So
now when you move on to the link by mouse the image will be
viewed and when the mouse is moved out of the link the image
will be hide.
Step 8
Preview in browser to test your page.
Move your mouse over the links and check out the display. |
