Solved

Roll overs and animated gifs

Posted on 2000-02-16
13
345 Views
Last Modified: 2013-12-25
1 Am I correct in thinking that graphical images that are moving or blinking on the screen, is simply one *.gif file with many frames in it, rolling at a particular speed to give the perceived image of moving graphics, OR is it something else like a flash program?

2 What is the difference between animated gifs and Macromedia flash?

3 Also, with roll over images, where once the mouse moves over an image and it changes colour or shape etc, am I right in thinking that there are in fact 2 *.gif images there?  If that is the case, do both gif images load with the page, surely if a site has many of these on there, wont it slow the site down when users try to load it?

4 How would you save the original image, as the right click save as option will only save the 2nd roll over images once you move over it.

5 Finally, how do some sites have a curved frame in the top left hand corner, and how do they have strips of different shaded horizontal lines like even here on EE?  Is that a table created and then filled with colour?
0
Comment
Question by:ey143
  • 5
  • 5
  • 3
13 Comments
 

Author Comment

by:ey143
ID: 2528557
Oh sorry, also what is Macromedia Fireworks and Dreamworks?
0
 
LVL 18

Expert Comment

by:mgfranz
ID: 2528966
OK, to try to answer your question,

1) You are correect in thinking that the animated images are for the most part 1 .gif file that an animation program created, although I have seen Javascripts control animation of many images.  There are a bunch of animation tools available, some better than others.  I like th tool that comes with Adobe ImageReady product to create animated .gif files.

2) Since I don't use Macromedia I can't speculate, but I would guess nothing...

3) Yes there are in fact 2 .gif images that are used with OnMouseOver/OnMouseOut calls, these rollover images are either pre-loaded via a Javascript, or if they are small enough can be called when the event is called.  Once loaded into cache they will be called when needed.  Of course there are other factions that may prevent this.  And yes, if overused and used on large images it will slow down a site.

4) In order to save the image in a rollover event, you have to know the name of the image, then open it in a path statement, http://www.site.com/images/roll2.gif or roll1.gif, whatever name you want to save.  Look at the source code for details of the image you request.  And in actuality, I believe a rollover image, right click will save the original image only...

5) It is easy to fill a table with color, <table bgcolor="#0000FF"> wil create a blue table.  As for the rounded corners, the use of images with "0" cellspacing/cellpadding, borders, valign/align is used to set the rounded edges.

For details on Macromedia products go to their website, http://www.macromedia.com/

Mark
0
 
LVL 18

Expert Comment

by:mgfranz
ID: 2528984
For #2, Flash animations are vector based, .gif animations are bitmapped, in otherwords the immages created as.gif are aliased and will be larger, whereas flash animations will be antialiased and therefore will be smaller in size, cleaner looking.
0
 
LVL 2

Accepted Solution

by:
coopa earned 150 total points
ID: 2531062
> one *.gif file with many frames in
> it, rolling at a particular speed to
> give the perceived image of moving
> graphics, OR is it something else
> like a flash program?
There is an easy way to find out.
Simply right click on the moving image... if a menu appears with the option "About macromedia flash" on it.. then it is flash...  if a menu appears with "save file as..." on it... then save the file is an animated gif... you can save this on your machine and have a look at it.

> 2 What is the difference between
> animated gifs and Macromedia flash?
An animated gif is simply more that one gif saved as a single file with timing information.
There are many applications that enable yuo to produce these, the best i've used is ulead gif animator.

Flash is a vector animation plugin... The graphics are simply morphed lines and fills...
have a look at www.coopa.co.uk for an example.

> 3 Also, with roll over images, where
> once the mouse moves over an image
> and it changes colour or shape etc,
> am I right in thinking that there are
> in fact 2 *.gif images there?  
Yes you are.  Two images and some javascript code for detecting the "mouse over" and "mouse out" events.

> if that is the case, do both gif
>images load with the page,
Yes and no.... yuo can set them so that they either load with the page (called preloading) or load when you mouse is over the image.

> surely if a site has many of these
> on there, wont it slow the site down
> when users try to load it?
Absolutely !!!  Hence use with caution.
There are some fantastic tools out there at the moment that can drasticly reduce the size of GIF images, by reducing the amount of colours they use.
Photoshop 5.5 is the best i've used, although a little expensive... you could always try debabalizer or even a newish version of paint shop pro.

> How would you save the original
> image, as the right click save as
> option will only save the 2nd roll
> over images once you move over it.
this is a little tricky... you have to view the javascript code to find out what the original image was called.
I can help if you send me the html code.

> Finally, how do some sites have a
> curved frame in the top left hand
> corner,
It's not a curved frame... simply a rectangular image with a transparent curved section.  GIFs support transparency.

> and how do they have strips of
> different shaded horizontal lines
> like even here on EE?  
create an image 2 pixels high that has one grey line and one white line... then set the page background (or table background) to use that image as a background. like so:
<body background="lines.gif">

