PDA

View Full Version : [HEADER] Logo with rollover buttons

Mike
02-05-2003, 05:22 PM
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:
<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 :

<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 :
<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
Mike
02-05-2003, 05:23 PM
sorry for that i`m f*cking up the layout :(