Thread: [HEADER] Logo with rollover buttons
View Single Post
  #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
 
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01219 seconds
  • Memory Usage 1,844KB
  • Queries Executed 11 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD_SHOWPOST
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_box
  • (1)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit_info
  • (1)postbit
  • (1)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • reputationlevel
  • showthread
Included Files:
  • ./showpost.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
  • showpost_start
  • bbcode_fetch_tags
  • bbcode_create
  • postbit_factory
  • showpost_post
  • 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
  • showpost_complete