Capture both codes here: press Select All then COPY the contents
MUST change each gEMDIR to GEMDIR before using code!
I have made notes in codes below and it will effect functionality!
Use the Select All choice above to copy code!
Three steps:
1) SKIP THIS STEP IF YOU DO NOT WANT LINKS ON THE IMAGE!
Place the first script in an Insert > HTML (webgem in Trellix):
Change NAVY items to match your font colors and sizes.
This first code says how the links will look regular and on rollover (hover).
I have underline turned off, text bolded and change to CAPS (uppercase) on rollover.
The colors I use in the sample are blue with a change to green on rollover.
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Martial Boissonneault -->
<!-- Web Site: http://getElementById.com -->
<style type="text/css">
.menulinks {position:relative;}
#menucont2 a{color:#000080; font-weight:bold; text-decoration:none;}
#menucont2 a:hover{color:#006400; font-weight:bold; text-decoration:none; text-transform: uppercase;}
</style>
2) Make a table in CSB. Set the cell spacing to 1 and the padding to 4.
|
MY SETTINGS FOR THE TRIPLE TABLE
FIRST(outer) LAYER
Note: the cell padding will determine how wide the outermost fill color will be.
I used 4 so the outer fill is quite thin.
|
|
The Table background color for the outermost fill is set here. I chose WHITE as my color.
|
3) Place the second script which makes the second and third layers into an Insert > HTML (webgem in Trellix)
inside the first layer table made in step 2.\
Center the webgem.
Include the images for the 2nd and 3rd layers in the webcomponent.
Change GREEN items to the colors of the 2nd layer border (I used blue tones #000080)
Change GREEN items to your image name and size for the 2nd Layer. Set table and image to same size.
Note: The blue background image is only a small block, but setting the image size stretches it to fill the large table.
You have to know the innermost image size (my horse picture) that is used in the 3rd layer to calculate the 2nd layer.
I defined the table as 330x409 so the blue border would be 43 pixels wider on each side than the inside image (horse):
2nd table calculation: take the 3rd table image (inside image) 244 wide+ 43 left side + 43 right side = 330 wide
2nd table calculation: take the 3rd table image (inside image) 323 wide+ 43 top side + 43 bottom side = 409 high
Change BLUE items to your image name and size for the 3rd Layer. (Note: my horse image is 244 x 323)
Change NAVY items to match your font colors and sizes for text.
Change RED items to match your links.
Add or remove <bR> to push text down or move it up.
Want the picture with no links or text? Just leave out the code bracketed with START STOP notes!
<table border="2" bordercolordark="#000080" bordercolor="#000080" bordercolorlight="#000080" cellpadding="1" cellspacing="1" width="330" height="409">
<tr>
<td align="center" background="^GEMDIR/dkseablueparchment.jpg" valign="Middle" width="330" height="409">
<p align=center>
<table background="^GEMDIR/baypjumpweavefade2.png" border="0" cellpadding="6" cellspacing="2" width="244" height="323">
<tr>
<tD VALIGN=TOP HEIGHT= 112 >
<NOBR>
<div>
<!-- START If you do not want text or links on the image, remove this section ! -->
<FONT SIZE="3" COLOR="#330099"><B>RIDING FACILITIES in the area:</B></FONT>
<bR>
<bR>
<bR>
<bR>
<bR>
<bR>
<bR>
<bR>
<bR>
<bR>
<bR>
<bR>
<div id="menucont2">
<a href="id16.htm" TARGET="_top" TITLE="A fun place to ride!" id="a1" class="menulinks">The Funny Farm</a><br>
<a href="id16.htm" TARGET="_top" TITLE="Lessons!!" id="a2" class="menulinks">Standards and Hedges</a><br>
<a href="id16.htm" TARGET="_top" TITLE="Watch for that whip!" id="a3" class="menulinks">Lessons with Midge</a><br>
<a href="id16.htm" TARGET="_top" TITLE="Board and lessons here!" id="a4" class="menulinks">The Stable Ones</a><br>
</div>
<!--STOP-->
</NOBR>
</td>
</tr>
</table>
</p>
</td>
</tr>
</table>
|