Icons with rollover effect below navbar
Mod Version: 1.00, by Sofia
| vB Version: 3.8.x | Rating:  (5 votes - 4.80 average) |
Installs: 107 |
| Released: 29 May 2009 | Last Update: Never | Downloads: 5 |
 Not Supported
 Re-usable Code
Translations
|
||
Icons with rollover effect below navbar
Description
This mod allows you to add an icons box below your navbar. Icons have an increase effect simply due to a rollover. No Javascript code. This mod works with all versions of Firefox, IE and Nescape.
In your template Navbar, add at the bottom:
1. Upload
You must upload your icons into "images/misc".
For an icon, you must have 2 images : a small image for egs: 50x50px) and a big image (for egs: 100x100px). Big images appears on mouseover.
Icons name:
icon1_small.png
icon1_big.png
icon2_small.png
icon2_big.png
etc...
2. In the previous code, please modify:
Example: Icon 1
----------------------------------------------------------------------
<a href="www.link.com/albums" -- Enter your redirect link
----------------------------------------------------------------------
----------------------------------------------------------------------
alt="title" -- Enter your image title
----------------------------------------------------------------------
----------------------------------------------------------------------
icon1.src='images/misc/icon1_big.png
icon1.src='images/misc/icon1_small.png
<img src="images/misc/icon1_small.png"
name="icon1"
If you add more icons, you must rename this by icon4, icon5, icon6, etc...
----------------------------------------------------------------------
Code:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" width="100%" align="center"> <tr> <td class="alt1" align="center"> <a href="www.link.com/albums" onMouseOver="icon1.src='images/misc/icon1_big.png'" onMouseOut="icon1.src='images/misc/icon1_small.png'"><img src="images/misc/icon1_small.png" border="0" name="icon1" alt="title" HSPACE=0 VSPACE=0></a> <a href="www.link.com/logs" onMouseOver="icon2.src='images/misc/icon2_big.png'" onMouseOut="icon2.src='images/misc/icon2_small.png'"><img src="images/misc/icon2_small.png" border="0" name="icon2" alt="title" HSPACE=0 VSPACE=0></a> <a href="www.link.com/partner" onMouseOver="icon3.src='images/misc/icon3_big.png'" onMouseOut="icon3.src='images/misc/icon3_small.png'"><img src="images/misc/icon3_small.png" border="0" name="icon3" alt="title" HSPACE=0 VSPACE=0></a> </td></tr></table> <br />
1. Upload
You must upload your icons into "images/misc".
For an icon, you must have 2 images : a small image for egs: 50x50px) and a big image (for egs: 100x100px). Big images appears on mouseover.
Icons name:
icon1_small.png
icon1_big.png
icon2_small.png
icon2_big.png
etc...
2. In the previous code, please modify:
Example: Icon 1
----------------------------------------------------------------------
<a href="www.link.com/albums" -- Enter your redirect link
----------------------------------------------------------------------
----------------------------------------------------------------------
alt="title" -- Enter your image title
----------------------------------------------------------------------
----------------------------------------------------------------------
icon1.src='images/misc/icon1_big.png
icon1.src='images/misc/icon1_small.png
<img src="images/misc/icon1_small.png"
name="icon1"
If you add more icons, you must rename this by icon4, icon5, icon6, etc...
----------------------------------------------------------------------
Enjoy! 
Download
No files for download.
Screenshots
