Website improvement? [Archive]

Click to See Complete Forum and Search --> : Website improvement?

howste

07-10-2000, 09:14 AM

On my website I have a menu down one side using graphic images. Using JavaScript, the images change on mouseover. I think it looks kind of cool (I'm biased), but I don't like the fact that there are 50+ 2kb images used to accomplish this. People with slow modem connections certainly wouldn't like it either.

Does anyone know of a way to do a similar effect, preferably using JavaScript, without all the bandwidth overhead?

Thanks in advance,

Steve
http://www.qwikpages.com/business/h-and-j/

ScaryBinary

07-10-2000, 09:43 AM

Try saving your image files as *.GIFs instead of JPEGs. This might save you a little bandwidth. You might lose a little color resolution, but try it out and see if that helps.

{EDIT}
If your graphics editor has the option, choose to "optimize pallette." This may help you get a better color resolution.

Scary http://sysopt.earthweb.com/forum/icons/icon11.gif Binary

[This message has been edited by ScaryBinary (edited 07-10-2000).]

howste

07-10-2000, 10:54 AM

Thanks for the input ScaryBinary. I think when I started doing the graphics I tried both .GIF and .JPG files, and the .JPG were smaller though. I'll try again and see. I'll also check into the optimize pallette option. I think I've seen that on one of the programs I've used.

Ideally though, I'd like to find something where the color change is done with text instead of graphics. You can't beat the file sizes of text.

Thanks,

Steve

hhh8785

07-10-2000, 02:45 PM

well you could always just use a text rollover. Lots of places do that and it looks good. if you are using like frontpage 2000 then it is easy to do, just right-click on the background and go to "page properties" i think, and on the second tab there should be a thing that says "enable text rollover" or something such as that. check the box and choose your style. if you are writing in html, i think you insert this line, with your own attributes, into the head of your html document like this "<Head><style fprolloverstyle>A:hover {color: #C0C0C0; font-weight: bold}
</style></head>" there may be more to it than that, but if you want to try it out then be my guest. if you didn't want to have a text rollover in the first place, then this was a very large waste of time on my part. there are other things you could do such as hover-buttons and things of that nature, but i don't know how to make those off the top of my head. let me know how it turns out. good luck!

[This message has been edited by hhh8785 (edited 07-10-2000).]

howste

07-10-2000, 03:29 PM

Thanks for your input guys. It looks like I may try to do a text rollover and an image rollover simultaneously, if that's possible. If I can get the text on top of the image, then I only need one graphic for mouseover and one for mouseout.

qball, your code works great for changing the text itself. I've been looking at a variation of it to change the font color, and it looks promising.

hhh8785 I also appreciate your effort and I'll be looking into your suggestion tonight. Unfortunately I don't have any more time to play with it right now.

Thanks!

Steve

CujoRbd

07-10-2000, 08:09 PM

would something like what i have here (http://www.geocities.com/cujorbd/salem_academy/home.htm) work?
(NOTE: the page is currently made only for IE, but has full support for netscape if i take out some of my personal customizations. so, open this page with IE to get an accurate view of what this is an example of.)

all colors can be changed and it doesn't have to be transparent, and the OnMouseOver window status can be changed to whatever you want. it also has capabilities for sub-menus, so you can use those, too. IOW, it is fully customizable!

get back to me on your thought of this. if you like it, i'll make you a copy to customize out. or, if you'd prefer, you can just tell me your preferred colors and everything, and i'll just make you a completed copy.

just let me know.

CujoRbd

<edit>forgot something-

it can be placed anywhere on the page. in addition, it can have spacing between the menus (that can appear as darkspace like you currently have with your images).
</edit>

[This message has been edited by CujoRbd (edited 07-10-2000).]

qball

07-11-2000, 12:26 AM

Sounds like you have already (or in process of) minimizing the size of your graphic files.

Using rollovers reqires additional resources to be loaded when these events (mouseover) occur. One way around this is to load you images using the image tag and then set the height and width to 0. This will still require these files to be loaded, but they will load with the page, not when the mouse event occurs.

Alternatively, yo can use DHTML and the mouse events to change the text of a given link, or you should. We used DHTML to dynamically change text on our html pages. Don't see why you can't do it for text links. When I get some time, I'll try it myself and perhaps post back...

try:
<A HREF="http://www.qwikpages.com/business/h-and-j/Parts.htm#hdd"
onmouseover="hdr.innerText='mouseover'" onmouseout="hdr.innerText='mouseout'">
Loading</A> 

There may be additional font settings to change color and size, it has been so long I don't truly recall.

[This message has been edited by qball (edited 07-10-2000).]

CujoRbd

07-13-2000, 05:32 PM

CYM, howste.

CujoRbd

SoopaStar

07-13-2000, 10:08 PM

Wow...Those graphics take a little while for me to get to come up when I load them on my cable modem. One thing I don't understand, is it seems to try to reload the graphic after I have already rolled over it. I use a similar javascript (which you are welcome to copy) on a page I am working on:
http://members.home.com/91eagletalon/beta/
Just found it wierd that my larger graphics take shorter to load than yours.

Okay...now that I reloaded the page, its moving quite a bit faster...not sure why. Huh. http://sysopt.earthweb.com/forum/wink.gif well, If you like my script you are welcome to use it.

On suggestion: loose the table border...just my opinion. I hate table borders unless the table is needed. and then, I like to play with them.
Paul

my websites: www.vetsoftware.com (http://www.vetsoftware.com) www.siue.edu/FACILITIES (http://www.siue.edu/FACILITIES) www.siue.edu/FACILITIES/new (http://www.siue.edu/FACILITIES/new)

Paul

Missing the point

07-13-2000, 10:13 PM

just a question, are the prices US or CDN?

howste

07-14-2000, 07:37 AM

Thanks again for all of your help & suggestions. I got kind of busy and had to put it on the back burner for a little while. I'll get back on it soon.

MTP, the prices are US$.

Thanks,

Steve

U-96

07-14-2000, 07:47 AM

howste, you may want to check out the HTML editor 1st Page 2000 at www.evrsoft.com (http://www.evrsoft.com) (download from CNet).

a)it's free
b)it's easy to use (especially as you already seem pretty cool with HTML)
c)it has loads of built-in JS stuff (like text rollovers) that you can drop in at the press of a button http://sysopt.earthweb.com/forum/smile.gif



This Applet makes text links turn bold when the pointer is
positioned over it! It works for Internet Explorer but Netscape
users should add it so IE users will still see it!

Just Add this HTML Tag into your page and insert the
variables:

<A HREF="@@LINK TO@@"
STYLE="color:@@COLOR@@" 
onmouseover="this.style.fontWeight='bold';" 
onmouseout="this.style.fontWeight='normal';" 
>@@TEXT@@

@@LINK TO@@ is what page you want the text to link to when
clicked on

@@COLOR@@ is what color you want the text to be. Good
variables are blue, red, navy, green, ect.

@@TEXT@@ is what text you want displayed as a link

SAMPLE: <a href="home.html" style="color:navy"
onmouseover="this.style.fontWeight='bold';"
onmouseout="this.style.fontWeight='normal';">IE Users highlight
this and it will turn bold! </a>

SoopaStar

07-14-2000, 02:32 PM

That softwar eis no longer available http://sysopt.earthweb.com/forum/frown.gif I was really interested in it. Does anybody have it in its installable manner?
Paul

howste

07-14-2000, 03:20 PM

I ran into the same problem you did SoopaStar. I found it at http://207.153.240.9/files/?/htmle/1stpage2000.exe

SoopaStar

07-14-2000, 03:29 PM

thanks!! http://sysopt.earthweb.com/forum/smile.gif

Paul

brandon184

07-14-2000, 10:45 PM

If your know Flash, it'll create the ultimate in mouseover effects with minimal space. http://sysopt.earthweb.com/forum/smile.gif

- Brandon