Help ASAP. Problems with PHP including Javascript rollover buttons!
Hi,
I need help with this ASAP...I've tried searching EVERYWHERE for a solution.
Here is my problem:
I am including my left bar buttons, which are javascript, using the following:
<?php include("/home/user/public_html/html/buttonsmain.php");?>'
It is including javascript buttons (see below)...I have tried every type of javascript rollover and they still DO NOT work in IE...instead, it completely ruins my page, all of the tables are scrambled everywhere, etc.
I know the problem deals directly with the php include and/or the javascript buttons because I have completely deleted the php include command from my file and my website returns back to normal.
In buttonsmain.php I have the following code:
<table width="100%" border=0 cellspacing=0 cellpadding=0 nof=te>
<tr>
<td align="CENTER">
<table id="BUTTONSMAIN" border=0 cellspacing=0 cellpadding=0 width=177>
<tr>
<td width=36>
<img id="Picture14" height=61 width=36 src="http://www.mysite.com/assets/images/aabutton_leftdefault.jpg" vspace=0 hspace=0 align="TOP" border=0>
</td>
<td width=141>
<script language="JavaScript"><!--
function onPictureRollover3A22163Over() {}
function onPictureRollover3A22163Out() {}
//--></script>
<script language="JavaScript"><!--
graphic1PictureRollover3A22163 = new Image()
graphic1PictureRollover3A22163.src = 'http://www.mysite.com/aabutton_about1.jpg';
graphic2PictureRollover3A22163 = new Image()
graphic2PictureRollover3A22163.src = 'http://www.mysite.com/aabutton_about2.jpg';
function onPictureRollover3A22163Over() {
document.PictureRollover3A22163.src=graphic2PictureRollover3A22163.src;
}
function onPictureRollover3A22163Out() {
document.PictureRollover3A22163.src=graphic1PictureRollover3A22163.src;
}
//--></script>
<a href="http://www.mysite.com" onMouseOver="onPictureRollover3A22163Over(this)" onMouseOut="onPictureRollover3A22163Out(this)"><img id="PictureRollover3" height=61 width=141 src="http://www.mysite.com/aabutton_about1.jpg" vspace=0 hspace=0 align="TOP" border=0 name=PictureRollover3A22163></a>
</td>
</tr>
<tr>
<td width=36>
<img id="Picture16" height=61 width=36 src="http://www.mysite.com/assets/images/aabutton_leftdefault.jpg" vspace=0 hspace=0 align="TOP" border=0>
</td>
<td width=141>
<script language="JavaScript"><!--
function onPictureRollover4A28263Over() {}
function onPictureRollover4A28263Out() {}
//--></script>
<script language="JavaScript"><!--
graphic1PictureRollover4A28263 = new Image()
graphic1PictureRollover4A28263.src = 'http://www.mysite.com/aabutton_photo1.jpg';
graphic2PictureRollover4A28263 = new Image()
graphic2PictureRollover4A28263.src = 'http://www.mysite.com/aabutton_photo2.jpg';
function onPictureRollover4A28263Over() {
document.PictureRollover4A28263.src=graphic2PictureRollover4A28263.src;
}
function onPictureRollover4A28263Out() {
document.PictureRollover4A28263.src=graphic1PictureRollover4A28263.src;
}
//--></script>
<a href="http://www.mysite.com" onMouseOver="onPictureRollover4A28263Over(this)" onMouseOut="onPictureRollover4A28263Out(this)"><img id="PictureRollover4" height=61 width=141 src="http://www.mysite.com/aabutton_photo1.jpg" vspace=0 hspace=0 align="TOP" border=0 name=PictureRollover4A28263></a>
</td>
</tr>
<tr>
<td width=36 height=17>
<img id="Picture37" height=61 width=36 src="http://www.mysite.com/assets/images/aabutton_leftdefault.jpg" vspace=0 hspace=0 align="TOP" border=0>
</td>
<td width=141>
<script language="JavaScript"><!--
function onPictureRollover5A34363Over() {}
function onPictureRollover5A34363Out() {}
//--></script>
<script language="JavaScript"><!--
graphic1PictureRollover5A34363 = new Image()
graphic1PictureRollover5A34363.src = 'http://www.mysite.com/aabutton_store.jpg';
graphic2PictureRollover5A34363 = new Image()
graphic2PictureRollover5A34363.src = 'http://www.mysite.com/aabutton_store2.jpg';
function onPictureRollover5A34363Over() {
document.PictureRollover5A34363.src=graphic2PictureRollover5A34363.src;
}
function onPictureRollover5A34363Out() {
document.PictureRollover5A34363.src=graphic1PictureRollover5A34363.src;
}
//--></script>
<a href="http://www.mysite.com/index.php" onMouseOver="onPictureRollover5A34363Over(this)" onMouseOut="onPictureRollover5A34363Out(this)"><img id="PictureRollover5" height=61 width=141 src="http://www.mysite.com/aabutton_store.jpg" vspace=0 hspace=0 align="TOP" border=0 name=PictureRollover5A34363></a>
</td>
</tr>
<tr>
<td width=36>
<img id="Picture39" height=61 width=36 src="http://www.mysite.com/assets/images/aabutton_leftdefault.jpg" vspace=0 hspace=0 align="TOP" border=0>
</td>
<td width=141>
<script language="JavaScript"><!--
function onPictureRollover1A40463Over() {}
function onPictureRollover1A40463Out() {}
//--></script>
<script language="JavaScript"><!--
graphic1PictureRollover1A40463 = new Image()
graphic1PictureRollover1A40463.src = 'http://www.mysite.com/aabutton_links1.jpg';
graphic2PictureRollover1A40463 = new Image()
graphic2PictureRollover1A40463.src = 'http://www.mysite.com/aabutton_links2.jpg';
function onPictureRollover1A40463Over() {
document.PictureRollover1A40463.src=graphic2PictureRollover1A40463.src;
}
function onPictureRollover1A40463Out() {
document.PictureRollover1A40463.src=graphic1PictureRollover1A40463.src;
}
//--></script>
<a href="http://www.mysite.com/index.php" onMouseOver="onPictureRollover1A40463Over(this)" onMouseOut="onPictureRollover1A40463Out(this)"><img id="PictureRollover1" height=61 width=141 src="http://www.mysite.com/aabutton_links1.jpg" vspace=0 hspace=0 align="TOP" border=0 name=PictureRollover1A40463></a>
</td>
</tr>
<tr>
<td colspan=2>
<table width="100%" border=0 cellspacing=0 cellpadding=0 nof=te>
<tr>
<td align="CENTER"><img id="Picture40" height=26 width=177 src="http://www.mysite.com/assets/images/aabutton_bottomdefault.jpg" border=0></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Suzanne posted this at 23:44 — 27th September 2004.
She has: 5,507 posts
Joined: Feb 2000
Pull the JavaScript into a single function, store that in a separate file, and include the file in the head of the page instead.
<script type="text/javascript" src="yourjsfile.js"></script>
ComposerRyan posted this at 23:51 — 27th September 2004.
They have: 22 posts
Joined: Jul 2003
What do you mean by "pull the Javascript into a single function"?
I appreciate your help Suzanne.
Ryan
Suzanne posted this at 00:00 — 28th September 2004.
She has: 5,507 posts
Joined: Feb 2000
You have endless piles of this:
<script language="JavaScript"><!--function onPictureRollover3A22163Over() {}
function onPictureRollover3A22163Out() {}
//--></script>
<script language="JavaScript"><!--
graphic1PictureRollover3A22163 = new Image()
graphic1PictureRollover3A22163.src = 'http://www.mysite.com/aabutton_about1.jpg';
graphic2PictureRollover3A22163 = new Image()
graphic2PictureRollover3A22163.src = 'http://www.mysite.com/aabutton_about2.jpg';
function onPictureRollover3A22163Over() {
document.PictureRollover3A22163.src=graphic2PictureRollover3A22163.src;
}
function onPictureRollover3A22163Out() {
document.PictureRollover3A22163.src=graphic1PictureRollover3A22163.src;
}
//--></script>
You don't need a new function for each image. But if you're not familiar with JavaScript, just pull it all out and put it in a file named rollover.js without the HTML tags like this:
function onPictureRollover3A22163Over() {}
function onPictureRollover3A22163Out() {}
graphic1PictureRollover3A22163 = new Image()
graphic1PictureRollover3A22163.src = 'http://www.mysite.com/aabutton_about1.jpg';
graphic2PictureRollover3A22163 = new Image()
graphic2PictureRollover3A22163.src = 'http://www.mysite.com/aabutton_about2.jpg';
function onPictureRollover3A22163Over() {
document.PictureRollover3A22163.src=graphic2PictureRollover3A22163.src;
}
function onPictureRollover3A22163Out() {
document.PictureRollover3A22163.src=graphic1PictureRollover3A22163.src;
}
Then you can worry about tidying it up later when you're more familiar with JavaScript.
ComposerRyan posted this at 00:06 — 28th September 2004.
They have: 22 posts
Joined: Jul 2003
But if I call it in the head, how do I know where it will display on my page? Do I use a php include command?
Suzanne posted this at 00:14 — 28th September 2004.
She has: 5,507 posts
Joined: Feb 2000
The html stays the same in the links that calls the function. You don't need to do anything put keep:
<a href="http://www.mysite.com/index.php" onMouseOver="onPictureRollover1A40463Over(this)" onMouseOut="onPictureRollover1A40463Out(this)"><img id="PictureRollover1" height=61 width=141 src="http://www.mysite.com/aabutton_links1.jpg" vspace=0 hspace=0 align="TOP" border=0 name=PictureRollover1A40463></a>Where it is and move the <script> tags off the page into the new file.
The browser will read the JavaScript functions and know them when the user gets to the link.
ComposerRyan posted this at 00:54 — 28th September 2004.
They have: 22 posts
Joined: Jul 2003
Thanks Suzanne for helping me out - I really appreciate it. Keep up the great work!
By the way, I noticed that you now have 5,678 posts...that is amazing and all of your help means a lot to me and the community.
Ryan
Need a website? WebQuad offers high quality website design services at affordable prices! Click here now to visit webquad.com
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.