Using visibility as part of your page style can have a dramatic effect for your readers. This quick example illustrates how easy it is to set up a stack of images that readers can select at will.
So, with that introduction, here's the page and how it's constructed.
|
|
<HTML>
<HEAD>
<TITLE>Visibility Example</TITLE>
|
|
Stack the images by placing them with the same absolute position.
|
|
<STYLE TYPE="text/css"><!--
IMG {position:absolute; top:100; left:100; height:160}
--></STYLE>
</HEAD>
|
|
Add a title and images to the body of the document.
|
|
<BODY>
<H2>Using visibility with images can produce a dramatic effect.</H2>
<IMG SRC="../images/abig.jpg" WIDTH="310" HEIGHT="200" STYLE="visibility:visible">
<IMG SRC="../images/cbig.jpg" WIDTH="310" HEIGHT="200" STYLE="visibility:hidden">
<IMG SRC="../images/fbig.jpg" WIDTH="310" HEIGHT="200" STYLE="visibility:hidden">
<IMG SRC="../images/mbig.jpg" WIDTH="310" HEIGHT="200" STYLE="visibility:hidden">
<IMG SRC="../images/pbig.jpg" WIDTH="310" HEIGHT="200" STYLE="visibility:hidden">
|
|
Radio buttons are added and grouped, using a background color as a panel.
|
|
<DIV ID="options" STYLE="position:absolute; top:100; left:420; width:150;
background-color:#840000; font-size: 18pt; color: #FFFFCC">
<INPUT TYPE="radio" NAME="car" CHECKED> Option 1<BR>
<INPUT TYPE="radio" NAME="car"> Option 2<BR>
<INPUT TYPE="radio" NAME="car"> Option 3<BR>
<INPUT TYPE="radio" NAME="car"> Option 4<BR>
<INPUT TYPE="radio" NAME="car"> Option 5<BR>
</DIV>
|
|
Clicking an option starts a search of images, making the checked option visible.
|
|
<SCRIPT FOR="options" EVENT="onclick" LANGUAGE="VBScript"><!--
For counter = 0 To document.images.length - 1
document.images(counter).style.visibility = "hidden"
If car(counter).checked Then
document.images(counter).style.visibility = "visible"
End If
Next
--></SCRIPT>
</BODY></HTML>
|
|
(From: aspkey)
|
Sitemap Links Advertising
Copyright © 2003-2005 downcodes.comregistration numbers:Hebei ICP: 05003145
