| TheLastSuperman |
05-25-2009 11:50 PM |
Quote:
Originally Posted by dancue
(Post 1817191)
Alright, I'm gonna give this a try now, but I'm not understanding how to get it to use images instead of the words. What did you do to achieve this?
|
Simple html my friend :D
So... if you ever want to do an image instead of text...
Example:
<a href="http://www.yoursite.com">This is the TEXT</a>
Now remove the text and replace w/ an image code to call the image!
<a href="http://www.yoursite.com"><img src="http://www.yoursite.com/images/image1.png"></a>
And your done!
More info included in the INSTALL.txt file and I also include a floder named SMANsUPLOAD to see how I modified it from the original!
Code:
/*======================================================================*\
|| #################################################################### ||
|| # [TGW] DD Mouseover Tabs Menu v0.0.1 ? by TheLastSuperman # ||
|| # ---------------------------------------------------------------- # ||
|| # For use with vBulletin Version 3.6.x - 3.7.x - 3.8.x # ||
|| # http://www.vbulletin.com | http://www.vbulletin.com/license.html # ||
|| #################################################################### ||
\*======================================================================*/
Hack Version: 0.0.1
Compatible vB version: 3.6.x - 3.7.x - 3.8.x
Installation:
Step 1: Unzip the files to a directory on your computer.
Step 2: Upload the files in UPLOAD folder to your forums directory (AFTER YOU MODIFY via the instructions @ http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm
Directory structure:
{ROOT}/mouseovertabs.css
{ROOT}/mouseovertabs.js
{ROOT}/submenucontents.htm
Step 3: Edit Templates
- Style Manager --> Header
At the VERY TOP or Find:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Add Below:
<link rel="stylesheet" type="text/css" href="mouseovertabs.css" />
<script src="mouseovertabs.js" type="text/javascript">
/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
- NOW, you have several options!
-- Paste this next code into your Navbar for it to be up top like mine...
OR
-- Find a place and tinker ;) the sky's the limit :D
Here's the code (now try the 2 above options):
<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">No Sub Menu</a></li>
</ul>
</div>
<div id="mysubmenuarea" class="tabsmenucontentclass">
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
</div>
<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)
</script>
If you want that in the Navbar like mine then
FIND (or similar):
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"></a>
<strong>
and paste the above code below the <strong> tags
Of course you can modify/replace any of the images and it is all nearly completely customizable via the files in the UPLOAD folder i.e. the CSS and JS files!
I have included a Folder named SMANsUPLOAD so you can see how I modified it for use and compare, please review if needed.
Also please Reference Dynamic Drives Information for further information --> http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm
Step 4: Enjoy your new hack, give me feedback, and click install.
TheLastSuperman - Tournament Gaming World
Hopefully that helps! anything else just post back or if you see something you like on the DEMO site just ask!
MY VIDEO DIRECTORY MOD to be released soon as well so everyone look for it!
S-MAN |
More Information