har lavet et udkast til lidt kode, men som sagt er det nok bedre at nogen med mere erfaring påtager sig opgaven, især mht kompatibilitet osv.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
iide = 0;
function imgfunc(iid)
{
if (iide > 0)
{
document.getElementById("tda"+iide).style.visibility = "hidden";
document.getElementById("ovr"+iide).style.visibility = "hidden";
}
document.getElementById("tda"+iid).style.visibility = "visible";
document.getElementById("ovr"+iid).style.visibility = "visible";
document.getElementById("tdimg").style.backgroundImage = "url('Images/"+iid+"m.png')";
head = "";
switch(iid)
{
case 1:
head = "Overskrift 1!"; // Overskrift 1 //
desc = "Tekst til nummer 1"; // Tekst 1 //
break;
case 2:
head = "Overskrift 2!"; // Overskrift 2 //
desc = "En smule tekst til nummer 2"; //Tekst 2 //
break;
case 3:
head = "Overskrift 3!"; // Overskrift 3 //
desc = "Her skriver jeg lige så meger at det kommer til at fylde mere end 1 linie så man kan se hvordan elementerne reagerer på det..."; // Tekst 3 //
break;
case 4:
head = "Overskrift 4!"; // Overskrift 4 //
desc = "Oooohh... Nummer 4"; // Tekst 4 //
break;
case 5:
head = "Overskrift 5!"; // Overskrift 5 //
desc = "Tekst til nummer 5<br />Linie 2"; // Tekst 5 //
break;
default:
head = "FEJL!"; // Overskrift i tilfælde af fejl på switchen //
desc = "Der er sket en fejl!<br />Ingen match på variablen iid = '"+iid+"'!"; // Tekst i tilfælde af fejl på switchen //
}
document.getElementById("desc1").innerHTML = "<span class='shdr'>"+head+"<br /></span>"+desc;
iide = iid;
}
</script>
<style type="text/css">
table {
border-collapse:collapse;
}
td {
padding: 0px;
border: 0px;
}
#tdimg {
background-image: url('Images/1m.png');
vertical-align: bottom;
height: 240px;
width: 425px;
}
.tdt {
border: 2px solid white;
height: 83px;
width: 83px;
}
.aimg {
visibility: hidden;
float: left;
}
#desc1 {
background-color: #CCCCCC;
border: 1px solid white;
opacity:0.7;
filter:alpha(opacity=70);
padding: 10px;
}
.shdr {
font-size: larger;
font-weight: bolder;
line-height: 180%;
}
.ovr {
border: 1px solid #000000;
background-color: #5D8CB6;
height: 81px;
width: 81px;
opacity:0.3;
filter:alpha(opacity=30);
visibility: hidden;
}
</style>
<!-- SIDENS TITEL HER UNDER -->
<title>Sidens titel her</title>
</head>
<body onload="imgfunc(1)">
<table>
<tr>
<td colspan="5" id="tdimg"><div id="desc1"></div></td>
</tr>
<tr>
<td><img class="aimg" id="tda1" src='a.bmp' /></td>
<td><img class="aimg" id="tda2" src='a.bmp' /></td>
<td><img class="aimg" id="tda3" src='a.bmp' /></td>
<td><img class="aimg" id="tda4" src='a.bmp' /></td>
<td><img class="aimg" id="tda5" src='a.bmp' /></td>
</tr>
<tr>
<td class="tdt" onmouseover="imgfunc(1)" style="background-image: url('Thumbs/t1.png');"><div class="ovr" id="ovr1"></div></td>
<td class="tdt" onmouseover="imgfunc(2)" style="background-image: url('Thumbs/t2.png');"><div class="ovr" id="ovr2"></div></td>
<td class="tdt" onmouseover="imgfunc(3)" style="background-image: url('Thumbs/t3.png');"><div class="ovr" id="ovr3"></div></td>
<td class="tdt" onmouseover="imgfunc(4)" style="background-image: url('Thumbs/t4.png');"><div class="ovr" id="ovr4"></div></td>
<td class="tdt" onmouseover="imgfunc(5)" style="background-image: url('Thumbs/t5.png');"><div class="ovr" id="ovr5"></div></td>
</tr>
</table>
</body>
</html>
Koden er ikke valideret endnu, og kan sikkert i de rette hænder komme til at fylde halvdelen. Jeg har også nogle billeder som jeg fandt rundt om på nettet, for at give den til fyld, men i så fald er jeg nød til at sende en komprimeret fil.
Det er bedst at undgå tables hvis man kan komme af sted med det fordi de reagerer så forskelligt fra browser til browser.
Jeg har sigtet efter kun at bruge CSS2 og under til styling, da der findes mange ældre browsere rundt om endnu...
