Go Back   vb.org Archive > vBulletin 3 Discussion > vB3 Programming Discussions
Reload this Page [HEADER] Logo with rollover buttons
FAQ Members List Calendar Search Today's Posts Mark Forums Read
  #1  
Old 02-05-2003, 05:22 PM
Mike
Guest
  
Posts: n/a
Default [HEADER] Logo with rollover buttons
Hi, i made an very nice header in photoshop, also made rollover buttons ( mouseover ) but now i`m stucking where i do put the code what i got, i knew that i had replace the image/ to {imagesfolder} the header is looking good, all images are on there places, but no mouse over effect

Here i have the code from photoshop:
Code:
<HTML>
<HEAD>
<TITLE>banner1slice</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		REG_over = newImage("images/REG-over.gif");
		MEMBERS_REG_over = newImage("images/MEMBERS-REG_over.gif");
		MEMBERS_over = newImage("images/MEMBERS-over.gif");
		index_KNOP_F_LEADERS_MEMBERS_over = newImage("images/index_KNOP-F-LEADERS-MEMBER.gif");
		index_KNOP_F_LEADERS_over = newImage("images/index_KNOP-F-LEADERS-over.gif");
		ADVSEA_index_KNOP_F_LEADERS_over = newImage("images/ADVSEA-index_KNOP-F-LEADERS.gif");
		ADVSEA_HELP_over = newImage("images/ADVSEA-HELP_over.gif");
		ADVSEA_over = newImage("images/ADVSEA-over.gif");
		HELP_UCP_over = newImage("images/HELP-UCP_over.gif");
		HELP_over = newImage("images/HELP-over.gif");
		UCP_over = newImage("images/UCP-over.gif");
		preloadFlag = true;
	}
}

// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
<TABLE WIDTH=758 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=8>
			<IMG SRC="images/index_01.gif" WIDTH=758 HEIGHT=78 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/index_02.gif" WIDTH=111 HEIGHT=22 ALT=""></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('REG', 'images/REG-over.gif', 'MEMBERS', 'images/MEMBERS-REG_over.gif'); return true;"
				ONMOUSEOUT="changeImages('REG', 'images/REG.gif', 'MEMBERS', 'images/MEMBERS.gif'); return true;">
				<IMG NAME="REG" SRC="images/REG.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('MEMBERS', 'images/MEMBERS-over.gif', 'index_KNOP_F_LEADERS', 'images/index_KNOP-F-LEADERS-MEMBER.gif'); return true;"
				ONMOUSEOUT="changeImages('MEMBERS', 'images/MEMBERS.gif', 'index_KNOP_F_LEADERS', 'images/index_KNOP-F-LEADERS.gif'); return true;">
				<IMG NAME="MEMBERS" SRC="images/MEMBERS.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('index_KNOP_F_LEADERS', 'images/index_KNOP-F-LEADERS-over.gif', 'ADVSEA', 'images/ADVSEA-index_KNOP-F-LEADERS.gif'); return true;"
				ONMOUSEOUT="changeImages('index_KNOP_F_LEADERS', 'images/index_KNOP-F-LEADERS.gif', 'ADVSEA', 'images/ADVSEA.gif'); return true;">
				<IMG NAME="index_KNOP_F_LEADERS" SRC="images/index_KNOP-F-LEADERS.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('ADVSEA', 'images/ADVSEA-over.gif'); return true;"
				ONMOUSEOUT="changeImages('ADVSEA', 'images/ADVSEA.gif'); return true;">
				<IMG NAME="ADVSEA" SRC="images/ADVSEA.gif" WIDTH=72 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('ADVSEA', 'images/ADVSEA-HELP_over.gif', 'HELP', 'images/HELP-over.gif'); return true;"
				ONMOUSEOUT="changeImages('ADVSEA', 'images/ADVSEA.gif', 'HELP', 'images/HELP.gif'); return true;">
				<IMG NAME="HELP" SRC="images/HELP.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('HELP', 'images/HELP-UCP_over.gif', 'UCP', 'images/UCP-over.gif'); return true;"
				ONMOUSEOUT="changeImages('HELP', 'images/HELP.gif', 'UCP', 'images/UCP.gif'); return true;">
				<IMG NAME="UCP" SRC="images/UCP.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<IMG SRC="images/index_09.gif" WIDTH=220 HEIGHT=22 ALT=""></TD>
	</TR>
</TABLE>
</BODY>
</HTML>
Here is my header template :

Code:
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#333D4D" width="758">
    <tr>
      <td width="100%">
<div align="center">
  <center>
        <table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111" width="758" id="AutoNumber1">
          <tr> 
            <td background="{imagesfolder}/topbg.gif"><TABLE WIDTH=758 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=8>
			<IMG SRC="{imagesfolder}/banner/index_01.gif" WIDTH=758 HEIGHT=78 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="{imagesfolder}/banner/index_02.gif" WIDTH=111 HEIGHT=22 ALT=""></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('REG', '{imagesfolder}/banner/REG-over.gif', 'MEMBERS', '{imagesfolder}/banner/MEMBERS-REG_over.gif'); return true;"
				ONMOUSEOUT="changeImages('REG', '{imagesfolder}/banner/REG.gif', 'MEMBERS', '{imagesfolder}/banner/MEMBERS.gif'); return true;">
				<IMG NAME="REG" SRC="{imagesfolder}/banner/REG.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('MEMBERS', '{imagesfolder}/banner/MEMBERS-over.gif', 'index_KNOP_F_LEADERS', '{imagesfolder}/banner/index_KNOP-F-LEADERS-MEMBER.gif'); return true;"
				ONMOUSEOUT="changeImages('MEMBERS', '{imagesfolder}/banner/MEMBERS.gif', 'index_KNOP_F_LEADERS', '{imagesfolder}/banner/index_KNOP-F-LEADERS.gif'); return true;">
				<IMG NAME="MEMBERS" SRC="{imagesfolder}/banner/MEMBERS.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('index_KNOP_F_LEADERS', '{imagesfolder}/banner/index_KNOP-F-LEADERS-over.gif', 'ADVSEA', '{imagesfolder}/banner/ADVSEA-index_KNOP-F-LEADERS.gif'); return true;"
				ONMOUSEOUT="changeImages('index_KNOP_F_LEADERS', '{imagesfolder}/banner/index_KNOP-F-LEADERS.gif', 'ADVSEA', '{imagesfolder}/banner/ADVSEA.gif'); return true;">
				<IMG NAME="index_KNOP_F_LEADERS" SRC="{imagesfolder}/banner/index_KNOP-F-LEADERS.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('ADVSEA', '{imagesfolder}/banner/ADVSEA-over.gif'); return true;"
				ONMOUSEOUT="changeImages('ADVSEA', '{imagesfolder}/banner/ADVSEA.gif'); return true;">
				<IMG NAME="ADVSEA" SRC="{imagesfolder}/banner/ADVSEA.gif" WIDTH=72 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('ADVSEA', '{imagesfolder}/banner/ADVSEA-HELP_over.gif', 'HELP', '{imagesfolder}/banner/HELP-over.gif'); return true;"
				ONMOUSEOUT="changeImages('ADVSEA', '{imagesfolder}/banner/ADVSEA.gif', 'HELP', '{imagesfolder}/banner/HELP.gif'); return true;">
				<IMG NAME="HELP" SRC="{imagesfolder}/banner/HELP.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('HELP', '{imagesfolder}/banner/HELP-UCP_over.gif', 'UCP', '{imagesfolder}/banner/UCP-over.gif'); return true;"
				ONMOUSEOUT="changeImages('HELP', '{imagesfolder}/banner/HELP.gif', 'UCP', '{imagesfolder}/banner/UCP.gif'); return true;">
				<IMG NAME="UCP" SRC="{imagesfolder}/banner/UCP.gif" WIDTH=71 HEIGHT=22 BORDER=0 ALT=""></A></TD>
		<TD>
			<IMG SRC="{imagesfolder}/banner/index_09.gif" WIDTH=220 HEIGHT=22 ALT=""></TD>
	</TR>
</TABLE> </td>
          </tr>
        </table>
  </center>
</div>
<div align="center">
  <center>
      </center>
</div>
<div align="center">
  <center>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="758" id="AutoNumber3">
    <tr>
      <td width="50%" background="{imagesfolder}/bg.jpg">&nbsp;</td>
      <td width="50%">
      <p align="right"><table align="right" border="0" background="{imagesfolder}/searchbg.jpg" cellpadding="4" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="390">
                <form action="search.php" method="post"><tr>
                  <td width="156px" background="{imagesfolder}/searchleft.gif" height="34">
                  <p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
                  <td width="50%" background="{imagesfolder}/searchbg.jpg" valign="baseline"><input type="hidden" name="s" value="$session[sessionhash]">
                  <p align="center">
<input type="text" name="query" class="search">
<input type="hidden" name="searchuser" value="">
	<input type="hidden" name="forumchoice" value="-1">
	<input type="hidden" name="searchdate" value="-1">
	<input type="hidden" name="sortby" value="lastpost">
	<input type="hidden" name="sortorder" value="descending">
	<input type="hidden" name="beforeafter" value="after">
	<input type="hidden" name="action" value="simplesearch">
	<input type="hidden" name="titleonly" value="">
	<input type="hidden" name="showposts" value="">
	<input type="hidden" name="exactname" value="yes">
</td>
                  <td width="10%" background="{imagesfolder}/gobg.gif">
                  <p align="center">
                  <INPUT TYPE="image" SRC="{imagesfolder}/blank.gif" BORDER="0" ALT="Submit" accesskey="s"></td>
                </tr></form>
              </table>
</td>
    </tr>
  </table>
  </center>
</div>

<div align="center">
  <center>
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="758" id="AutoNumber4" background="{imagesfolder}/bg.jpg">
    <tr>
      <td width="100%">
here is my headinclude :
Code:
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<meta http-equiv="MSThemeCompatible" content="Yes">

<style type="text/css">
.smallbox {
border-top: #FFFFFF 1px solid;
border-bottom: #FFFFFF 1px solid;
border-left: #FFFFFF 1px solid;
border-right: #FFFFFF 1px solFid;
font: bold 8pt Verdana, Arial, Helvetica, Sans-Serif;
color: #ffffff;
background-color: #727E93;
width: 70px;
height: 17px;
			}

.search {
border-top: #d6dae6 1px solid;
border-bottom: #d6dae6 1px solid;
border-left: #d6dae6 1px solid;
border-right: #d6dae6 1px solid;
font: bold 8pt Verdana, Arial, Helvetica, Sans-Serif;
color: #ED9301;
background-color: #d6dae6;
width: 170px;
height: 17px;
			}
.Padding { padding: 0 } 

BODY {
background: #FFFFFF url('images/background.gif') fixed;


	SCROLLBAR-ARROW-COLOR: {categoryfontcolor};
                  scrollbar-dark-shadow-color: #000000;
                   scrollbar-face-color:   #AFB6BF;
                   scrollbar-highlight-color: #E0F0FF;
                   scrollbar-shadow-color: #637188;
                   scrollbar-track-color:  #A0AAB9;
}
SELECT {
	FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
	FONT-SIZE: 11px;
	COLOR: #000000;
	BACKGROUND-COLOR: #CFCFCF
}
TEXTAREA, .bginput {
	FONT-SIZE: 12px;
	FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
	COLOR: #000000;
                border-top:1px solid;
                border-bottom:1px solid;
                border-left: 1px solid;
                border-right:1px solid;
                BORDER-COLOR: #838EA0;
	BACKGROUND-COLOR: #ffffff
}
A:link, A:visited, A:active {
	COLOR: {linkcolor};
}
A:hover {
	COLOR: {hovercolor};
}
a.title:link, a.title:visited, a.title:active {
                font-family: Tahoma;
	COLOR: #000000;
                TEXT-DECORATION: none;
}

a.title:hover {
                COLOR: #727E93;
}

#cat A:link, #cat A:visited, #cat A:active {
	COLOR: {categoryfontcolor};
	TEXT-DECORATION: none;
}
#cat A:hover {
	COLOR: {linkcolor};
	TEXT-DECORATION: none;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
	COLOR: {linkcolor};
	TEXT-DECORATION: none;
}
#ltlink A:hover {
	COLOR: {hovercolor};
	TEXT-DECORATION: underline;
}
.thtcolor {
	COLOR: {tableheadtextcolor};
}
</style>

<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		REG_over = newImage("images/REG-over.gif");
		MEMBERS_REG_over = newImage("images/MEMBERS-REG_over.gif");
		MEMBERS_over = newImage("images/MEMBERS-over.gif");
		banner1slice_KNOP_F_LEADERS_MEMBERS_over = newImage("images/banner1slice_KNOP-F-LEAD-09.gif");
		banner1slice_KNOP_F_LEADERS_over = newImage("images/banner1slice_KNOP-F-LEAD-10.gif");
		ADVSEA_banner1slice_KNOP_F_LEADERS_over = newImage("images/ADVSEA-banner1slice_KNOP-F-.gif");
		ADVSEA_HELP_over = newImage("images/ADVSEA-HELP_over.gif");
		ADVSEA_over = newImage("images/ADVSEA-over.gif");
		HELP_UCP_over = newImage("images/HELP-UCP_over.gif");
		HELP_over = newImage("images/HELP-over.gif");
		UCP_over = newImage("images/UCP-over.gif");
		preloadFlag = true;
	}
}

// -->
</SCRIPT>


$headnewpm
can someone help me out what i must change to let the mouseover thing working


tnx in advance !

Mike
Reply With Quote
  #2  
Old 02-05-2003, 05:23 PM
Mike
Guest
  
Posts: n/a
Default
sorry for that i`m f*cking up the layout
Reply With Quote
Reply

« Previous Thread | Next Thread »
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 04:05 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03631 seconds
  • Memory Usage 2,212KB
  • Queries Executed 13 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (3)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (2)post_thanks_box
  • (2)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)post_thanks_postbit_info
  • (2)postbit
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete