Forums / Templates, Stylesheets, Page Layout / Using a Table with Rollover Images in the tpl_header.php

Using a Table with Rollover Images in the tpl_header.php

Locked

Views: 3,934

Results 1 to 18 of 18
This thread is locked. New replies are disabled.
1 Aug 2006, 9:33 PM
#1
vegascoug avatar

vegascoug

New Zenner

Join Date:
Feb 2006
Posts:
94
Plugin Contributions:
0

Using a Table with Rollover Images in the tpl_header.php

I've searched and found a lot of "close" but no cigar help posts on here, so I figured I ask the exact question in hopes one of the experts can help me.

I created a nice image rollover link bar in PhotoShop/Image Ready, and I have it as a table set up on all of my pages.

My question is if there is a way to insert some code into the tpl_header.php to make this function. I know how to put the table in, that's a snap.

But the rollover function requires that there be coding between the <head> </head> tags on an HTML page, and an onload="preloadImages in the <body> tag in order for the rollover images to function.

I don't know enough about PHP to know how to accomplish this, so I was hoping it was possible and that someone can help me here.

If it's not possible that way, what about inserting a header page into the code? What I mean is I have a page header.html that I use for other html pages, and then I only have to update that page when I make changes to links, etc. and it doesn't take me forever to edit all the pages accessing that file. Can I insert code in PHP that will reference an html file?

Thanks

1 Aug 2006, 9:44 PM
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Using a Table with Rollover Images in the tpl_header.php

What I have done and seen others do for this is to take your image and slice it into distinct areas. Then in the descrption of the display for these items you define the href link for each item. this can be done in html as long as you locate it outside of the php tags in your tpl_header.php give it a class and define your rollover effects in the css file.

Zen-Venom Get Bitten

1 Aug 2006, 9:56 PM
#3
vegascoug avatar

vegascoug

New Zenner

Join Date:
Feb 2006
Posts:
94
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

Thanks, sometimes it's just too easy and you don't see it

Googled it and found my answer

<? include("header.html") ?>

Worked PERFECTLY!

2 Aug 2006, 5:59 AM
#4
danielle avatar

danielle

Totally Zenned

Join Date:
Oct 2004
Posts:
973
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

Hi, I wonder if you could help me with this? I am upgrading from 1.2.7 to 1.3.0.2. I referenced header.html, this is the code in the header.html file:

<tr><td>
    <table border="0" width="100%" cellspacing="0" cellpadding="0" class="header">
      <tr> 
<td background="includes/templates/custom/images/stripedbg1.gif"><img src="includes/templates/custom/images/stripedbg1_graphic.gif" width="180" height="18"></td>
</tr> <tr> <td valign="top"> <table width="100%" style="border: #267A96; border-style: dotted; border-top-width: 4px; border-right-width: 0px; border-bottom-width: 4px; border-left-width: 0px;" cellspacing="0" cellpadding="0" bgcolor="#DAF0F6"> <tr valign="top"> <td width="28%"> <div align="center"><img src="includes/templates/custom/images/boutique_top.gif" width="204" height="195" alt="copyright"></div> </td> <td width="48%"> <div align="center"><img src="includes/templates/custom/images/webtopper_name.gif" width="350" height="195" alt="Babies N Bellies"></div> </td> <td width="24%"> <div align="center"><img src="includes/templates/custom/images/lady_store.gif" width="114" height="195" alt="copyright"></div>
      </td>
    </tr>
  </table>
