Add an animated gif to header

[Guest]

Hello - can anyone help a novice please?

 

I want to add an animated gif to my header. I have found out I can't add the animated gif to my header in PSP, and then upload the complete header to my site, (I have tried this and the animation does not work - unless I am doing something wrong).

 

So I have uploaded my header without the gif, but I am unsure how to complete this task and add the animated gif so that it works. Do I use the <img src="gif_file_name"> and insert this into my public/templates/option1/header.php file? Can anyone help please? Thanks in advance.

Regards

Tony Brown

[germ]

In your /includes/header.php change this code:

 

  <TD class="headertext"> </TD>

to:

 

  <td align="left"><img src="images/fish.gif" border="0" alt=" "></td>

or

 

  <td align="right"><img src="images/fish.gif" border="0" alt=" "></td>

depending on which side of the header you want it, left or right.

 

If I've chosen the wrong animated gif, just use the correct name in the code....

:blush:

Edited August 29, 2008 by germ

[germ]

Or maybe you'd like this:

 

  <td> </td>
 <td align="left"><img src="images/logo/Earth-06-june.gif" border="0" alt=" "></td>
 <td> </td>
 <td align="right"><img src="images/logo/Earth-06-june.gif" border="0" alt=" "></td>
 <td> </td>

A different gif, and one on each side of the header.

[Guest]

Thanks very much Jim

 

One further question regarding the actual position of the gif, if you have the time. Can I place the gif at a specific point, or will it have to go to the far right of the webpage. You can see my header here, www.dealsonline4u.com. My actual header/logo is 780x100, sized to show on all screens I think, and I want to place the gif to the right hand side of the 780x100 header, ie the r/h side of the gif to correspond to the end of the blue line in my header. Hope I have explained this correctly. Thanks very much for your help.

Regards

Tony Brown

[germ]

It's not an exact science, especially in your case since you don't have a fixed width for your page - it adjusts to the width of the screen of whomever is viewing. It could be anywhere from 800 to over 1900 pixels wide.

 

I try to use the old "divide and conquer" strategy.

 

Try this for your code:

 

  <td width="10%"> </td>
 <td width="10%"> </td>
 <td width="10%"> </td>
 <td width="10%"> </td>
 <td width="10%"> </td>
 <td width="10%"> </td>
 <td width="10%" align="right"><img src="/templates/Option1/images/earth.gif" alt=" " border="0"></td>
 <td width="10%"> </td>
 <td width="10%"> </td>
 <td width="10%"> </td>

This splits the screen width into ten parts, and you just chose which "tenth" of the screen you want it on.

 

You can shuffle those lines around to position it where you think it looks good.

 

My screen is 1280 wide, and that's where it looks good to me.

 

That's the best I can do.

 

If someone else has a better way, please speak up!

:lol:

[Guest]

Thanks a lot again Jim. Appreciate your help.

 

Regards

Tony Bronw

[Guest]

Hello Jim

 

Inserting this code did place the gif correctly, but unfortunately my header repeated itself at 10% intervals as well. So this did not work for me, but again thanks for taking the time to help me.

 

Regards

Tony Brown

 

CODE

<td width="10%"> </td>

<td width="10%"> </td>

<td width="10%"> </td>

<td width="10%"> </td>

<td width="10%"> </td>

<td width="10%"> </td>

<td width="10%" align="right"><img src="/templates/Option1/images/earth.gif" alt=" " border="0"></td>

<td width="10%"> </td>

<td width="10%"> </td>

<td width="10%"> </td>

[germ]

Replace this code:

 

	 <td align="right"><img src="/templates/Option1/images/earth.gif" alt=" " border="0"></td>

With this code:

 

	<td align="center"> 
<div
  style="
  bottom: 15;
  left: 355;
  position: relative;
  z-index: 1;
  visibility: show;">
<img src="/templates/Option1/images/earth.gif" alt=" " border="0">
</div>
</td>

This will put the image in about the same place on the screen no matter what resolution the users screen is.

;)

 

If you change your header background image or small gif you may need to modify the numbers used here.

 

This is how I arrived at the numbers I used.

 

The backgound image is 780 x 100.

 

The gif you're using is 70 x 70.

 

The code positions the small gif approximately from the bottom/center of your background image.

 

To position it at the end of and centered in the background image:

 

(780/2) - (70/2) = 355 (number used for left positioning)

 

100/2 = 15 (number used for bottom positioning)

 

I tried this code using IE7 and Firefox and it looked good in both cases.

[germ]

Minor correction.

:blush:

 

This:

 

100/2 = 15 (number used for bottom positioning)

Should have been:

 

(100-70)/2 = 15 (number used for bottom positioning)

Edited August 31, 2008 by germ

[Guest]

Replace this code:

 

	 <td align="right"><img src="/templates/Option1/images/earth.gif" alt=" " border="0"></td>

With this code:

 

	<td align="center"> 
<div
  style="
  bottom: 15;
  left: 355;
  position: relative;
  z-index: 1;
  visibility: show;">
<img src="/templates/Option1/images/earth.gif" alt=" " border="0">
</div>
</td>

This will put the image in about the same place on the screen no matter what resolution the users screen is.

;)

 

If you change your header background image or small gif you may need to modify the numbers used here.

 

This is how I arrived at the numbers I used.

 

The backgound image is 780 x 100.

 

The gif you're using is 70 x 70.

 

The code positions the small gif approximately from the bottom/center of your background image.

 

To position it at the end of and centered in the background image:

 

(780/2) - (70/2) = 355 (number used for left positioning)

 

100/2 = 15 (number used for bottom positioning)

 

I tried this code using IE7 and Firefox and it looked good in both cases.

 

Just picked up this thread Jim. Will try it out. Good to see there are people like you around willing to take the time and trouble to help others. Will sort this out today. Many thanks once again.

 

Regards

Tony Brown

[Guest]

Perfect Jim. I can now place the gif wherever. This was the first main change I want to do to revamp my site. I want to change boxes, add curves maybe to them etc. Thanks again.

Regards

Tony Brown