25 replies to this topic

[icemarle]

Ir's about Frontpage's DHTML Effects thing. You can make rollovers using that, right? Anyway, when I tested the rolloves offline, It worked! But when I uploaded it, it won't work. Is there something I did wrong? What should I do? I'm new at creating rollovers.
In fact, this is my first time.

Rollover Page
Please see what's wrong. It's suppose have a stroke effect on the text in the picture.

[whyme]

When you generate DHTML rollovers in frontpage, Frontpage should prompt you to save a seperate javascript file when you exit the program.

I took a look at your page coding and saw this:

</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="file:///C:/Program%20Files/Microsoft%20Office/Office10/fpclass/animate.js">
</script>

right now, your javscript file is sitting in your hardrive, so your website's DHTML doesn't work. this means that you need to upload your animate.js to the same directory of your i2sl4.html, and also, change the coding:

file:///C:/Program%20Files/Microsoft%20Office/Office10/fpclass/animate.js

to just:

animate.js

If you need anymore help, just give me a PM.

-whyme

[snlildude87]

Got it.

<script language="JavaScript1.2" fptype="dynamicanimation" src="file:///C:/Program%20Files/Microsoft%20Office/Office10/fpclass/animate.js">

You are loading the file animate.js from your home computer, which is very illegal because people cannot access your files, so you have to upload animate.js and call it something like this:

<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">

[icemarle]

Ohh! Sorry about that! Thanks you two! I'm just a rollover newbie. Sorry for the trouble! I'll fix it right away!

[moonwitch]

Well, I see two folks beat me to it

Anyhow, to prevent things like this in the future, make sure you select RELATIVE links and not ABSOLUTE... OR do the coding in a different WYSIWYG editor. (WYSIWYG = What You See Is What You Get). My suggestion for this is a freebie called 1rst Page 2000. You can download it here. It will generate better pages, as Frontpage tends to mess up most pages. Believe me, you're better off looking at other editors. When you think you're ready for the leap into code, notepad is your friend

Frontpage also creates sluggish pages because of a bad coding style.

[snlildude87]

icemarle, remember to post back your results, and let us see if you fixed the problem or not.

[icemarle]

Where can I find the edit button? Anyway, I did it, it still didn't work... I uploaded the js, and edited the code. Still nothing...

[snlildude87]

Edit button's gone because users were abusing the hosting credit system with it. If you want to edit, report ()your own post, and the moderators or admins will take care of it.

Hmm, where exactly did you place animate.js? In the same folder as i2sl4.html?

[icemarle]

Yes. I placed it in the same folder. Maybe it's something written in the animate.js? I don't know JavaScript. In fact, I'm scared of learning Javascript. I was too attched to HTML, so I dont know what to do with it.

Animate.js

Too bad about the edit button. But when I seriously need to edit something I have to report it? Well, at least now I know. It'll save me from double-posting.

[snlildude87]

Hmm, I'm looking at your rollover code, and it's definately harder than it's meant to be. I'll tell you what, give me the URLs of the images (before mouse over and on mouse over), and I'll write the code for you to make it work.

About the report thing, yes, reporting your own post is 10 times better than double posting. We encourage members to do so because it uses less sql space.

[icemarle]

Images

Oh, please don't use the layer-2-DOWN images. I only want the over and the normal images.

Thanks! Sorry for the trouble.
Oh, why did I place the down images in the first place? I guess I was lazy, and just copy pasted it.

[snlildude87]

Wait! It does work! I can bet you anything that you have a slow internet connection. All you have to do is place your mouse over the images until they change. Trust me. It works.

[icemarle]

Yeah, I have a slow connection. I'm using Dial-up at 52 KPBS. But if it works... is there a way to make it work faster? I saw some rollovers that worked fast for dial-up. I made my rollovers with help from this tutorial: http://www.cadtutor....r/rollover.html

[snlildude87]

There are two ways that I can think of, and each will ultimately make your image size smaller.