<table border="0" cellspacing="0" cellpadding="0" class="headerNavigation" align="center"> <tr class="headerNavigation"> <td width="17%"> <div align="center"><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','fpdb/images/Theme0/homebtn_over.gif',1)"><img name="home" border="0" src="fpdb/images/Theme0/homebtn.gif" width="125" height="40" alt="Home"></a></div>
      </td>
      <td width="19%"> 
        <div align="center"><a href="index.php?main_page=infopages&pages_id=6" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','fpdb/images/Theme0/aboutbtn_over.gif',1)"><img name="about" border="0" src="fpdb/images/Theme0/aboutbtn.gif" width="125" height="40" alt="About Us"></a></div>
      </td>
      <td width="18%"> 
        <div align="center"><a href="index.php?main_page=infopages&pages_id=7" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bellcash','','fpdb/images/Theme0/bellycashbtn_over.gif',1)"><img name="bellcash" border="0" src="fpdb/images/Theme0/bellycashbtn.gif" width="125" height="40" alt="belly cash"></a></div>
      </td>
      <td width="14%"> 
        <div align="center"><a href="index.php?main_page=infopages&pages_id=8" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('press','','fpdb/images/Theme0/pressbtn_over.gif',1)"><img name="press" border="0" src="fpdb/images/Theme0/pressbtn.gif" width="125" height="40" alt="press"></a></div>
      </td>

      <td width="16%"> 
        <div align="center"><a href="index.php?main_page=infopages&pages_id=9" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('faq','','fpdb/images/Theme0/faqbtn_over.gif',1)"><img name="faq" border="0" src="fpdb/images/Theme0/faqbtn.gif" width="125" height="40" alt="faq"></a></div>
      </td>
      <td width="16%"> 
        <div align="center"><a href="index.php?main_page=contact_us" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','fpdb/images/Theme0/contactbtn_over.gif',1)"><img name="contact" border="0" src="fpdb/images/Theme0/contactbtn.gif" width="125" height="40" alt="contact"></a></div>
      </td>
      </tr>
    </table>
<table width="100%" style="border: #D05489; border-style: dotted; border-top-width: 4px; border-right-width: 0px; border-bottom-width: 4px; border-left-width: 0px;" cellspacing="0" cellpadding="0"> <tr> <td background="includes/templates/custom/images/stripedbg1.gif" valign="top"><img src="includes/templates/custom/images/stripedbg1_graphic.gif" width="180" height="18"></td>
    </tr>
  </table>
</td>
</tr>

It worked perfectly on 1.2.7, but not on the new version. Nothing happens on the mouseover. What am I doing wrong?

Thanks!

Danielle

2 Aug 2006, 8:46 AM
#5
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Using a Table with Rollover Images in the tpl_header.php

You are using the old file that references many TD's(tables) and there are very few in 1.3.x.. Use a program like win merge or another and port the pertinent information to a copy of this file from the 1.3.x install.

Zen-Venom Get Bitten

2 Aug 2006, 1:59 PM
#6
vegascoug avatar

vegascoug

New Zenner

Join Date:
Feb 2006
Posts:
94
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

I'm not expert, but I had problems with my images until I hard coded the path into the header.html file, vs images/picture.jpg

Once I used the full path, http://mydomain.com/images/picture.jpg all the images showed up perfectly and worked great.

Mike

2 Aug 2006, 4:40 PM
#7
danielle avatar

danielle

Totally Zenned

Join Date:
Oct 2004
Posts:
973
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

kobra:

You are using the old file that references many TD's(tables) and there are very few in 1.3.x.. Use a program like win merge or another and port the pertinent information to a copy of this file from the 1.3.x install.

That is what I did...my header.html file only contains the needed info. My tpl_header.php file is the 1.3 version, but I deleted all the nav and logo code since I don't need it.

Danielle

2 Aug 2006, 4:43 PM
#8
danielle avatar

danielle

Totally Zenned

Join Date:
Oct 2004
Posts:
973
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

vegascoug:

I'm not expert, but I had problems with my images until I hard coded the path into the header.html file, vs images/picture.jpg

Once I used the full path, http://mydomain.com/images/picture.jpg all the images showed up perfectly and worked great.

Mike

Hmmm that didn't help :( My main button images actually show up just fine, it's only the rollover images that aren't coming up. When I mouseover, nothing happens at all.

Danielle

2 Aug 2006, 4:44 PM
#9
danielle avatar

danielle

Totally Zenned

Join Date:
Oct 2004
Posts:
973
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

kobra:

You are using the old file that references many TD's(tables) and there are very few in 1.3.x.. Use a program like win merge or another and port the pertinent information to a copy of this file from the 1.3.x install.

Hi, sorry, I think I know why you're mixed-up, it's my fault, I'm not talking about the site in my siggy, I'm talking about a different site :)

Danielle

2 Aug 2006, 5:05 PM
#10
vegascoug avatar

vegascoug

New Zenner

Join Date:
Feb 2006
Posts:
94
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

That's exactly what mine was doing, until I added the domain

instead of 'fpdb/images/Theme0/contactbtn_over.gif'

try 'http://yourdomain.com/fpdb/images/Theme0/contactbtn_over.gif'

and see if it works.

My images all showed up, but the rollovers didn't. It depends on where your header.html file is located I believe, what directory. That's where it's going to search for the fpdb/images directory.

2 Aug 2006, 6:00 PM
#11
danielle avatar

danielle

Totally Zenned

Join Date:
Oct 2004
Posts:
973
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

vegascoug:

That's exactly what mine was doing, until I added the domain

instead of 'fpdb/images/Theme0/contactbtn_over.gif'

try 'http://yourdomain.com/fpdb/images/Theme0/contactbtn_over.gif'

and see if it works.

My images all showed up, but the rollovers didn't. It depends on where your header.html file is located I believe, what directory. That's where it's going to search for the fpdb/images directory.

I did try that before I posted the last time :) It didn't work :(

Danielle

2 Aug 2006, 6:11 PM
#12
danielle avatar

danielle

Totally Zenned

Join Date:
Oct 2004
Posts:
973
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

Could you maybe post what is in your header.html file? Did you have to put any code in any other file to make the rollovers work, or only the header.html file?

Thanks!

Danielle

2 Aug 2006, 7:00 PM
#13
vegascoug avatar

vegascoug

New Zenner

Join Date:
Feb 2006
Posts:
94
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

What is the page/site you are working on, can I see that?

2 Aug 2006, 8:37 PM
#15
vegascoug avatar

vegascoug

New Zenner

Join Date:
Feb 2006
Posts:
94
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

Not sure I can help you, I am pretty novice at this, I just used a table I created with Image Ready and slices, and then created an HTML page to use as the header.

It works great on the shop, just not shop_new, but I have no idea why.

It does say there is an error on the page, line 85 object expected, I wonder if you are missing something in the PHP code and it's not letting you execute the rolloevers?

BTW, that site is just awesome, very creative and great use of colors and design!

2 Aug 2006, 10:50 PM
#16
danielle avatar

danielle

Totally Zenned

Join Date:
Oct 2004
Posts:
973
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

vegascoug:

Not sure I can help you, I am pretty novice at this, I just used a table I created with Image Ready and slices, and then created an HTML page to use as the header.

It works great on the shop, just not shop_new, but I have no idea why.

It does say there is an error on the page, line 85 object expected, I wonder if you are missing something in the PHP code and it's not letting you execute the rolloevers?

BTW, that site is just awesome, very creative and great use of colors and design!

The shop is 1.2.7 and the shop-new is 1.3.0.2, and I just don't know what I need to change to make the mouseovers work on the new one!

Any chance you could post the contents of your header.html? Or PM me with it? I would like to compare it with what I have and hopefully it will help :thumbsup:

Thanks!

Danielle

2 Aug 2006, 11:08 PM
#17
vegascoug avatar

vegascoug

New Zenner

Join Date:
Feb 2006
Posts:
94
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

<html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Your Site</title> <!-- ImageReady Preload Script (link_bar_small.psd) --> <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) {
link_bar_small_01_over = newImage("http://yourdomain.com/images/link_bar_small_01-over.gif");
link_bar_small_02_over = newImage("http://yourdomain.com/images/link_bar_small_02-over.gif");
link_bar_small_03_over = newImage("http://yourdomain.com/images/link_bar_small_03-over.gif");
link_bar_small_04_over = newImage("http://yourdomain.com/images/link_bar_small_04-over.gif");
link_bar_small_05_over = newImage("http://yourdomain.com/images/link_bar_small_05-over.gif");
preloadFlag = true;
}
}

// -->
</script>

