Member Avatar for mcle

I'm interested in learning how to do this. What I'm doing is I'm making a social networking site linked to a game called Habbo, and for the registration page, once they put in their Habbo Username, I want to be able to load the image next to it.

http://www.habbo.com/habbo-imaging/avatarimage?user=[[[[TEXTBOX.DATA]]]]&direction=2&head_direction=2&gesture=sml&size=l&img_format=gif

That is the link to the image. So basically, once they enter a value into the textbox, I want to be able to use that value to replace the [[[[TEXTBOX.DATA]]]] part from the above link and use that as an image.

Could anybody help me out, please? :)

  • 2 Contributors
  • 5 Replies
  • 395 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by fxm
Member Avatar for fxm

Here

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <script type="text/javascript">
function showIt(that) {
    var sLink="http://www.habbo.com/habbo-imaging/avatarimage?user="
    var sParm="&direction=2&head_direction=2&gesture=sml&size=l&img_format=gif"
    var sText=that.value // [[[[TEXTBOX.DATA]]]]

    var oImg = document.getElementById('avatar')
    oImg.setAttribute('src',sLink+sText+sParm)
}
    </script>
    <title></title>
  </head>
  <body>
    <form>
      <input type='text' onblur="showIt(this)">
    </form>
    <img src="" id='avatar' name="avatar">
  </body>
</html>

is a toy showing the basic concept.

To my delight, entering 'test' in the textbox actually displays your image :)

Edited by fxm because: Show improved code
commented: Awesome! +0
Member Avatar for mcle

Awesome, it works like a charm!

However, I have one small request if you could help me out a bit more! I want to create a user verification system, in which they must change how their avatar looks in order to register. This would thus only allow people to use their account while registering, because they have to change their avatar in order to match a basic template. So basically, I would need help comparing their avatar (the one pulled from the code you gave above) to a static image of an avatar. Also, if they don't match, would there be any way to block registration? Ie. nullify the "submit" button?

If not, it's okay, you've already helped me out more than enough :)

Member Avatar for fxm

verification

I don't quite get the picture - pun intended :)

If I enter 'fxm' in the textbox and hit enter, precisely what is supposed to be compared to what?

Member Avatar for mcle

Well if you put in fxm, it won't show up because that user is banned :X
But if you put in fm, it would show this avatar:
[IMG]http://www.habbo.com/habbo-imaging/avatarimage?user=fm&direction=2&head_direction=2&gesture=sml&size=l&img_format=gif[/IMG]
That is currently what the user "FM" looks like. However, if he wanted to join my website, he would have to change his clothing in order to match
[IMG]http://www.habbo.com/habbo-imaging/avatarimage?user=pwnz&direction=2&head_direction=2&gesture=sml&size=l&img_format=gif[/IMG]
the basic template.
In other words, he would have to prove that it's really him trying to register by changing his avatar to match with the template. (If he changes his avatar, the link http://www.habbo.com/habbo-imaging/avatarimage?user=fm&direction=2&head_direction=2&gesture=sml&size=l&img_format=gif will update itself)
And what I want to do is compare these. So let's say he is trying to register, but isn't able to because his avatar doesn't match. Then, he changes his avatar to match the template (which, will update automatically), and that allows him to register.
Does that make more sense?

Edited by mcle because: n/a
Member Avatar for fxm

The basic problem is that - in principle - client-side authentication can't be trusted, so even if there is a way to do this [or something like it] in javascript, it should be done in another way.

With server-side scripting you could prompt the would-be user with the existing avatar [or an equivalent] along with instructions to make a change, then proceed with the registration if an acceptable change occurs within xx seconds or log information about the attempt if it doesn't.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.