Special project: barometric shown by...

Aug 29th, 2010 at 07:23 AM
User 90560 Photo

Clownen313
Ambassador
5 posts

(google translate used)
I want to show a barometer which is indicated by flowers receiving color depending on the numbers that appear in a formula. 0-700 (where 700 = 100%). each leaf of the flower indicate a "step" 70 flowers with 10 magazines. placed in a table a flower in each cell.
You can look at the picture here how I made the flowers .. Some suggestions for how to do it?
(see attach picture)


My code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dag 1</title>
<meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
<meta name="created" content="to, 26 aug 2001 15:45:02 GMT" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
<!--
.text{background-image: url(fremhold.PNG);z-index:1; background-repeat: no-repeat;background-position: center top;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000" background="../KampagneBoard2.jpg">
<font size="7" face="Tempus Sans ITC" color="white"><b>Haslev Nord Menigheds KampagneBarometer</b></font>
<script language="javascript" src="butterfly2.js"></script>

<table border="0" width="1024" class="text">
<tr><!-- Row 1 -->
<td><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></td><!-- Col 1 -->
<td><img src="Blomst02.png" width="55" alt="" title="" border="0" align="" /></td><!-- Col 2 -->
<td><img src="Blomst03.png" width="55" alt="" title="" border="0" align="" /></td><!-- Col 3 -->
<td><img src="Blomst04.png" width="55" alt="" title="" border="0" align="" /></td><!-- Col 4 -->
<Td><img src="Blomst05.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 5 -->
<TD><img src="Blomst06.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 6 -->
<TD><img src="Blomst07.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 7 -->
<TD><img src="Blomst08.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 8 -->
<TD><img src="Blomst09.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 9 -->
</tr>
<tr><!-- Row 2 -->
<TD><img src="Blomst09b.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 1 -->
<TD><img src="Blomst10.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 2 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 3 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 4 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 5 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 6 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 7 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 8 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 9 -->
</tr>
<tr><!-- Row 3 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 1 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 2 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 3 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 4 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 5 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 6 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 7 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 8 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 9 -->

</tr>
<tr><!-- Row 4 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 1 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 2 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 3 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 4 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 5 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 6 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 7 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 8 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 9 -->

</tr>
<tr><!-- Row 5 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 1 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 2 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 3 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 4 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 5 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 6 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 7 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 8 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 9 -->

</tr>
<tr><!-- Row 6 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 1 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 2 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 3 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 4 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 5 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 6 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 7 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 8 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 9 -->
</tr>
<tr><!-- Row 7 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 1 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 2 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 3 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 4 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 5 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 6 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 7 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 8 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 9 -->
</tr>
<tr><!-- Row 8 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 1 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 2 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 3 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 4 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 5 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 6 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 7 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 8 -->
<TD><img src="Blomst01.png" width="55" alt="" title="" border="0" align="" /></TD><!-- Col 9 -->
</tr>
</table>
<table border="0" width="0124">
<tr><!-- Row 1 -->
<td><img src="" width="1024" height="250" alt="" title="" border="0" align="" /></td><!-- Col 1 -->
<td></td><!-- Col 2 -->
<td></td><!-- Col 3 -->
<td></td><!-- Col 4 -->
<td></td><!-- Col 5 -->
<td></td><!-- Col 6 -->
<td></td><!-- Col 7 -->
<td></td><!-- Col 8 -->
<td></td><!-- Col 9 -->
<td></td><!-- Col 01 -->
</tr>
</table>

</body>
</html>

Aug 29th, 2010 at 07:24 AM
User 90560 Photo

Clownen313
Ambassador
5 posts

fotgot picture - attached ;)
Attachments:
Aug 29th, 2010 at 08:12 AM
User 117361 Photo

Janys Hyde
Ambassador
6,076 posts

Would it not perhaps be better to give us a web page address to understand exactly what you want us to look at here?
http://www.venicefromtheinside.com
Aug 29th, 2010 at 11:24 AM
User 184085 Photo

david wilson
Ambassador
1,707 posts

If you combine all your flowers into a single graphic, say 55px wide and 550px high, you get a long graphic of 10 flowers each with more color that the one before it.

Then with CSS you create a window 55px wide and 55px high, and then slide the graphic behind the window using offset depending on the amount of humidity.

Search google for CSS sprites, or sliding windows to get examples on how this is done :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Aug 29th, 2010 at 01:55 PM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

For the barometer part you'll probably need some scripts that have a good setup if IF statements. I would look around using Google to see if you can find something if no one here has any ideas for it. I don't think it would be real difficult, but depends on how you intend to get the barometer number into the equation. If you're doing it manually then it's not hard, but if you are planning to get that number remotely from somewhere else then the script will need to be a little more complex.
Jo

http://elementsinwebdesign.com
Aug 29th, 2010 at 03:56 PM
User 90560 Photo

Clownen313
Ambassador
5 posts

I'm just getting started on this project.

more-it.dk/Testing/Untitled1.html

there shall be two barometer on the same page. (Flower / tree stump)

"tree stump" I want to have the Submit botton to save result.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.