vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=15)
-   -   [HEADER] Logo with rollover buttons (https://vborg.vbsupport.ru/showthread.php?t=86215)

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

Mike 02-05-2003 05:23 PM
sorry for that i`m f*cking up the layout :(


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

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01507 seconds
  • Memory Usage 1,801KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (2)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete