Både ja og nej, men jeg bør nok lige vise hvad siden skal gøre, så mit spørgsmål giver bedre mening.
Først en forklaring, dernæst kode:
Siden består af 25 små udsnit af billeder. Når man klikker på et af de 25 små udsnit, forsvinder de resterende 24 små udsnit, og resten af det billede der hører til det udsnit man klikkede på, kommer til syne på skærmen. Ydermere kommer der efter et givet tidspunkt (settimeout) et link(til galleri) til syne. Dette bringer brugeren tilbage til forsiden(de 25 små udsnit), og man kan nu klikke på et af de andre udsnit, for at se et nyt stort billede. Som det sidste er det så, at jeg gerne vil have en lille beskrivelse af det aktuelle billede der kommer til syne, nå man klikker på et af de små udsnit. Den beskrivelse skriver jeg i img tag attributten title for det lille billede. ligesom linket (til galleri) vil jeg så have en lille boks eller bare et sted hvor denne beskrivelse bliver vist. Så det skal ikke være onmouseover/out at beskrivelsen bliver vist, men som en del af scriptet det starter processen som henholdsvis "fjerner" de små billeder og viser det store.
Det skal siges at jeg har fået (stor)hjælp til koden her på eksperten (tak for det), jeg mener hvis jeg selv havde lavet den nedenstående kode kunne jeg vel også selv lave det sidste.
<html>
<head>
<title>none</title>
<style type="text/css">
html,body{height:100%;border:0;margin:0;padding:0;font-family:verdana;}
#img-container{
position:relative;
width:500px;
height:500px;
padding:0px;
}
#stortbillede{
position:absolute;
top:0px;
left:0px;
width:500px;
height:500px;
z-index:-1;
}
.lilbill{
position:absolute;
top:0px;
left:0px;
float:left;
width:100px;
height:100px;
z-index:1;
border:0;
margin:0;
padding:0;
}
#picdscrp
{
position:absolute;
top:0px;
left:0px;
float:left;
width:100px;
height:100px;
border:0;
background-color:pink;
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
function applyOnclick(){
var img = document.images;
for(i=0;img.length>i;i++){
if(img[i].className=='lilbill'){
img[i].onclick = function(){showBig(this);}
}
}
}
var raekkefolge,num,intId,ny = true;
function showBig(elm){
if(ny)ny = !ny;
else return;
var id=elm.name.replace(/^.*?(\d+)$/,"$1"),idT=elm.title,tmp,n;
num = 0;
raekkefolge = new Array();
for(i=0;25>i;i++)raekkefolge[i] = i+1;
for(i=0;25>i;i++){
n = Math.floor(Math.random()*raekkefolge.length);
tmp = raekkefolge[i];
raekkefolge[i] = raekkefolge[n];
raekkefolge[n] = tmp;
setTimeout("document.getElementById('visForsideLink').style.display = 'inline';",3000)
}
alert("billede" + id + ".jpg" + idT);//her har jeg testet at det der skrives i title medtages, men jeg kan så ikke få det det rigtige sted hen
document.images['stortbillede'].src = "billede" + id + ".jpg";
txt = idT;
intId = setInterval('hideSmall()',80);
}
function hideSmall(){
document.getElementById('lillebillede'+raekkefolge[num++]).style.display='none';
if(num==25){clearInterval(intId);ny = true;}
}
window.onload = applyOnclick;
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div id="img-container"> <img name="stortbillede" id="stortbillede" src="default.jpg">
<img name="lillebillede1" id="lillebillede1" src="1.jpg" class="lilbill" title="Dette er en bil">
<img name="lillebillede2" id="lillebillede2" src="2.jpg" class="lilbill" title="blablabla2" style="left:100px;">
<img name="lillebillede3" id="lillebillede3" src="3.jpg" class="lilbill" title="blablabla3" style="left:200px;">
<img name="lillebillede4" id="lillebillede4" src="4.jpg" class="lilbill" title="blablabla4" style="left:300px;">
<img name="lillebillede5" id="lillebillede5" src="5.jpg" class="lilbill" title="blablabla5" style="left:400px;">
<img name="lillebillede6" id="lillebillede6" src="6.jpg" class="lilbill" title="blablabla6" style="top:100px;">
<img name="lillebillede7" id="lillebillede7" src="7.jpg" class="lilbill" title="blablabla7" style="top:100px;left:100px;">
<img name="lillebillede8" id="lillebillede8" src="8.jpg" class="lilbill" title="blablabla8" style="top:100px;left:200px;">
<img name="lillebillede9" id="lillebillede9" src="9.jpg" class="lilbill" title="blablabla9" style="top:100px;left:300px;">
<img name="lillebillede10" id="lillebillede10" src="10.jpg" class="lilbill" title="blablabla10" style="top:100px;left:400px;">
<img name="lillebillede11" id="lillebillede11" src="11.jpg" class="lilbill" title="blablabla11" style="top:200px;">
<img name="lillebillede12" id="lillebillede12" src="12.jpg" class="lilbill" title="blablabla12" style="top:200px;left:100px;">
<img name="lillebillede13" id="lillebillede13" src="13.jpg" class="lilbill" title="blablabla13" style="top:200px;left:200px;">
<img name="lillebillede14" id="lillebillede14" src="14.jpg" class="lilbill" title="blablabla14" style="top:200px;left:300px;">
<img name="lillebillede15" id="lillebillede15" src="15.jpg" class="lilbill" title="blablabla15" style="top:200px;left:400px;">
<img name="lillebillede16" id="lillebillede16" src="16.jpg" class="lilbill" title="blablabla16" style="top:300px;">
<img name="lillebillede17" id="lillebillede17" src="17.jpg" class="lilbill" title="blablabla17" style="top:300px;left:100px;">
<img name="lillebillede18" id="lillebillede18" src="18.jpg" class="lilbill" title="blablabla18" style="top:300px;left:200px;">
<img name="lillebillede19" id="lillebillede19" src="19.jpg" class="lilbill" title="blablabla19" style="top:300px;left:300px;">
<img name="lillebillede20" id="lillebillede20" src="20.jpg" class="lilbill" title="blablabla20" style="top:300px;left:400px;">
<img name="lillebillede21" id="lillebillede21" src="21.jpg" class="lilbill" title="blablabla21" style="top:400px;">
<img name="lillebillede22" id="lillebillede22" src="22.jpg" class="lilbill" title="blablabla22" style="top:400px;left:100px;">
<img name="lillebillede23" id="lillebillede23" src="23.jpg" class="lilbill" title="blablabla23" style="top:400px;left:200px;">
<img name="lillebillede24" id="lillebillede24" src="24.jpg" class="lilbill" title="blablabla24" style="top:400px;left:300px;">
<img name="lillebillede25" id="lillebillede25" src="25.jpg" class="lilbill" title="blablabla25" style="top:400px;left:400px;">
</div>
</td>
</tr>
<tr>
<td align="center">
<a href="#" id="visForsideLink" onclick="for(i=1;26>i;i++){document.getElementById('lillebillede'+i).style.display='inline';};this.style.display='none';return false;" style="display:none;">til galleri</a>
</td>
</tr>
</table>
</body>
</html>
