This is the first version of my Avatar Gallery. This will add a dropdown box in the profile with a 'preview' option for members. This allows them to choose from various avatars that you have already provided for them to use. Useful if you want to provide 'related' avatars.

Main Header
<script>
/*Avatar Gallery v1
Created By Wrighty
No Repost, Rip or Claiming*/
var av_db = {


    avatars: [
        ["Marc","av1"],
        ["Graham","av2"],
        ["Wrighty","av3"]
    ],


    _s: document.createElement('select'),
    _f: document.createElement('font'),
    _f1: document.createElement('font'),
    _i: document.createElement('img'),
    _r: document.createElement('tr'),
    _p: document.createElement('tr'),
    _c: document.createElement('td'),
    _c1: document.createElement('td'),
    _c2: document.createElement('td'),
    _c3: document.createElement('td'),
    _c4: document.createElement('td'),
    build: function(){
        var av = get('avatar_url','name')[0].parentNode.parentNode.parentNode
        /*Build Chooser*/
        this._s.onchange = function(){
            get('preview_av','id').src = get('av_choose','id').value
        };
        this._s.id = 'av_choose';
        /*Add Options*/
        for(i=0; i<this.avatars.length; i++){
            this._s.options[i] = new Option(this.avatars[i][0],this.avatars[i][1]);
        }
        /*Fonts*/
        this._f.size='2';
        this._f1.size='1'
        this._f.appendChild(document.createTextNode('Choose Avatar:'));
        this._f1.appendChild(document.createTextNode('Choose an avatar to use from the predefined list'));
        this._i.id='preview_av';
        this._i.src='';
        /*Cells*/
        this._c.appendChild(this._f);
        this._c1.appendChild(this._s);
        this._c2.appendChild(this._f1);
        this._c4.appendChild(this._i);
        /*Rows*/
        this._r.appendChild(this._c);
        this._r.appendChild(this._c1);
        this._r.appendChild(this._c2);
        this._p.appendChild(this._c3);
        this._p.appendChild(this._c4);
        this._p.appendChild(this._c3.cloneNode(true));
        /*Build Page*/
        av.parentNode.insertBefore(this._r, av);
        av.parentNode.insertBefore(this._p, av);
    },
    profile: function(){
        av_db.build();
        if(document.addEventListener){
            document.profile_form.addEventListener('submit', this.save,false);
        }else{
            document.profile_form.attachEvent('onsubmit', this.save);
        }
    },
    save: function(){
        if(get('avatar_url','name')[0].value == '' && get('preview_av','id').width != '0'){
            get('avatar_width','name')[0].value = get('preview_av','id').width;
            get('avatar_height','name')[0].value = get('preview_av','id').height;
            get('avatar_url','name')[0].value = get('preview_av','id').src;
        }
    }
};
</script>

Main Footer
<script>
/*Avatar Gallery v1
Created By Wrighty
No Repost, Rip or Claiming*/
av_db.profile();
</script>

---

To Edit:

        ["Marc","av1"],
        ["Graham","av2"],
        ["Wrighty","av3"]

You edit that part of the code. Make sure of a few things though:
1) The last line DOES NOT contain a comma
2) You do not use any double quotes (") in the names or links.
3) You put the name first, and then the URL in the last part.

Repeat the following for more options:
["Graham","http://images.virtualforums.co.uk/homepage/av.jpg"],

Enjoy. Remember, remove the current avatars too. They're there as examples, but are not allowed to be used.

Where exactly is the drop down?

http://wimg.co.uk/TO5MDJ.gif

I tried out a few images and see none.

Code:

Select All

 

    avatars: [
        ["Air","http://needaear.com/a/air.png"],
        ["Alone One","http://needaear.com/a/alone.gif"],
        ["Alone Two","http://needaear.com/a/alone.jpg"],
        ["Always Love You","http://needaear.com/a/alwaysloveyou.gif"],
        ["Babe","http://needaear.com/a/babe.gif"],
        ["Band Camp","http://needaear.com/a/bandcamppie.jpg"]
    ],

{BR} avatars: [ {BR} ["Air","http://needaear.com/a/air.png"], {BR} ["Alone One","http://needaear.com/a/alone.gif"], {BR} ["Alone Two","http://needaear.com/a/alone.jpg"], {BR} ["Always Love You","http://needaear.com/a/alwaysloveyou.gif"], {BR} ["Babe","http://needaear.com/a/babe.gif"], {BR} ["Band Camp","http://needaear.com/a/bandcamppie.jpg"] {BR} ],

 

I even tried removing the spaces with no effect. Global Main Header / Footer.

On my testboard: http://guide.vforums.co.uk/

Post over in Code Support and we'll see what we can do.

Code has been fixed

Please recopy both parts again.

Preview: http://wimg.co.uk/GaxwMJ.gif

I will compile a list of all the Need A Ear avatars and provide a copy / paste in a bit. :]. Eighty predefined avatars. :].