Angive størrelse på billede i funktion
HejJeg har en mouseover effekt på nogle billeder hvor navnet på billederne trækkes fra en access database. Mouseover effekten kalder en javascript funktion for at vise et større billede i en anden kolonne i tabellen. Billederne der vises før mouse over er opgivet i html koden til at skal være 100px x 100px. Når jeg mouseover billedet ser jeg det store billede, men desværre i sin fulde størrelse - jeg vil kun se det i 300px x 300px. Hvor angiver jeg størrelsen på det store billede jeg ser når jeg mouseover det lille billede? Er det i selve funktionen? Jeg har klippet lidt af koden så i kan se hvad der sker:
MouseOver som kalder changeImage() funktion:
<font size="2" face="Verdana, Arial, Helvetica, sans-serif"><img height="100" width="100" onmouseover="changeImage();gettip('<%= stien %>')" onmouseout="changeImage();reset()" src="billeder-produkter/<%= stortbillede %>"<br><br><%= rs("sort")%>
changeImage() funktion:
function changeImage()
{
document.getElementById('visBillede').style.visibility=(document.getElementById('visBillede').style.visibility=='hidden')?'visible':'hidden';
}
Her vises det store billede:
<td width="325">
<div align="center"><div id="visBillede" style="text-align:center;visibility:hidden;width:200px;height:200px;">
<img id="bigImage" onmouseover="changeImage()" border="0" width="0" height="0" src="landscape3.gif"><p id="tip"></p></div></div>
</td>
Her er hele koden samlet:
<html>
<head>
<meta http-equiv="Content-Language" content="da">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="ladybird.css">
<title>Billede</title>
<script type="text/javascript">
function changeImage()
{
document.getElementById('visBillede').style.visibility=(document.getElementById('visBillede').style.visibility=='hidden')?'visible':'hidden';
}
function gettip(txt)
{
tip.innerHTML=txt
}
function reset()
{
tip.innerHTML=""
}
</script>
</head>
<!--#include file="db.asp"-->
<%
' Open Connection to the database
set conn = Server.CreateObject("ADODB.Connection")
conn.Open xDb_Conn_Str
varGartneri = request.querystring("gartneri")
varGruppe = request.querystring("gruppe")
' Build Query
strsql = "select * from [produkt] WHERE Gruppe= ('"& varGruppe &"') AND Gartneri= ("& varGartneri &")"
set rs = Server.CreateObject("ADODB.Recordset")
rs.Open strsql, conn, 1, 2
%>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<div align="center">
<table border="0" width="950" id="table1">
<tr>
<td colspan="2"><!-- #include file="billede_top.htm" --></td>
</tr>
<tr>
<td></td>
<td><!-- #include file="menu_top.htm" --></td>
</tr>
<tr>
<td align="center" width="160" valign="top"><!-- #include file="menu_venstre.htm" --></td>
<td width="790" class="streg" align="left" valign="top">
<div align="left"><br><br><br>
<table border="0" width="790" id="table2">
<tr>
<td width="15"> </td>
<td width="450"><h4>Gartnerier</h4><p>Kør markøren over de enkelte billeder for at se større billede i højre side af skærmen.<br><br>
<% skift=0 %>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<%
Do While Not Rs.Eof
skift=skift+1
%>
<%
stortbillede = rs("billede")
sti = "<img src=billeder-produkter/"
stislut = ">"
stien = sti+stortbillede+stislut
'response.write stien
'response.end
%>
<td align="center" valign="top" width="100"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><img height="100" width="100" onmouseover="changeImage();gettip('<%= stien %>')" onmouseout="changeImage();reset()" src="billeder-produkter/<%= stortbillede %>"<br><br><%= rs("sort")%></font></td>
<td align="left" valign="top" width="10"> <p align="left"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"> </font></td>
<%if skift=4 then
response.write("</tr><tr>")
skift=0
end if
%>
<%
Rs.MoveNext
Loop
%>
</tr>
</table>
</td>
<td width="325">
<div align="center"><div id="visBillede" style="text-align:center;visibility:hidden;width:200px;height:200px;">
<img id="bigImage" onmouseover="changeImage()" border="0" width="0" height="0" src="landscape3.gif"><p id="tip"></p></div></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2"><!-- #include file="billede_bund.htm" --></td>
</tr>
</table>
</div>
</body>
</html>
