[html] dynamisch plaatje voor meting * - Softwareontwikkeling

woensdag 17 maart 2004 11:42

Acties:

Verwijderd

Topicstarter

Ook met de search kom ik er niet uit.

Ik wil een soort puntenmeter maken op mijn site. Het idee is een soort thermometer, waarmee ik een maximale waarde in kan geven en zelf kan instellen hoe hoog de thermometer staat. Nu kan ik in photoshop wel elke keer handmatig een nieuw plaatje maken als de 'temperatuur' verandert, maar ik wil het graag automatisch doen. Het liefst zo: je hebt een lege thermometer, ik kan in een form een nieuwe temperatuur invullen waarop 'ie dan moet staan, of anders dat ik een stijging ingeef (hij moet 100 hoger worden). Zoiets...

Een voorbeeld: bij de actie 'schop het tot superprof' van Amstel (vorig jaar) had je een goodiemeter: elke keer als je punten scoorde steeg de 'thermometer' een stukje. Dat idee dus!

Ik heb me rot gezocht maar ik weet niet waar ik moet beginnen. Ik heb niet al teveel ervaring met html/javascript maar als iemand de voorzet kan geven waarmee ik kan beginnen....

woensdag 17 maart 2004 11:44

Acties:

Nielsz

Maak een tabel met hoogte 100.
En als je 'm op 60% wil hebben, maak je er een td in met een rode achtergrondkleur van 60% of 60px.

woensdag 17 maart 2004 11:49

Acties:

.oisyn

Moderator Devschuur®

Demotivational Speaker

P&W FAQ - De "quickstart"
*!*!* Over topictitels in P&W - Updated 25 feb 04 *!*!*
P&W FAQ - HTML / javascript /css, etc...

PW -> WG dus

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

woensdag 17 maart 2004 11:50

Acties:

Janoz

Moderator Devschuur®

!litemod

Ten eerste door je topic op de juiste plek te plaatsen

. Javascipt en HTML horen in Webdesign & Graphics ipv in Programming & Webscripting.

Wat ikzelf vaak voor staafdiagrammen gebruik is een gifje van een horizontaal verloopje van 1 hoog, en deze maak ik gewoon langer mbv het height attribuut van de img tag. Als je nog een leuke boven en onderkant nodig hebt kun je daar een appart plaatje voor maken zodat deze niet meeschalen.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

woensdag 17 maart 2004 12:00

Acties:

Verwijderd

Topicstarter

Janoz schreef op 17 maart 2004 @ 11:50:
Ten eerste door je topic op de juiste plek te plaatsen . Javascipt en HTML horen in Webdesign & Graphics ipv in Programming & Webscripting.

ok sorry, dacht dat het meer een scripting probleem zou zijn dan een grafisch probleem. zoveel weet ik er dus van

Wat ikzelf vaak voor staafdiagrammen gebruik is een gifje van een horizontaal verloopje van 1 hoog, en deze maak ik gewoon langer mbv het height attribuut van de img tag. Als je nog een leuke boven en onderkant nodig hebt kun je daar een appart plaatje voor maken zodat deze niet meeschalen.

dus, net als Nielsz zegt, de eenvoudigste manier is om een cel of plaatje in een tabel te veranderen van grootte door de properties hiervoor handmatig in te voeren in html?
kan het ook minder spartaans of neem ik dan teveel hooi op m'n vork?

woensdag 17 maart 2004 12:04

Acties:

sig69

een flash movie met parameters kan ook, het is net wat je wil/kan. Hoe slik moet het er uitzien? is balk genoeg of moet er nog meer grafische meuk omheen?

Roomba E5 te koop

woensdag 17 maart 2004 12:21

Acties:

Eskimootje

PHP:

<?php
function drawRating($rating) {
    $rating *= 2;
   $image = imagecreatetruecolor(202,15);
   $back = ImageColorAllocate($image,255,255,255);
   $border = ImageColorAllocate($image,0,0,0);
   $red = ImageColorAllocate($image,255,60,75);
   $fill = ImageColorAllocate($image,44,81,150);
   ImageFilledRectangle($image,0,0,201,14,$back);
   ImageFilledRectangle($image,1,1,$rating,14,$fill);
   ImageRectangle($image,0,0,201,14,$border);
   imagePNG($image);
   imagedestroy($image);
}
if($rating == "") 
    $rating = 0;
