[CB] UBBC Image options..

[Todge]

This will give you options to post images in a chosen size, as well as giving them a title, with will be displayed when you hover the mouse over the posted image.

Put it in your Global Footer.. No editing is required.

<style type="text/css">
<!--
#imagebox {
position: absolute;
width: 350px;
height: 175px;
border: 1px solid black;
background-color: #FFFFFF;
padding: 2px;
display: none;
}
.imginfo { border: 0px; border-bottom: 1px dotted black; }
-->
</style>
<div id="imagebox"><center><u>Please fill in the necessary fields below...</u></center>
<br>
<font size=1>Image URL: <input class="imginfo" id="imageurl" style="width: 75%" maxlength="100" value="http://" type="text">
<br><br>
Image title: <input class="imginfo" id="imagetitle" style="width: 75%" maxlength="60" type="text">
<br><br>
Image width: <input class="imginfo" id="imagewidth" name="imagewidth" size="5" maxlength="4" type="text">
<br><br>
Image height: <input class="imginfo" id="imageheight" name="imageheight" size="5" maxlength="3" type="text"></font>
<br><br>
<center><a href='javascript:addTags()'>then click here.</a></center>
</div>
<script type="text/javascript">
<!--
/*
UBBC Image Options
by Todge
Copyright © 2010
Please keep this header intact
*/

if(location.href.match(/tion=display/))
{
var posts = document.getElementsByTagName('font');
for(p=0; p<posts.length; p++)
{
if(posts[p].innerHTML.match(/google_ad_section_start/))
{
posts[p].innerHTML = posts[p].innerHTML.replace(/\[img=name:((\w|\s)+)*; width:(\d+)?; height:(\d+)?;\]/ig,'<img title="$1" alt="$1" style="width:$3; height:$4;" src="').replace(/\[\/img\]/ig,'">');
}}}

if(document.postForm)
{
var swidth = screen.width;
var sheight = screen.height;
var imagebox = document.getElementById('imagebox');

imagebox.style.top = (sheight/2)-100+'px';
imagebox.style.left = (swidth/2)-175+'px';

function addImage(thebox)
{
thebox.style.display = 'block';
return;
}

function addTags()
{
var imgurl = document.getElementById('imageurl').value;
document.getElementById('imageurl').value = 'http://';
var imgtitle = document.getElementById('imagetitle').value;
document.getElementById('imagetitle').value = '';
var imgwidth = document.getElementById('imagewidth').value;
document.getElementById('imagewidth').value = '';
var imgheight = document.getElementById('imageheight').value;
document.getElementById('imageheight').value = '';
imagebox.style.display = 'none';
if(imgurl.match(/^http:\/\//) && imgurl.match(/\.(jpg|gif|png|jpeg)$/i))
{
add('[img=name:'+imgtitle+'; width:'+imgwidth+'; height:'+imgheight+';]'+imgurl+'[/img]');
return;
}
else
{
add('[img]','[/img]');
return;
}}

var imageLinks = document.getElementsByTagName('a');
for(i=0; i<imageLinks.length; i++)
{
if(imageLinks[i].href.match(/\[img\]/))
{
imageLinks[i].href = 'javascript:addImage(imagebox)';
break;
}
}}
//-->
</script>

Clicking on the button to post an image should now give you options.. If you fill any of them in, the code will create the UBBC coding for you, if you leave them blank, the [img][/img] tags will be added to the posting area as normal.

You have to fill in the Image URL option (obviously), but any of the others are optional, and will effect the posted image accordingly. Just adding one size property will scale the image to that size, if you add both properties the image will be forced to that size, stretching or distorting it if necessary.