Hi
I'm a Java programmer wich have been "forced" to do some web development, with mixed results. I have a problem with a page wich is supposed to show images wich change without refreshing based on user input. This is not working out so far. I can't seem to get the images to change. I think I've missed some basic principle on image handling. If you could help me get it to work or have some alternative solution I would be grateful. This is the relevant code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Produktsiden</title
>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%
'Establish connection
Session("produkter") = "Provider=SQLOLEDB.1;Passw
ord=****;P
ersist Security Info=True;User ID=zoonon;Initial Catalog=BMC;Data Source=195.159.30.40"
set conn = Server.CreateObject("ADODB
.Connectio
n")
set rs = Server.CreateObject("ADODB
.Recordset
")
conn.open Session("produkter")
'sql queries
sqlKat = "SELECT * FROM Kategorier WHERE aktiv = '1' "
sqlProd = "SELECT * FROM PRODUKTER"
sqlCountKat = "SELECT COUNT(*) AS TELL FROM PRODUKTER"
%>
<script language="JavaScript" type="text/javascript">
//Global variables
var arrayProdukter = new Array()
var arrayKategorier = new Array()
var arrayProduktBilder = new Array()
var tmpProdukter = new Array()
var teller = 0
</script>
<%
'loop that fills arrays
Set rs = conn.Execute(sqlProd)
Do while not rs.EOF
%>
<script language="JavaScript" type="text/javascript">
//fill arrays with data from database
arrayProdukter[teller]=<%=
rs("art_nr
")%>
arrayKategorier[teller]=<%
=rs("kateg
ori_id")%>
arrayProduktBilder[teller]
=<%=rs("bi
lde")%>
tmpProdukter[teller]=<%=rs
("bilde")%
>
teller++
</script>
<%
rs.movenext
Loop
%>
<script language="JavaScript" type="text/javascript">
function preloadImages()
{
//preload images
bilde1 = new image()
bilde1.src = tmpProdukter[0]+".jpg"
bilde2 = new image()
bilde2.src = tmpProdukter[1]+".jpg"
bilde3 = new image()
bilde3.src = tmpProdukter[2]+".jpg"
bilde4 = new image()
bilde4.src = tmpProdukter[3]+".jpg"
bilde5 = new image()
bilde5.src = tmpProdukter[4]+".jpg"
bilde6 = new image()
bilde6.src = tmpProdukter[5]+".jpg"
bilde7 = new image()
bilde7.src = tmpProdukter[6]+".jpg"
bilde8 = new image()
bilde8.src = tmpProdukter[7]+".jpg"
bilde9 = new image()
bilde9.src = tmpProdukter[8]+".jpg"
}
function getProducts(selectedKatego
ri)
{
var j = 0
for(var i=0;i<arrayProdukter.lengt
h;i++)
{
if((arrayKategorier[i] == selectedKategori) || (selectedKategori == 0))
{
tmpProdukter[j] = arrayProduktBilder[i]
j++
}
}
for (var i=0;i<9;i++)
{
bildenr = i+1
document.grafisk["bilde"+b
ildenr+""]
.src=eval(
"tmpProduk
ter["+i+"]
"+".jpg")
}
}
function showNext()
{
//This will be the function for showing the next products in the tmpProdukter array
}
function showPreviouse()
{
//This will be the function for showing the previouse products in the tmpProdukter array
}
</script>
</head>
<body onLoad="preloadImages()">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<%
Set rs = conn.Execute(sqlKat)
%>
<form method="get" name="selectkat">
<SELECT name="kategori" onChange="getProducts(form
.kategori.
value)">
<OPTION value="0">Alle kategorier</OPTION>
<%
Do while not rs.EOF
%>
<OPTION value="<%=rs("kategori_id"
)%>"><%=rs
("kategori
")%></OPTI
ON>
<%
rs.movenext
Loop
%>
</SELECT></form></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr align="center" valign="middle">
<td width="33%"><a href="/grafisk/temp.html">
</a><img src="grafisk/001.jpg" name="bilde1" alt="grafisk/blank.jpg" style="filter:blendTrans(d
uration=1)
"width="12
0" height="120"></a></td>
<td><a href="/grafisk/temp.html">
</a><img src="grafisk/001.jpg" name="bilde2" alt="grafisk/blank.jpg" style="filter:blendTrans(d
uration=1)
" width="120" height="120"></a></td>
<td width="33%"><a href="/grafisk/temp.html">
</a><img src="grafisk/001.jpg" name="bilde3" alt="grafisk/blank.jpg" style="filter:blendTrans(d
uration=1)
" width="120" height="120"></a></td>
</tr>
<tr align="center" valign="middle">
<td width="33%"><a href="/grafisk/temp.html">
</a><img src="grafisk/001.jpg" name="bilde4" alt="grafisk/blank.jpg" style="filter:blendTrans(d
uration=1)
" width="120" height="120"></a></td>
<td><a href="/grafisk/temp.html">
</a><img src="grafisk/001.jpg" name="bilde5" alt="grafisk/blank.jpg" style="filter:blendTrans(d
uration=1)
" width="120" height="120"></a></td>
<td width="33%"><a href="/grafisk/temp.html">
</a><img src="grafisk/001.jpg" name="bilde6" alt="grafisk/blank.jpg" style="filter:blendTrans(d
uration=1)
" width="120" height="120"></a></td>
</tr>
<tr align="center" valign="middle">
<td width="33%"><a href="/grafisk/temp.html">
</a><img src="grafisk/001.jpg" name="bilde7" alt="grafisk/blank.jpg" style="filter:blendTrans(d
uration=1)
" width="120" height="120"></a></td>
<td><a href="/grafisk/temp.html">
</a><img src="grafisk/001.jpg" name="bilde8" alt="grafisk/blank.jpg" style="filter:blendTrans(d
uration=1)
" width="120" height="120"></a></td>
<td width="33%"><a href="/grafisk/temp.html">
</a><img src="grafisk/001.jpg" name="bilde9" alt="grafisk/blank.jpg" style="filter:blendTrans(d
uration=1)
" width="120" height="120"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="50%" align="center"><img src="grafisk/buttons/backk
napp.gif" width="89" height="45" border="0"></td>
<td align="center"><img src="grafisk/buttons/nextk
napp.gif" width="89" height="45" border="0"></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