1. Decrease the size of the image (dimensions) (recommended)
2. Decrease its quality (not recommended because it would be a huge turn off for your visitors)
3. Save the pics as png

You can always make the buttons smaller by resizing it using a program like Microsoft Image Resizer

Microsoft Paint does a very nice job of decreasing image sizes. Simply save it as a .jpg file.

OR! You can save your pictures are png files. I find that large png files take less than 100 KB of space whereas large jpg files can take up to 1 megabyte. Huge difference.

I don't suggest using a program to convert the image to a png file because conversions are not always smooth...I say just make the image from scratch in Paint, and save it as a png file that way.

There is a fourth option, and that is making a preloader, but I don't know how to do that.

[icemarle]

I'm going to go with Microsoft Image resizer. I'll let you know when it's done. Thanks! (Yeah, the files are pretty big, I was lazy again) *Kicks self*
Tells self: "Get motivated you fool!"

[whyme]

You can save your self the burden of having to see these problems by inserting a preloading code in html page.

add this chunk of javascript to the <head</head> tags of your page:

<script language="javascript">
<!--
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("image1.jpg","image2.jpg","image3.jpg","image4.jpg");
//--></script>

replace image1.jpg to image4.jpg with the pictures that you are using, add more as prefered.

and replace

<body>

with this:

<body onload="preloadimages()">

by doing this, all your images will load before the site shows, so the on mouse over will automactically show up if you have a slow connection.

hope this will help,
-whyme

[icemarle]

Thanks! I'll need that! That's what I need! Even though I changed the image sizes, it's still slow. I'll use that code... I'll tell you what happens. THANKS!

[whyme]

gald i could help, tell me how things went.

-whyme

[Dooga]

Here's an example I did with frontpage directly. As in, I made the page and uplaoded it FROM frontpage. Just make a new web. Frontpage will automatically upload the js file for you:

http://www.rjprojects.cjb.net

[icemarle]

Hold on whyme... I did it now, and well, I have to leave the cursor on the image for a while, and it still takes some time for it to change. (Despite making the image size/filesize smaller)

Dooga, that's a cool site! *is mesmerized*
The main problem is that it takes a long time for the swap image to show up. I wonder if I should leave a note for slower connections, or is there hope? Luckily I'm using Dial-up, so I can test it.

[whyme]

Hmm, ultimately, I can only say that apparenetly, your connection is so slow that it will still take some time for the javascript itself to function. The only solution left is to use CSS and render it the same way. I'll do this for you if you want, and you can test it on your 56k connection

pm me later,

-whyme

[icemarle]

What's CSS? Thanks for the help again! It's so nice of you!

Yeah, my connection's slow. But at least it could help me test the site if it's friendly for slower connections. A lot of people still use slow connections you know.

[whyme]

CSS is Cascading Style Sheets, it's another wat that you can do rollovers and create content layout without fumbling around with javascript. If you want to try out CSS, PM me, and i'll do it for you later this week, right now, I'm a bit busy with work.

- whyme

[icemarle]

I see. I changed my script. It isn't DHTML anymore. It takes a second for the rollover to work in IE. (1 sec. of cursor over the image) But it doesn't work at all in Firefox. (For me) But it works in all browsers offline. Strange. I PMed you about this too. You haven't seemed to reply yet. I guess you're busy, but you should check out what I changed before you make scripts for me.

Once again, Thank you for your time!

[clagnol]

Somebody beat me to the preload function

But I did notice what seemed to be several identical javascripts in your code. I don't have time to pour over your code, but here is my appraisal of the situation.

You know that script that handles the function that switches images? You only need that once. You can reference that function as many times as you want in the body of your page, but inserting the script in the head multiple times only serves to slow everything down.

Presumably, you put that in your code once for each image. Classic n00b. I did the same thing before I learned a bit about Javascript.

Of course, it's entirely possible that I overlooked something in my haste (finals week!).