> Is that a table created and then
> filled with colour?
yes.. essentially.
You can use that on a table or even a cell:
<table background="lines.gif">
or
<td background="lines.gif">

Easy huh....   i'll send you the lines.gif if you like...  let me know.

Rich Cooper
-----------
www.coopa.co.uk
0
 

Author Comment

by:ey143
ID: 2531482
Ok what about when hyperlinks change colour when you move the mouse over them?
Like here on this page, when you typed in ur URL as www.coopa.co.uk it turns to a different colour?

Finally, what is shtml, xhtml, VBA, Fireworks, CCL (SSL?) and XML?

Thx, I'll award points after this.  
0
 
LVL 2

Expert Comment

by:coopa
ID: 2531547
> Ok what about when hyperlinks
> change colour when you move the
> mouse over them?
> Like here on this page, when
> you typed in ur URL as
> www.coopa.co.uk it turns to a
> different colour?
add this code in between your <head> and </head> statements:

<style>
a:hover {color : red;}
</style>

you can change the colour if you like.

> Finally, what is...
The answers are out there....  here are some great links...

> shtml
http://www.whatis.com/shtml.htm

> xhtml
http://www.whatis.com/xml.htm

> VBA
http://msdn.microsoft.com/vba/

> Fireworks,
http://www.macromedia.com/software/fireworks/productinfo/

> CCL (SSL?)
http://www.whatis.com/ssl.htm

> XML?
http://www.whatis.com/xml.htm

> Thx, I'll award points after this.  
Thank you, appreciated.

Rich Cooper
-----------
www.coopa.co.uk
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 18

Expert Comment

by:mgfranz
ID: 2532039
coopa, what info other that the shtml, xhtml, VBA, Fireworks, CCL (SSL?) and XML links did you contribute to the original question?  Everything you stated in your first post is exactly what I had already stated!  infact, almost verbatum.  Please do not get in the habit of duplicating answers from other experts and then expect congratulations...  it's as bad as stealing code.

Plus you need to mention that the Hover: style sheet property is a IE >4.0 only property.  Plus, why would you do this?

<table background="lines.gif">

unless there is something special about lines.gif, to get a colored table or cell all you need to do is state the background color;

<table bgcolor="blue">

Again, don't post someone elses comments as your answer, it look's bad for the other experts.
0
 

Author Comment

by:ey143
ID: 2532060
Can you recommend any good classes in London for web design.  I know you live in Ealing which is not far from myself.  I'm doing a few courses in Harrow at the mom.
0
 

Author Comment

by:ey143
ID: 2532062
mgfranz, I've put up another 100 points for you, you can accept that one, thx.
0
 
LVL 2

Expert Comment

by:coopa
ID: 2534025
Let me start by saying that I am new here...

> coopa, what info other that the
> shtml, xhtml, VBA, Fireworks, CCL
> (SSL?) and XML links did you
> contribute to the original question?  
What can I say.... i saw an unanswered question and didn't read the previous posts.
And I spent approximately 30 minutes looking on the web for a good and easy to follow explanations  for shtml, xhtml, VBA, Fireworks et al.

I shall endeavor to read all previous posts next time to make sure i don't tread on any toes...
 
However... if you'd had answered the question then there wouldn't have been a mix-up.
I'm sorry if my answer was the same as yours... perhaps that is because we are both correct.

> Please do not get in the habit of
> duplicating answers from other
> experts and then expect
> congratulations...  it's as
> bad as stealing code.
I did not steal... like i said the question was unanswered and I spent half an hour typing an answer.
And as for the congratulations, I couldn't give a crap... wow i didn't think people on here would be so tetchy !

> Plus you need to mention that the
> Hover: style sheet property is a IE
> >4.0 only property.  
Please forgive me oh master and god !
Yes it is IE4.0+ only...

> Plus, why would you do this?
> <table background="lines.gif">
I assumed the question was referring to the interlaced lines (tv) effect that many web designers are using at the moment.  The experts exchange logo uses a similar effect.

> Again, don't post someone elses
> comments as your answer, it
> look's bad for the other experts.
The comments were my own !

In the future, please answer posts in order to avoid confusion...
....oh and give up on that condescending tone.
0
 
LVL 2

Expert Comment

by:coopa
ID: 2534032
> Can you recommend any good
> classes in London for web
> design.

I'm afraid not, sorry.
Never taken an HTML class...
0
 

Author Comment

by:ey143
ID: 2534057
I thought that given your age (a year older than me), you recently graduated from a comp. science degree at uni?
0
 
LVL 2

Expert Comment

by:coopa
ID: 2534358
> I thought that given your age
> (a year older than me), you
> recently graduated from a comp.
> science degree at uni?
Graduated 4 years ago (computer science degree), there were no HTML courses at (Kingston) Uni at the time, however, during my work placement year (5 years ago) I worked in a company doing graphics and web-design. Have been doing HTML since.

Have been a little miffed about this system... I thought that by earning expert points you could redeem these against questions, but it seems you only get points for referring people, which sucks.

P.S.  I Wasn't aware that user details were so readily available.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now