Java to multiply an image displayed ?

[Steve_Moore]

Hi folks.
My first post. I have tried to get my head around javascript and it's a slow process. Although I can make numerous popup windows from on-line tutorials, I don't have a need for them at the minute.

What I do have a need for is something that is possibly used on this very site.

I've looked but can't find an example at the minute, but the threads on this board have the ability to be rated by members. I assume that an image is displayed in the respective column or multiples of that image depending on how highly it was rated.

In this instance java uses the equation of "amount of points divided by number of times voted" to get the average, then uses the "round" code(?) to get the whole number.

With the whole number it then produces an image that amount of times in the respective table on the board.

For most of you folks on here I'm sure I'm asking the equivelant of how to boil and egg. I seem to know the info required but not how to lay it out without getting an error message in the URL for the image.

I don't even need to get a whole number as the variable I use is a whole number by default.

Anyone have any suggestions with a short piece of code i could modify ? My objective is to display on my VERY old message board a tiny flashing LED image(s) next to the members name for the amount of new private messages they have got within the body of the HTML using the variable set in the js.

Many thanks in advance if you take the time to try and help me.

[Vladdy]

Don't know about this forum, most probably it is done server side, bu thte easiest apprach would be using CSS.

Say you have an image 10x10 pixels put it in the background of a block element that is 10px high:
.stars
{ display: block;
background: url("star.gif");
height: 10px;
}

then you can control the amount of images visible by specifying the element's width in multiples of your image width:
<div class="stars" style="width:10px" title="one star"></div>
<div class="stars" style="width:20px" title="two stars"></div>
<div class="stars" style="width:30px" title="three stars"></div>

If you want to change the amount of stars dynamically, just change the elment's width

document.getElementById('starHolder').style.width = (N * 10) + 'px';

[Steve_Moore]

Thanks Vladdy,

But that won't work. The background is already set using the style template of the board. The image needs to be a foreground one.
It would be easier if it wasn't as I could utilise the background-repeat to do it as well.

I've viewed the code that's present in the board script but it doesn't like it when I modify it and try and use it elsewhere.

So I thought I'd suss out the professionals. btw that means you good folks;)

I've just posted this, and I've read and re-read your post.
Why do i find this script soooo alien. It may be that there's more than one "way" of achieving something with this script and that is why it can become hard to follow. I think I learn a way and then I see someone else tell me a completely different way to achieve the same result.

Hang on a sec. I'm gonna get the original script that displays these stars and drag it backk here to show you.

[Vladdy]

It should not be a problem: just make gif's background transparent and add another child element:
<div style="background: url(existingbg.gif)"><div class="stars"></div></div>
BTW: background-repeat does not allow you to specify the number of repetitions...

[Steve_Moore]

while I was editting, you posted.

But which part of all the script you given me generates the amount of "stars" to match the number equal to the variable ?

[Vladdy]

Implementation would depend on how and where you determine the amount of start to write. If this is the information stored in DB I would do it server side... though that is for another forum.

[Steve_Moore]

does this help you to help me ? below is an image of a part of the php file containg the code which sets the variable $rate.

In the repsective htm file the table (td) tags have just the background set to the default of the style of the board and the only text not in the tags is $rate. This along with the JS shown generates an amount of gif images to match the thread rating.

http://mysite.freeserve.com/elviscrawler2/js.jpg

[RoyW]

Not sure where you are getting your javascript variable from (are you passing a var from php to javascript?)

anyway- here is a JavaScript that will put 5 images below the name fred in a table cell

1)put this in the HEAD section of your doc

<script>
function getStars(num)
{
var str = num>0 ? "" : "&nbsp;";
for(var i=0 ; i<num ; i++)
str+='<img src="images/star.gif" border="0">';
return str;
}
</script>


put the script where you want the stars, e.g.

<table>
<tr>
<td>
fred<br>
<script>
document.write(getStars( 5 ));
</script>
</td>
</tr>
</table>

[Steve_Moore]

Now Roy, that looks good. (I nearly understand it as well !)

what you asked me about the php to java.

The image above is from the file called board.php. so i take it the answer is yes I am.

just help me out with one bit of your code please. you say it will display 5 stars. okay. but I want to use a variable to denote how many stars are to show. ie can ( 5 ) become ( $xxx ) ?

what do I use, or rather where do I put the variable within the code you wrote ?

also in the htm file that displays the table where I wish to place the info, the variable is used to say you have $xxx new messages. Can i use the same variable to generate the same amount of images next to this line ? If so can you edit your code above for me accordingly ?

Many thanks.

[RoyW]

Hi,
This is where I get confused.
I know very little about PHP but what you need to do is get the php to output text that assigns a var

<script>
<!-- start

<?php>
printf("var num = " . $xxx);
</php>

//end -->
</script>

which would produce in the parsed file

<script>
<!-- start

var num = 3

//end -->
</script>

but I don't know enough about php to say for sure how you could do this.

(E.G. Would this work)

printf("document.write(getStars(" . $rate . "));"

[Steve_Moore]

Phew !

Well if it helps, the above captured image was taken from the file board.php.

So I assumed that this did generate the variable, which in there, is $rate.

[Steve_Moore]

I've gone over this now quite a few times. This is harder than I appreciated.

Roy you've picked up on a principal that I was unaware of. The php file generates the variable and then when the respective htm file is executed the jscript picks it up from there.

whilst I had an incling that info needed to be placed there, I still couldn't get the jscript to work when I gave the repsective htm file a fixed value to the variable within the jscript.

My apologies for not knowing the correct way to explain what I've done, or the terminology most of you are familiar with, but I'm just plain too new to know any different.

Edit:
Just realised Roy, The variable has already been passed from the php file.
The variable relating to new Private Messages is used to display a numeric character.
So when the main htm file is activated it says "Steve - you have 3 new messages....."
Now with the variable there, I'm gonna try and use your code above. I might have to generate another variable that is equal to it, but I'll cross that bridge if necessary.

2nd edit:
Roy, it works !!!!! :thumbsup:
Even managed to utilise your code with another variable to gain another effect.
Thanks very much for taking the time to do that.
Thanks also to Vladdy for the support as well.

Here's a crude tear-off from the site using some quickly made gifs just to test it:

http://mysite.freeserve.com/elviscrawler2/protopmflash.gif