Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > CSS
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 11-03-2009, 10:08 PM
  #1
Peregrine
Novice (Level 1)
 
Peregrine's Avatar
 
Join Date: Nov 2009
Posts: 6
iTrader: (0)
Peregrine is an unknown quantity at this point
Looking for Help With Animated Boxes

First off, hey all, cool to be here.

So I'm working on a portfolio site in iWeb for my Graphic Design and 3D Animation. In case anyone didn't know, iWeb is a live-update program (ie. no coding necessary) but you can insert HTML snippets if you so desire. I'm adding a 'commonly used programs' page which will feature icons of the different programs I use. What I want is to somehow make it so that when a user clicks one of the icons, additional information about the program is displayed.

Some pictures for reference:

The user clicks the icon, and this is what follows.

http://img40.imageshack.us/img40/1821/web1el.jpg

http://img62.imageshack.us/img62/51/web2q.jpg

http://img524.imageshack.us/img524/4849/web3a.jpg

To sum it up, a bar emerges from the icon. A box then drops down from that bar, and on that box the text and maybe a graphic fade into appearance.

I know the only way to accomplish this will be with CSS, in which I am unversed to say the least. Can anyone help me out?
Peregrine is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-05-2009, 06:11 AM
  #2
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 7,917
iTrader: (0)
coothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to behold
Hi there Peregrine,

and a warm welcome to these forums.
Quote:
What I want is to somehow make it so that when a user clicks one
of the icons, additional information about the program is displayed.
This can be achieved.
Quote:
iWeb is a live-update program (ie. no coding necessary) but you
can insert HTML snippets if you so desire.
Your requirements require a mixture of Javascript, CSS and HTML.

Are you able to insert all of these elements or are you constrained by WYSIWYG limitations?
__________________
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-05-2009, 06:03 PM
  #3
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 7,917
iTrader: (0)
coothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to behold
Hi there Peregrine,

you may find the attached example of interest.
Attached Files
File Type: zip Peregrine.zip (12.4 KB, 5 views)
__________________
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-05-2009, 11:13 PM
  #4
Peregrine
Novice (Level 1)
 
Peregrine's Avatar
 
Join Date: Nov 2009
Posts: 6
iTrader: (0)
Peregrine is an unknown quantity at this point
That's perfect, it's exactly what I need! I do believe iWeb can accept CSS, HTML, and Java, and if not, we just got Rapidweaver which has much better code integration than iWeb.
Peregrine is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-06-2009, 10:56 PM
  #5
Peregrine
Novice (Level 1)
 
Peregrine's Avatar
 
Join Date: Nov 2009
Posts: 6
iTrader: (0)
Peregrine is an unknown quantity at this point
Just a quick follow-up question, for this to work do I simply copy the code found in the JS file and place it where I wish on my page?
Peregrine is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-07-2009, 05:44 AM
  #6
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 7,917
iTrader: (0)
coothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to beholdcoothead is a splendid one to behold
Hi there Peregrine,

as I said in my original post...
Your requirements require a mixture of Javascript, CSS and HTML.
....so you need to do a few things to incorporate them in your page.

To get it working "As is" follow these instructions...
  1. Place the images folder, the animation.css file and the animation.js file in the same directory as your page file.
  2. Open your page file with Notepad and place these lines in the head section....
    1. Code:
      <link rel="stylesheet" type="text/css" href="animation.css">
    2. Code:
      <script type="text/javascript" src="animation.js"></script>
  3. Place this line in the body section where you want the drop-down to go.
    1. Code:
      <div id="putItHere"></div>
To change the image and text in the drop-down follow these instructions...
  1. Place the required image in the images folder ensuring that it's width is no greater than 116px.
  2. Open the animation.js file with Notepad and go to the editable section.
  3. Replace 'ball.jpg'; with 'your_image';.
  4. Replace the text with your required text making sure that is in this form...
    1. Code:
      
         text=
                'your words your words'+
                'your words your words'+
                'your words your words'+
                'your words your words';
  5. Open theanimation.css file with Notepad and find this rule...
    1. Code:
      #pic {
          display:block;
          width:80px;
          height:80px;
          border:3px double #900;
          margin:auto;
       }
  6. Change the highlighted values to match those of your_image.
__________________
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-07-2009, 08:49 AM
  #7
Peregrine
Novice (Level 1)
 
Peregrine's Avatar
 
Join Date: Nov 2009
Posts: 6
iTrader: (0)
Peregrine is an unknown quantity at this point
Alright, thanks so much Sadly it looks like I'll need to use Rapidweaver for this, since for some reason, iWeb won't let you so much as see the Head code... When I've got it working I'll post you a link Thanks again!
Peregrine is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote

Reply
KEEP TABS
SPONSORS
 
Boxedart
 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 08:41 PM.

   

Mascot team created by Drawshop.com

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.