Header("Content-type: image/png");
drawRating($rating);
?>

Maar dat is php misschien heb je er wat aan.

[ Voor 7% gewijzigd door Eskimootje op 17-03-2004 12:26 ]

woensdag 17 maart 2004 12:38

Acties:

André

Analytics dude

Verwijderd schreef op 17 maart 2004 @ 12:00:
kan het ook minder spartaans of neem ik dan teveel hooi op m'n vork?

Zo spartaans is het niet hoor, het is de simpelste methode om zoiets te maken.

woensdag 17 maart 2004 13:15

Acties:

Verwijderd

Topicstarter

goed, bedankt allemaal! Ik ga aan de slag en ga eens kijken hoever ik kom.

woensdag 17 maart 2004 13:21

Acties:

Noork

Hier was ik ook ooit eens mee bezig. Ik heb gebruik gemaakt van gewone <hr> html lijnen. Zie hieronder het resultaat:

code:

<html><body>
<center>
<table border=0 width=300 cellspacing=0 cellpadding=0><tr>
<td align=right><p align=right><hr Id=lijn1 noshade width=300 size=12 color=green></td>
<td align=left><p align=left><hr Id=lijn2 noshade width=300 size=12 color=red></td>
</tr></table>

<input type=submit value="Verander" ONCLICK="Verander()">

<script language="Javascript">
function Verander() {
window.document.getElementById('lijn1').width = "200";
window.document.getElementById('lijn2').width = "400";

}
</script>



<br><br>
<input type=text Id=wlijn1 value="300">
<input type=text Id=wlijn2 value="300">
<input type=submit value="Nieuwe waarde" ONCLICK="nieuwewaarde()">




<script language="Javascript">
function nieuwewaarde() {
var vlijn1 = window.document.getElementById('wlijn1').value;
var vlijn2 = window.document.getElementById('wlijn2').value;
window.document.getElementById('lijn1').width = vlijn1;
window.document.getElementById('lijn2').width = vlijn2;

}
</script>



<br><br><br>
<hr>



<table border=0 width=120 height=150 cellspacing=0 cellpadding=0><tr>
<td height=100 valign=bottom><hr Id=lijn3 noshade width=12 size=50 color=green></td>
<td height=100 valign=bottom><hr Id=lijn4 noshade width=12 size=60 color=red></td>
<td height=100 valign=bottom><hr Id=lijn5 noshade width=12 size=70 color=yellow></td>
<td height=100 valign=bottom><hr Id=lijn6 noshade width=12 size=40 color=blue></td>
<td height=100 valign=bottom><hr Id=lijn7 noshade width=12 size=65 color=black></td>
<td height=100 valign=bottom><hr Id=lijn8 noshade width=12 size=100 color=magenta></td>
</tr></table>



<SCRIPT LANGUAGE="JavaScript">
function optellen()
{
var aantal = 1;
var num = new Number(window.document.getElementById('teller1').value);
if (num < 100) {
num = aantal + num;
}
window.document.getElementById('teller1').value = num;
window.document.getElementById('lijn3').size = num;
return true;
}
function aftrekken()
{
var aantal = 1;
var num = new Number(window.document.getElementById('teller1').value);
if (num > 0) {
num = num - aantal;
}
window.document.getElementById('teller1').value = num;
window.document.getElementById('lijn3').size = num;
return true;
}
</SCRIPT>



<!-- readonly of disabled -->

<TABLE CELLPADDING="0" CELLSPACING="0">
<TR>
<TD><input type="text" name="teller1" id="teller1" size=3 value="50" readonly></TD>
<TD><TABLE CELLSPACING="1" CELLPADDING="0" border="0">
    <TR><TD>[img]"boven.gif"[/img]</TD></TR>
    <TR><TD>[img]"onder.gif"[/img]</TD></TR>
        </TABLE></TD>
</TR>


</TABLE>






<br><br><br>
<hr>

<br><CENTER>


</body></html>