I have an HTML that I've saved with the permission of someone who has the permission to borrow a certain person's work. Anyways, that html is an "img onclick" type of HTML. Please excuse my lack of knowledge in HTMl; ^^;; It's been three years since I discontinued it in school. I barely remember some codes but all of these at once I don't even know where to start. Also, I tried to give a quick and straight-to-the-point description as possible. I'm not even 100% I should be posting this post in this section of the forums but it seems right as it says "HTML" >.>.
My "problem" is that I'd like to get some help on editing this HTML. I'd like to make it smaller in size overall (which I will be asking in graphic alteration forums elsewhere unless someone is knowledgeable of how to do so easily). The images are from an MMORPG called Ragnarok Online.
Here is an example and the source of where I saved my HTML from
As you can see as you click on each of the 5 images, it changes from the original image to another. As you click on a different image, the one you previously clicked on changes back. Notice the change in the information below all of the 5 images.
I'm sure this is all deeply intertwined. If I change the pictures along with the background on which they go on (the rectangle in which the 5 images are located in), since I'm trying to shrink it near the size of a forum signature (I have no idea how many pixels exactly that I want at the moment.) (if not, I'll just leave it as the original size but change the images and background), then I'll have to change all of the widths and heights around and I have no idea what goes where and what does what to what.
Yes I know, it's a big mess to try and figure out. At least, it is for me. Just thinking about it makes me confused.
I have no idea what basically 95% of this HTML says so... yeah. ^^;;
This is the HTML in notepad form if you don't want to save the HTML.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>iRO Chaos Characters</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif; width: 100%;
text-align: center;
background-image: url('charas_bg.jpg');
background-repeat: no-repeat;
background-position: top;
}
div {
width: 900px;
background-color: #F8FCF8;
margin-left: auto;
margin-right: auto;
position: relative;
top: 150px;
text-align: left;
line-height: 1.2em;
font-size: 12px;
}
table { border-collapse: collapse; }
td { line-height: 0; padding: 0px; }
td.image { width: 160px; cursor: pointer; }
table.sub td { line-height: 1.4em; padding-left: 1px; border: 2px solid #F8FCF8; background-color: #E8ECF0 }
table.sub td.td40 { width: 40px; font-weight: bold; color: #506080; background-color: #C0CCE0; }
table.sub td.td40b { width: 40px; }
table.sub td.td30 { width: 30px; text-align: center; }
table.sub td.td130 { width: 130px; }
table.sub td.td160 { width: 160px; }
</style>
<script type="text/javascript">
var selchar, selnum = 0;
function slot(elem, num) {
if (selchar) {
selchar.style.display = '';
selchar.nextSibling.style.display = 'none';
}
elem.style.display = 'none';
elem.nextSibling.style.display = '';
for (var i = 1; i < info.length; i++) {
document.getElementById('c-' + info[i]).innerHTML = chars[num][i];
}
if (chars[num][0] != chars[selnum][0]) {
if (chars[selnum][0]) document.getElementById(chars[selnum][0]).style.display = 'none';
document.getElementById(chars[num][0]).style.display = '';
}
selchar = elem;
selnum = num;
}
var info = ['logo','name','job','guild','lvl','title','str','agi','vit','int','dex','luk'];
var chars = [['']
,['logo_arc.gif','nalmercia','Merchant','Harem','XX/50','Masochist','1','1','1','1','1','1']
,['logo_arc.gif','naImercia','Priestess','Harem','9X/50','Viagra','1','1','1','-99','1','1']
,['logo_arc.gif','nalmercia.','Wizard','Harem','8X/50','Pyromaniac','1','1','1','1','1','1']
,['logo_arc.gif','Himeyasha','Biochemist','Harem','9X/XX','Terrorist','1','1','1','1','1','1']
,['logo_arc.gif','Yashahime','Novice','Harem','NA','Lolita','1','1','1','1','1','1']
];
</script></head><body>
<div>
<table>
<tbody><tr>
<td colspan="7"><img style="height: 42px; width: 900px;" alt="topbar" src="char_files/topbar.png"></td>
</tr><tr>
<td rowspan="2"><img style="height: 270px; width: 50px;" alt="midtopleftborder" src="char_files/midtopleftborder.png"></td>
<td class="image">
<img onclick="slot(this,1);" alt="character" src="char_files/chr110.png" height="150" width="160"><img alt="character" src="char_files/chr111.png" style="display: none;" height="150" width="160"></td>
<td class="image">
<img onclick="slot(this,2);" alt="character" src="char_files/chr210.png" height="150" width="160"><img alt="character" src="char_files/chr211.png" style="display: none;" height="150" width="160"></td>
<td class="image">
<img onclick="slot(this,3);" alt="character" src="char_files/chr310.png" height="150" width="160"><img alt="character" src="char_files/chr311.png" style="display: none;" height="150" width="160"></td>
<td class="image">
<img onclick="slot(this,4);" alt="character" src="char_files/chr000.png" height="150" width="160"><img alt="character" src="char_files/chr001.png" style="display: none;" height="150" width="160"></td>
<td class="image">
<img onclick="slot(this,5);" alt="character" src="char_files/chr510.png" height="150" width="160"><img alt="character" src="char_files/chr511.png" style="display: none;" height="150" width="160"></td>
<td><img style="width: 50px; height: 150px;" alt="midtoprightborder" src="char_files/midtoprightborder.png"></td>
</tr><tr>
<td colspan="3">
<table class="sub">
<tbody><tr>
<td class="td40">Name</td>
<td id="c-name" class="td160" colspan="2"></td>
<td class="td40">STR</td>
<td id="c-str" class="td40b"></td>
</tr>
<tr>
<td class="td40">Job</td>
<td id="c-job" class="td160" colspan="2"></td>
<td class="td40">AGI</td>
<td id="c-agi" class="td40b"></td>
</tr>
<tr>
<td class="td40">Lv.</td>
<td id="c-lvl" class="td160" colspan="2"></td>
<td class="td40">VIT</td>
<td id="c-vit" class="td40b"></td>
</tr>
<tr>
<td class="td40"></td>
<td class="td160" colspan="2"></td>
<td class="td40">INT</td>
<td id="c-int" class="td40b"></td>
</tr>
<tr>
<td class="td40">Guild</td>
<td id="c-guild" class="td130"></td>
<td id="c-logo" class="td30" rowspan="2">
<script type="text/javascript">
var unlogo = {};
for (var i = 1; i < chars.length; i++) unlogo[chars[i][0]] = true;
for (var i in unlogo) document.write('<img alt="logo" id="' + i + '" src="' + i + '" style="display:none;">');
</script><img alt="logo" id="logo_arc.gif" src="char_files/logo_arc.gif" style="display: none;">
</td>
<td class="td40">DEX</td>
<td id="c-dex" class="td40b"></td>
</tr>
<tr>
<td class="td40">Title</td>
<td id="c-title" class="td130"></td>
<td class="td40">LUK</td>
<td id="c-luk" class="td40b"></td>
</tr>
</tbody></table>
</td>
<td colspan="3"><img style="height: 120px; width: 370px;" alt="seyoch" src="char_files/seyoch.png"></td>
</tr><tr>
<td colspan="7"><img style="height: 38px; width: 900px;" alt="bottombar" src="char_files/bottombar.png"></td>
</tr>
</tbody></table>
</div>
</body></html>
<html><head><title>iRO Chaos Characters</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif; width: 100%;
text-align: center;
background-image: url('charas_bg.jpg');
background-repeat: no-repeat;
background-position: top;
}
div {
width: 900px;
background-color: #F8FCF8;
margin-left: auto;
margin-right: auto;
position: relative;
top: 150px;
text-align: left;
line-height: 1.2em;
font-size: 12px;
}
table { border-collapse: collapse; }
td { line-height: 0; padding: 0px; }
td.image { width: 160px; cursor: pointer; }
table.sub td { line-height: 1.4em; padding-left: 1px; border: 2px solid #F8FCF8; background-color: #E8ECF0 }
table.sub td.td40 { width: 40px; font-weight: bold; color: #506080; background-color: #C0CCE0; }
table.sub td.td40b { width: 40px; }
table.sub td.td30 { width: 30px; text-align: center; }
table.sub td.td130 { width: 130px; }
table.sub td.td160 { width: 160px; }
</style>
<script type="text/javascript">
var selchar, selnum = 0;
function slot(elem, num) {
if (selchar) {
selchar.style.display = '';
selchar.nextSibling.style.display = 'none';
}
elem.style.display = 'none';
elem.nextSibling.style.display = '';
for (var i = 1; i < info.length; i++) {
document.getElementById('c-' + info[i]).innerHTML = chars[num][i];
}
if (chars[num][0] != chars[selnum][0]) {
if (chars[selnum][0]) document.getElementById(chars[selnum][0]).style.display = 'none';
document.getElementById(chars[num][0]).style.display = '';
}
selchar = elem;
selnum = num;
}
var info = ['logo','name','job','guild','lvl','title','str','agi','vit','int','dex','luk'];
var chars = [['']
,['logo_arc.gif','nalmercia','Merchant','Harem','XX/50','Masochist','1','1','1','1','1','1']
,['logo_arc.gif','naImercia','Priestess','Harem','9X/50','Viagra','1','1','1','-99','1','1']
,['logo_arc.gif','nalmercia.','Wizard','Harem','8X/50','Pyromaniac','1','1','1','1','1','1']
,['logo_arc.gif','Himeyasha','Biochemist','Harem','9X/XX','Terrorist','1','1','1','1','1','1']
,['logo_arc.gif','Yashahime','Novice','Harem','NA','Lolita','1','1','1','1','1','1']
];
</script></head><body>
<div>
<table>
<tbody><tr>
<td colspan="7"><img style="height: 42px; width: 900px;" alt="topbar" src="char_files/topbar.png"></td>
</tr><tr>
<td rowspan="2"><img style="height: 270px; width: 50px;" alt="midtopleftborder" src="char_files/midtopleftborder.png"></td>
<td class="image">
<img onclick="slot(this,1);" alt="character" src="char_files/chr110.png" height="150" width="160"><img alt="character" src="char_files/chr111.png" style="display: none;" height="150" width="160"></td>
<td class="image">
<img onclick="slot(this,2);" alt="character" src="char_files/chr210.png" height="150" width="160"><img alt="character" src="char_files/chr211.png" style="display: none;" height="150" width="160"></td>
<td class="image">
<img onclick="slot(this,3);" alt="character" src="char_files/chr310.png" height="150" width="160"><img alt="character" src="char_files/chr311.png" style="display: none;" height="150" width="160"></td>
<td class="image">
<img onclick="slot(this,4);" alt="character" src="char_files/chr000.png" height="150" width="160"><img alt="character" src="char_files/chr001.png" style="display: none;" height="150" width="160"></td>
<td class="image">
<img onclick="slot(this,5);" alt="character" src="char_files/chr510.png" height="150" width="160"><img alt="character" src="char_files/chr511.png" style="display: none;" height="150" width="160"></td>
<td><img style="width: 50px; height: 150px;" alt="midtoprightborder" src="char_files/midtoprightborder.png"></td>
</tr><tr>
<td colspan="3">
<table class="sub">
<tbody><tr>
<td class="td40">Name</td>
<td id="c-name" class="td160" colspan="2"></td>
<td class="td40">STR</td>
<td id="c-str" class="td40b"></td>
</tr>
<tr>
<td class="td40">Job</td>
<td id="c-job" class="td160" colspan="2"></td>
<td class="td40">AGI</td>
<td id="c-agi" class="td40b"></td>
</tr>
<tr>
<td class="td40">Lv.</td>
<td id="c-lvl" class="td160" colspan="2"></td>
<td class="td40">VIT</td>
<td id="c-vit" class="td40b"></td>
</tr>
<tr>
<td class="td40"></td>
<td class="td160" colspan="2"></td>
<td class="td40">INT</td>
<td id="c-int" class="td40b"></td>
</tr>
<tr>
<td class="td40">Guild</td>
<td id="c-guild" class="td130"></td>
<td id="c-logo" class="td30" rowspan="2">
<script type="text/javascript">
var unlogo = {};
for (var i = 1; i < chars.length; i++) unlogo[chars[i][0]] = true;
for (var i in unlogo) document.write('<img alt="logo" id="' + i + '" src="' + i + '" style="display:none;">');
</script><img alt="logo" id="logo_arc.gif" src="char_files/logo_arc.gif" style="display: none;">
</td>
<td class="td40">DEX</td>
<td id="c-dex" class="td40b"></td>
</tr>
<tr>
<td class="td40">Title</td>
<td id="c-title" class="td130"></td>
<td class="td40">LUK</td>
<td id="c-luk" class="td40b"></td>
</tr>
</tbody></table>
</td>
<td colspan="3"><img style="height: 120px; width: 370px;" alt="seyoch" src="char_files/seyoch.png"></td>
</tr><tr>
<td colspan="7"><img style="height: 38px; width: 900px;" alt="bottombar" src="char_files/bottombar.png"></td>
</tr>
</tbody></table>
</div>
</body></html>
