If someone could help me it would be graciously appreciated

trippa18 · #1 December 10th, 2002, 05:01 AM

Ok here is the thing my website that I am designing for class is due thursday. I have everything looking real nice but I want to implement a rollover gif animation (a enter button) on my splash page. I have tried for 3 days to due this, but to no avail. It just wont work. I dont know where to put the data. I am using tables and the table that I want to put the gif in is on the fourth table row second data table. If you guys and girls dont mind I am posting the html code along with the gif html code

This is my splash page table html document

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/transitional".dtd">

<html>
<head>
<title>Splash.html</title>

</head>
<body bgcolor="#ffffff">

<table align="center" cellspacing="0" cellpadding="0" border="0" bordercolor="#ff0000">

<tr>
<td width="396" height="144"><img src="my web folder/images/images for splash/1rowonesplsh.jpg"/></td>
<td width="396" height="144"><img src="my web folder/images/images for splash/2rowonesplsh.jpg"/></td>
</tr>

<table align="center" cellspacing="0" cellpadding="0" border="0" bordercolor="#ff0000">

<tr>
<td width="276" height="162"><img src="my web folder/images/images for splash/1rowtwosplsh.jpg"/></td>
<td width="263" height="162"><img src="my web folder/images/images for splash/2rowtwosplsh.jpg"/></td>
<td width="253" height="162"><img src="my web folder/images/images for splash/3rowtwosplsh.jpg"/></td>
</tr>

<table align="center" cellspacing="0" cellpadding="0" border="0" bordercolor="#ff0000">

<tr>
<td width="276" height="148"><img src="my web folder/images/images for splash/1rowthreesplsh.jpg"/></td>
<td width="263" height="148"><img src="my web folder/images/images for splash/2rowthreesplsh.jpg"/></td>
<td width="253" height="148"><img src="my web folder/images/images for splash/3rowthreesplsh.jpg"/></td>
</tr>

<table align="center" cellspacing="0" cellpadding="0" border="0" bordercolor="#ff0000">

<tr>
<td width="276" height="57"><img src="my web folder/images/images for splash/1rowfoursplsh.jpg"/></td>
<td width="276" height="57"><img src= my enter button
<td width="253" height="57"><img src="my web folder/images/images for splash/3rowfoursplsh.jpg"/></td>
</tr>

</body>
</html>

This is my gif html and I think java code Please tell me where to put it .

Format: GIF
Dimensions: 263w x 57h
Size: 16.26K
Images: 3
Settings: Selective, 256 Colors, 100% Diffusion Dither, Transparency on, No Transparency Dither, Non-Interlaced, 0% Web Snap

<HTML>
<HEAD>
<TITLE>my_enter_button</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<SCRIPT TYPE="text/javascript">

</SCRIPT>

</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">

<A HREF="#"
ONMOUSEOVER="toggleImages('', new Array('my_enter_button_01', 'images/my_enter_button_01-over.gif')); return true;"
ONMOUSEOUT="toggleImages('my_enter_button_01', new Array('my_enter_button_01', 'images/my_enter_button_01.gif'), '', new Array('my_enter_button_01', 'images/my_enter_button_01.gif')); return true;"
ONMOUSEDOWN="toggleImages('', new Array('my_enter_button_01', 'images/my_enter_button_01-down.gif')); return true;"
ONMOUSEUP="selected='my_enter_button_01'; changeImages('my_enter_button_01', 'images/my_enter_button_01.gif'); return true;">
<IMG NAME="my_enter_button_01" SRC="images/my_enter_button_01.gif" WIDTH=263 HEIGHT=57 BORDER=0 ALT=""></A>

</BODY>
</HTML>

Thanks for your help

**rockboy** · #2 December 10th, 2002, 06:11 AM

At the risk of ruining your learning experience by doing your homework for you...

First things first, you need to fix the splash page table tags. There are extra table tags ( <table... > ) at the beginning of rows 2, 3, 4. Remove them. After the closing tag of the last row you need an end table tag ( </table> ). The basic table layout should look like this:

<table>


<tr>
<td></td>
<td></td>
</tr>


<tr>
<td></td>
<td></td>
</tr>


<tr>
<td></td>
<td></td>
</tr>


<tr>
<td></td>
<td></td>
</tr>

</table>

This makes a 2 wide 4 high table layout.

As far as the rollover script, it's fairly complex so you'll have to carefully copy and paste the elements of that code into the first html doc in the appropriate areas (head and body tags, link code, etc). Maybe someone else can help with that.

**Spider** · #3 December 10th, 2002, 07:20 AM

Click here for example of mouseover

Here is the code for the page

Code:


<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Rollover</title>
<SCRIPT LANGUAGE="JavaScript">
{   but_on = new Image(200,30); but_on.src = "enterg.jpg";
    but_off = new Image(200,30); but_off.src = "enter.jpg";
}
function SwitchGif(imgDocID,ImgObjName)
{   if (navigator.appName== "Netscape" && parseInt(navigator.appVersion) 
>= 3)
       document.images[imgDocID].src = eval(ImgObjName + ".src")
    else if (navigator.appName != "Netscape" && 
parseInt(navigator.appVersion) >= 4) 
       document.images[imgDocID].src = eval(ImgObjName + ".src")
}
</SCRIPT> 
</head>
<BODY>
<CENTER>
</center><CENTER><P>
<A HREF="page2.html" TARGET="_top" onMouseOver="SwitchGif('doc_but','but_on');
   window.status='ENTER ------------>' ; 
   return true;" onMouseOut="SwitchGif('doc_but','but_off');
   window.status=' ' ; return true;">
   <IMG SRC="enter.jpg" NAME="doc_but"
      ALT="made by Spider cybertechhelp.com" NATURALSIZEFLAG="3" ALIGN="BOTTOM"
      BORDER="0" width="200" height="30"></A>
</BODY>
</html>

Here are the two images

**degsy** · #4 December 10th, 2002, 06:07 PM

There are many different ways to perform RollOvers.

One of the easiest is this

Code:

<img src="buttonup.gif" width="100" height="50" name="image1"
onmouseover="image1.src='buttonover.gif';"
onmouseout="image1.src='buttonup.gif';">

Here are some examples
http://www.degs.co.uk/test/javascrip.../rollover1.htm

**Buzz** · #5 December 10th, 2002, 07:09 PM

What WYSIWYG editor are you using, trppa?

trippa18 · #6 December 11th, 2002, 07:55 AM

Man I dont know where to begin but I am so grateful for the help. I got it working with no problem. I will Let you guys know when my site will be up thanks.