<!-- End Preload Script --><style> <!-- A:link {text-decoration:none} A:visited {text-decoration:none} A.:active {text-decoration:none} A.:hover {font weight:bold; text-decoration:underline;} //--> </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();" link="#333333" vlink="#333333" alink="#333333"> <div id="content" align="center"> <table border="0" width="775" cellspacing="0" cellpadding="0" id="table1"> <tr> <td colspan="4" height="200" align="center"> <img border="0" src="http://yourdomain.com/images/logo3.jpg" width="588" height="175"></td> </tr> </table> <!-- ImageReady Slices (link_bar_small.psd) --> <table id="Table_01" width="700" height="62" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="http://yourdomain.com/" onmouseover="changeImages('link_bar_small_01', 'http://yourdomain.com/images/link_bar_small_01-over.gif'); return true;" onmouseout="changeImages('link_bar_small_01', 'http://yourdomain.com/images/link_bar_small_01.gif'); return true;" onmousedown="changeImages('link_bar_small_01', 'http://yourdomain.com/images/link_bar_small_01-over.gif'); return true;" onmouseup="changeImages('link_bar_small_01', 'http://yourdomain.com/images/link_bar_small_01-over.gif'); return true;"> <img name="link_bar_small_01" src="http://yourdomain.com/images/link_bar_small_01.gif" width="131" height="62" border="0" alt=""></a></td> <td> <a href="http://yourdomain.com/grips/" onmouseover="changeImages('link_bar_small_02', 'http://yourdomain.com/images/link_bar_small_02-over.gif'); return true;" onmouseout="changeImages('link_bar_small_02', 'http://yourdomain.com/images/link_bar_small_02.gif'); return true;" onmousedown="changeImages('link_bar_small_02', 'http://yourdomain.com/images/link_bar_small_02-over.gif'); return true;" onmouseup="changeImages('link_bar_small_02', 'http://yourdomain.com/images/link_bar_small_02-over.gif'); return true;"> <img name="link_bar_small_02" src="http://yourdomain.com/images/link_bar_small_02.gif" width="142" height="62" border="0" alt=""></a></td> <td> <a href="http://yourdomain.com/woods.html" onmouseover="changeImages('link_bar_small_03', 'http://yourdomain.com/images/link_bar_small_03-over.gif'); return true;" onmouseout="changeImages('link_bar_small_03', 'http://yourdomain.com/images/link_bar_small_03.gif'); return true;" onmousedown="changeImages('link_bar_small_03', 'http://yourdomain.com/images/link_bar_small_03-over.gif'); return true;" onmouseup="changeImages('link_bar_small_03', 'http://yourdomain.com/images/link_bar_small_03-over.gif'); return true;"> <img name="link_bar_small_03" src="http://yourdomain.com/images/link_bar_small_03.gif" width="141" height="62" border="0" alt=""></a></td> <td> <a href="about_us.html" onmouseover="changeImages('link_bar_small_04', 'http://yourdomain.com/images/link_bar_small_04-over.gif'); return true;" onmouseout="changeImages('link_bar_small_04', 'http://yourdomain.com/images/link_bar_small_04.gif'); return true;" onmousedown="changeImages('link_bar_small_04', 'http://yourdomain.com/images/link_bar_small_04-over.gif'); return true;" onmouseup="changeImages('link_bar_small_04', 'http://yourdomain.com/images/link_bar_small_04-over.gif'); return true;"> <img name="link_bar_small_04" src="http://yourdomain.com/images/link_bar_small_04.gif" width="139" height="62" border="0" alt=""></a></td> <td> <a href="http://yourdomain.com/gallery/" onmouseover="changeImages('link_bar_small_05', 'http://yourdomain.com/images/link_bar_small_05-over.gif'); return true;" onmouseout="changeImages('link_bar_small_05', 'http://yourdomain.com/images/link_bar_small_05.gif'); return true;" onmousedown="changeImages('link_bar_small_05', 'http://yourdomain.com/images/link_bar_small_05-over.gif'); return true;" onmouseup="changeImages('link_bar_small_05', 'http://yourdomain.com/images/link_bar_small_05-over.gif'); return true;"> <img name="link_bar_small_05" src="http://yourdomain.com/images/link_bar_small_05.gif" width="147" height="62" border="0" alt=""></a></td> </tr> </table> </body> </html>
2 Aug 2006, 11:08 PM
#18
vegascoug avatar

vegascoug

New Zenner

Join Date:
Feb 2006
Posts:
94
Plugin Contributions:
0

Re: Using a Table with Rollover Images in the tpl_header.php

I know a lot of times I forgot about the onload="preloadImages" tag in the body tag.