setting up and using the scrolling marquee

bobdammit
Administrator

Posts: 74

setting up and using the scrolling marquee Mar 1, 2005 9:32:17 GMT -5

Quote

Post by bobdammit on Mar 1, 2005 9:32:17 GMT -5

The scrolling pictures is a code I put together myself. I cant say I created it per se, but I modified it to fit my needs. You can use it if you want though. I will try to make it easy to understand, but if you have any problems, let me know, and I can try to help get it up and running. THE COMPLETED CODE IS TO BE PLACED IN YOUR FOOTERS!

Here is the code in its simplest form:

<table align="center" border="0" width="92%" cellspacing="0" cellpadding="0" class="bordercolor">
<tr>
<td>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>
<td class="titlebg" align="center" colspan="3">
<font color="FFFF66" size="2">
<b><center><font style="filter:glow(color=yellow, strength=1); height: 2;">Members Rides ---- Click on Thumbnail For Full Size Pictures</font></center></b>
</font>
</td>
</tr>
<tr>
</td>
<td width="60%" class="windowbg2" valign="top">

<P>
<marquee height="60" onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="2" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=40, FinishX=0, FinishY=0);">

<center>
<a href="http://URL OF FULL SIZED PIC HERE" Target="blank"><img src="http://URL OF THUMBNAIL HERE" width=50 height=50 border=0 alt="Bike1"></a>

<--! Above lines repeated up to 13 times -->

<br />
<img src="http://4d5.net/boardimages/blank.gif" height="55">
<br />

<a href="http://URL OF FULL SIZED PIC HERE" Target="blank"><img src="http://URL OF THUMBNAIL HERE" width=50 height=50 border=0 alt="Bike1"></a>

<--! Above lines repeated up to 13 times -->
<--! repeat as needed -->

</marquee>
</td></tr></table>
</td></tr></table>

Last Edit: Mar 10, 2005 20:03:58 GMT -5 by bobdammit

[thescript]

bobdammit
Administrator

Posts: 74

setting up and using the scrolling marquee Mar 2, 2005 0:28:08 GMT -5

Quote

Post by bobdammit on Mar 2, 2005 0:28:08 GMT -5

Do ALL of your Editing on NOTEPAD, Then copy and past into your Footers!
Here is the first part of the code:

<table align="center" border="0" width="92%" cellspacing="0" cellpadding="0" class="bordercolor">
<tr>
<td>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>
<td class="titlebg" align="center" colspan="3">
<font color="FFFF66" size="2">
<b><center><font style="filter:glow(color=yellow, strength=1); height: 2;">Members Rides ---- Click on Thumbnail For Full Size Pictures</font></center></b>
</font>
</td>
</tr>
<tr>
</td>
<td width="60%" class="windowbg2" valign="top">

<P>
<marquee height="60" onmouseover="this.stop()" onmouseout="this.start()" direction="up" scrollamount="2" style="Filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=40, FinishX=0, FinishY=0);">

First you need to edit the parts in red
The first part is the font color for your title bar of the table. You need to use the HEX code for this. Go into your admin panel, and click on "Modify Board Colors" Look about half way down the page and you will see a box for "Title Bar Text Color:" Copy that value into the code.

The next value to change is the glow color. This is a word for the color that is close to the same color you are using for your Title color. {on this board FFFF66 is yellow and the glow is yellow as well} You can use different colors... feel free to experiment. I am looking for the website that has all the colors listed, I'll get that to you later.

The next value is What you want to for a title in your table. Change that to what ever you want it to say.

The last value to change is the scroll speed. The higher the number, the faser is scrolls. 2 seems pretty good for the size pics I use.

Last Edit: Mar 2, 2005 0:43:44 GMT -5 by bobdammit

[thescript]

bobdammit
Administrator

Posts: 74

setting up and using the scrolling marquee Mar 2, 2005 0:37:22 GMT -5

Quote

Post by bobdammit on Mar 2, 2005 0:37:22 GMT -5

Now for the images! You need to get all of your images and upload them to your server. You will also need a photo editing program {or a host that offers resizing capabilities online}. I resize all of me pictures to a higth of 50 pixels, and keep the original aspect ratio. I also set the resolution to 96dpi. This keeps the pics small and load times minimal for dialup users. Upload all of thumbnails to your host. To keep things easy, I add an "a" to the end of the small pics to know what is what.

IE: test-pic.jpg { <-- Large Pic} and test-pica.jpg { <-- Small Pic}

[thescript]

bobdammit
Administrator

Posts: 74

setting up and using the scrolling marquee Mar 2, 2005 0:42:24 GMT -5

Quote

Post by bobdammit on Mar 2, 2005 0:42:24 GMT -5

NOw that your images are all uploaded, you can add them into the code. Use this section of code next:

<a href="http://URL OF FULL SIZED PIC HERE" Target="blank"><img src="http://URL OF THUMBNAIL HERE" width=50 height=50 border=0 alt="What ever You Want To Show When The Mouse Is Held Over The Image"></a>

Once again, edit the Red Sections. Repeat this section of code for how ever many pictures you have.

[thescript]

bobdammit
Administrator

Posts: 74

setting up and using the scrolling marquee Mar 2, 2005 0:49:20 GMT -5

Quote

Post by bobdammit on Mar 2, 2005 0:49:20 GMT -5

The set deminsions for this table will allow you to place a maximum of 13 pictures in each row of your marquee. Any more than that, and the users with 800x600 resolutions will have a table much larger than their browser window {Looks crappy!} If you have more than 13 pictures, you will need to place a blank spacer into your marquee to start a new row of pictures. Use this code after your 13th image:

<br />
<img src="http://4d5.net/boardimages/blank.gif" height="55">
<br />

This will start a new row, and evenly space out the rows of pictures.

Enter that code after every 13th picture {or less if you want to even your rows out}.

Last Edit: Mar 2, 2005 0:52:51 GMT -5 by bobdammit

[thescript]

bobdammit Administrator Posts: 74	setting up and using the scrolling marquee Mar 2, 2005 0:53:39 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by bobdammit on Mar 2, 2005 0:53:39 GMT -5 Lastly, close out your table and marquee with the last section of code: </marquee><!-- End Mini Banners --> </td></tr></table> </td></tr></table>
	[thescript]

bobdammit
Administrator

Posts: 74

setting up and using the scrolling marquee Mar 2, 2005 0:56:44 GMT -5

Quote

Post by bobdammit on Mar 2, 2005 0:56:44 GMT -5

[thescript]

Bob Dammit's Test Board

setting up and using the scrolling marquee

Post by bobdammit on Mar 1, 2005 9:32:17 GMT -5

Post by bobdammit on Mar 2, 2005 0:28:08 GMT -5

Post by bobdammit on Mar 2, 2005 0:37:22 GMT -5

Post by bobdammit on Mar 2, 2005 0:42:24 GMT -5

Post by bobdammit on Mar 2, 2005 0:49:20 GMT -5

Post by bobdammit on Mar 2, 2005 0:53:39 GMT -5

Post by bobdammit on Mar 2, 2005 0:56:44 GMT -5

Quick Reply