[RD] Turn Boards into pictures

[kepli]

i'm really sorry but with that code the image is repeated over and over again if it's not big enough. can you fix that? sorry.

[Wormopolis]

ok so before I make more changes, what do you want the image to do? centered? top left? repeat only horiz?

[kepli]

Centered. Thanks so mucjh. I feel unexplainably bad about this. I'm really really really really really really really really really really really really really really really really really really really really really really really really really sorry.

[Wormopolis]

<script type="text/javascript">
<!--
// Quick board name as image
// by Wormopolis
var boardArray=new Array();

if (true) {

cellHeight=30; //height of row

boardArray['general']="http://www.sonofthesouth.net/union-generals/custer/pictures/general-custer-300.jpg";
boardArray['betaskinview']="http://www.web-books.com/eLibrary/Medicine/Physiology/Skin/skin02.jpg";
// the name in the brackets is the board ID


for (tds=document.getElementsByTagName('td'), t=0; t<tds.length; t++) {
if (tds[t].width=='66%' && tds[t].className.match(/windowbg/) && tds[t].vAlign=='top') {
blink=tds[t].getElementsByTagName('a')[0];
bname=(blink.href.match(/board=(.*?)(&|$)/) ? RegExp.$1 : null);
if (boardArray[bname]) {
blink.replaceChild(document.createElement('font'),blink.firstChild);
tds[t].colSpan=5; tds[t].style.height=cellHeight; tds[t].width='100%';
tds[t].style.backgroundImage='url('+boardArray[bname]+')';
tds[t].style.backgroundRepeat="no-repeat";
tds[t].style.backgroundPosition="center center";
tds[t].previousSibling.style.display = tds[t].nextSibling.style.display = tds[t].nextSibling.nextSibling.style.display = tds[t].nextSibling.nextSibling.nextSibling.style.display = "none";
}
}
}
}
// -->
</script>

[kepli]

Sorry but:
this makes the image still on the board background. Is there anyway to make the image completely by itself?
If my background was just black all I would want to see would be black and the picture. The picture shouldn't be on a board.

[Wormopolis]

ok... Im starting to get a clearer picture now. you want an image, removed from the table where the boards are, but still in the same spot where the board WOULD have been. then have the table resume after the picture:

board

board

board

IMAGE

board

board

board

board

like that?

[kepli]

yes! exactly. I'm so sorry for all your hard work gone to waste.

[Wormopolis]

its fine. in the future you should try to be more specific in the request so someone doesnt haver to go through several incarnations of a code before it gets to what you need. pictures help.

Im treying this out on a clean site right now. manipulating the HTML mid table can be tricky.

[kepli]

oKAY thanks.

[Wormopolis]

ok... it took a bit to get this working in both IE and FF, but I got it:


<script type="text/javascript">
<!--
// convert board to floating image
// by Wormopolis - www.wormocodes.com
// keep header intact

boardArray=new Array();


boardArray['general']="http://www.pollsb.com/photos/o/59924-next_monster.jpg";
// add in your replacement images here. boardid in the brackets.



// DO NOT EDIT BELOW
for (tb=document.getElementsByTagName('table'), b=0; b<tb.length; b++) {
if (tb.className=='bordercolor' && tb.cellSpacing==0 && tb.cellPadding==0 && tb.width=='100%') {
keeptable=tb.parentNode.cloneNode(true);
break;
}
}

document.write('<textarea id="helper" style="display:none">temp</textarea>');

hlpr=document.getElementById('helper');
for (tds=keeptable.getElementsByTagName('td'), d=tds.length-1; d>=0; d--) {
if (tds[d].width=='66%' && tds[d].className.match(/windowbg/) && tds[d].vAlign=='top') {
if (tds[d].getElementsByTagName('a')[0].href.match(/board=(.*?)$/)) {
bname=RegExp.$1;
if(boardArray[bname]) {
keepLink=tds[d].getElementsByTagName('a')[0].href;
keepcount=tds[d].parentNode.getElementsByTagName('td')-1;
temp='</tbody></table></td></tr></table><br>';
temp+='<center><a href="'+keepLink+'"><img src="'+boardArray[bname]+'" border=0></a></center>';
temp+='<table border="0" width="100%" cellspacing="0" cellpadding="0" class="bordercolor"><tr><td><table cellpadding="4" cellspacing="1" border="0" width="100%">';
hold=tds[d].parentNode.parentNode.parentNode;
hold=hold.parentNode.parentNode.parentNode;
hold=hold.parentNode.parentNode;
hlpr.value=hold.innerHTML;
hlpr.value=hlpr.value.replace(/(\n|\r|\v)/gm,'');
hlpr.value=hlpr.value.replace('<tr>'+tds[d].parentNode.innerHTML+'</tr>',temp);
hlpr.value=hlpr.value.replace('<TR>'+tds[d].parentNode.innerHTML.replace(/(\n|\r|\v)/gm,'')+'</TR>',temp);
hold.innerHTML=hlpr.value;
}
}
}
}
tb.parentNode.parentNode.replaceChild(keeptable,tb.parentNode);
hlpr.parentNode.removeChild(hlpr);

// -->
</script>


main footer.

[kepli]

thanks! you are the best!!!!!!!!!!!!!!!!
it works too!

[Wormopolis]

just keep adding lines at the top like:

boardArray['camera']="http://www.pollsb.com/photos/o/59924_ooga_booga.jpg";

for each board you want to replace