border image
Home Order Privacy Bookmark Members
logo border image



Services
Portfolio
Products
Sample Code
Quotes
Blog
Feedback
Basket
Checkout
Tools
.net Assemblies


Your basket has: Total items: 0
Subtotal: $0.00



border image
 
corner image
corner image

Article
 Using visibility as part of your page style
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>


That's it. Enjoy!
Rate this article
Low High
Return To Top
corner image
corner image