Text and Image Marquee Crawler v1.53 help please

**rlhenryjr** · 03-13-2013, 08:27 PM

1) Script Title:
Text and Image Crawler v1.53
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...wler/index.htm
3) Describe problem:
Hello,

I have used the above script marquee to place an image of a railroad train gif moving to the left. I have the railroad tracks, but dont know where to place them. Where ever I placed them on my site the train images wont show up.

Would someone please be so kind and show me how to add train tracks to the bottom of a train gif?

Also, if you have a script for railroad trains that would be even better where 2-3 trains can be seen on different tracks going in two different directions..

If you dont have this script for trains them maybe you can refer me to where I can find one.

I really appreciate any help to get these train tracks on the site or a new script especially for train gifs and the tracks.

Thanks so much.

**Beverleyh** · 03-13-2013, 09:04 PM

You should be able to use absolute positioning and z-index to place (layer) the track images underneath where the train moves.

Info on absolute positioning: http://www.impressivewebs.com/absolute-position-css/

Info on z-index: http://coding.smashingmagazine.com/2...ehensive-look/

If you need more help, please post a link to your page.

**rlhenryjr** · 03-13-2013, 09:24 PM

I dont understand CSS yet. I usually will copy and paste code and hope it works.
Here's the link to the website.
http://www.railmemberfansite.com/index.html

Its not finished yet, just need help with the trains and tracks. Would you post the code that i can copy and paste for 2-3 tracks of trains going in two different directions. Please use the same gifs going in both directions.
Thanks so much for your help.

**rlhenryjr** · 03-13-2013, 09:26 PM

I just thought about it, Is it possible to make the trains go at different speeds on each track???
Thanks for any assist.

**Beverleyh** · 03-13-2013, 10:09 PM

Now is a good a time as any for you to learn a little bit of CSS - nothing expert level or anything - just some beginners stuff. Asking other people to just give you the answers, without any understand, isn't going to help you much in the long run and for that reason (as well as the fact that i have limited facilities on iphone), here is a link to a very easy positioning tutorial: http://www.htmlgoodies.com/beyond/cs...ng-Huh.htm#its
It uses the img tag and it uses inline styles (CSS) which are usually easier for newbies to understand because they're placed right there in the HTML element where the CSS is to be applied.

Have a go at doing it yourself first using your track images, and let us know how you get on. We can help you tweak your markup once its in the page.

Your other question relates to customising the JavaScript which I am unable to help with at this time. Hopefully somebody else will be able to advise on that. There may be an alternative script you can use.

**rlhenryjr** · 03-14-2013, 11:00 PM

Hello,
Thanks so much for your help and pointing me to the pages that I needed to learn.
CSS is a bit overwhelming but once someone tells you what you are looking for the job is easy to do. I have often looked at css and had no idea what most of it was about. I learned a lot reading these pages and have the train track right where it's suppose to be. Thanks so much for your help. again.

Would you be so kind and tell me what I need to look up in CSS to make the trains appear to be on two or more tracks and go in different directions. I am a hard worker but dont always know what I am looking for. I can make them work once I have gotten information about the topic. Please tell me what I am looking for so I can make the trains appear to be on two or more tracks and go in different directions.

**Beverleyh** · 03-15-2013, 06:25 AM

That's excellent news. You've learnt something and successfully used it, and now hopefully you feel a little less overwhelmed than you did before. CSS should start to become a little easier now - inline styles tend to make more sense when you're starting out and I bet you'll be making other tweaks, such as applying different font-family (eg font-family:Arial; ) or color (eg color:red; ), to your other elements, all within that inline style="" attribute in no time at all.

BTW, here's another easy guide to inline styles thst you might like http://www.ironspider.ca/adv/basic_css/inline.htm

I'll have a look at the 2-train JavaScript changes/additions once I'm back on a PC. Give me a couple of hours and I'll reply again soon.

**Beverleyh** · 03-15-2013, 01:48 PM

This code should insert another crawler onto your page;

Code:

<div class="marquee" id="mycrawler" style="" ><img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" />
</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
        uniqueid: 'mycrawler',
        style: {
                'padding': '2px',
                'width': '990px',
                'height': '25px'
        },
        inc: 5, //speed - pixel increment for each iteration of this marquee's movement
        mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
        moveatleast: 2,
        neutral: 150,
        direction: 'right',
        savedirection: true,
        random: true
});
//]]>
</script>

The DD script supports multiple instances - the critical point being that a unique id must be used for each script-call, so Ive put those in and highlighted them in red. See how the same id is used once in the div that holds your train images, and then again in the script-call below.

Ive used the same code that you've used except that Ive inserted a unique id (the one currently on your page is called "mycrawler2") and I've also added the direction parameter (blue) so your 2nd train track will run the other way.

That's it for the implementation. You should just be able to paste that code into your web page markup and see a second train on the page once you refresh the browser.

Next comes positioning, so this is another time when you can use the style="" attribute inside of the div that holds your train images. I've put that into the opening div tag for you (green) so its ready to fill with your positioning CSS.

**rlhenryjr** · 03-15-2013, 05:14 PM

Hello again,
I appreciate your help. I am learning a lot.
This script is so cool, it's getting deep now, lol, but I had a feeling I wasn't clear about my question. What I meant to say was, "Please tell me what I need to do to make two trains passing one another going in opposite directions and appear to be on the same track".
Please forgive me for being unclear in my question. Please help me out again. I am learning so much.

**Beverleyh** · 03-15-2013, 07:02 PM

Ah yes, this is the beauty of positioning in the style="" attribute. In the same way that you have your track image positioned like this;

Code:

<IMG STYLE="position:absolute; TOP:567px; LEFT:10px; WIDTH:990px; HEIGHT:5px" SRC="images/trackbed.gif">

You can also put style="blah:blah" in the divs for each crawler. So at the minute, one of your crawlers looks like this;

Code:

<div class="marquee" id="mycrawler2"><img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" /></div>

You can just add in the style attribute and play around with the positioning to suit - even to make them overlap each other to give the appearance of running along the same track

Code:

<div class="marquee" id="mycrawler2" STYLE="position:absolute; TOP:567px; LEFT:10px;"><img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" /></div>

You can put the style="" attribute in any element tag (except <script>) - paragraphs <p>, spans <span>, unordered lists <ul>, tables <table>, individual table cells <td>, etc. - and apply and styling/CSS that you want.

Hope that makes sense.