Avatar billede muggen Nybegynder
06. juli 2005 - 23:18 Der er 12 kommentarer

Angive størrelse på billede i funktion

Hej
Jeg 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">&nbsp;</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">&nbsp;</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>
Avatar billede roenving Novice
07. juli 2005 - 01:19 #1
<img id="bigImage" onmouseover="changeImage()" style="border:0;width:300px;height:300px" src="landscape3.gif">
Avatar billede muggen Nybegynder
07. juli 2005 - 20:30 #2
roenving - Det duer ikke. Der er vel heller ikke nogen forskel på om man gør det vi ganske almindelig html (border="0" width="0" height="0") eller det du foreslår (style="border:0;width:300px;height:300px") - eller er der? Det billede der ligger der (landscape.gif) er en slags placeholder og derfor er størrelsen sat til 0x0 i html koden. Jeg har brug for at styre størelsen på billedet der vises på en anden måde - kan det lade sig gøre???
Avatar billede busschou Praktikant
08. juli 2005 - 08:42 #3
muggen >> tager du ikke lige et kig på dine åbne spørgsmål og får dem lukket? i hvert fald dem jeg er med i ;o) http://www.eksperten.dk/spm/606459
Avatar billede roenving Novice
08. juli 2005 - 09:39 #4
Sandsynligvis betyder det ikke det fjerneste om du bruger style eller gammeldags html-attributter, men visse moderne doctypes tillader ikke de gamle, som kan erstattes af style-properties ...

-- og hvad er der galt i at have et placeholder-billede, som har en udstækning, når det alligevel vises i en div, som er skjult ?-)

-- hvorfor skal der i det hele taget være et billede i img-tagget fra start ?o]

-- og svaret på dit spørgsmål er, at der ikke er den fjerneste grund til at angive størrelsen på et billede andre steder end i img-tagget, hvis det alligevel altid skal vises i den størrelse !-)

-- jeg plejer at undgå at gå over åen efter vand, men at gå over åen for at ringe efter en taxa, som kan køre forbi det sted, du stod på, for at se hvad der var foran din næsetip er, tjah ...
Avatar billede roenving Novice
08. juli 2005 - 09:40 #5
-- hov, jeg manglede også at finde ud af, hvordan du egentlig skiftede src på det billede og om du faktisk bare havde prøvet mit forslag ?-)
Avatar billede muggen Nybegynder
09. juli 2005 - 23:46 #6
roenving - Kan du prøve at kigge på følgende URL (http://www.m-mdesign.dk/ladybird/planteoversigt_gartneri.asp?gartneri=40035&gruppe=Pelargonier%20peltatum) - så kan du se hvad der sker lige nu når man kører over de små billeder (har kun tilføjet din ene rettelse - style="border:0;width:300px;height:300px", men har ikke ændret source eller noget). Som du kan se dukker det statiske billede landscape3.gif op hele tiden når jeg hover over de små billeder, fordi størrelsen er sat til 300x300. Hvis jeg derimod sætter størrelsen til 0x0, så vises landscape3.gif ikke når jeg kører over med musen, men kun det store billede af det jeg gerne vil se. Desværre er størrelsen på de store billeder ikke ens, men jeg vil gerne have dem vist i samme størrelse. Kan du fortælle mig helt konkret hvor jeg styrer størelsen på det store billede der vises. Det kan godt være du allerede har giver mig svaret, men jeg har åbenbart ikke forstået det endnu. På forhånd tak for hjælpen.
Avatar billede muggen Nybegynder
09. juli 2005 - 23:52 #7
roenving - prøv at se på følgende URL hvor størrelsen af landscape3.gif er sat til 0x0: http://www.m-mdesign.dk/ladybird/planteoversigt_gartneri1.asp?gartneri=40035&gruppe=Pelargonier%20peltatum
Avatar billede muggen Nybegynder
09. juli 2005 - 23:54 #8
busschou - send som svar i http://www.eksperten.dk/spm/606459 og så får du dine point.
Avatar billede busschou Praktikant
10. juli 2005 - 07:10 #9
muggen >> er svaret :O)
Avatar billede busschou Praktikant
27. juli 2005 - 15:59 #10
muggen >> gået død ??
Er som sagt svaret, du har stadig spørgsmål tilbage fra 2003, måske de også skulle lukkes, bare for en ordens skyld :o)
Avatar billede muggen Nybegynder
08. februar 2006 - 16:07 #11
roenving - send som svar her så jeg kan få lukket det her spørgsmål. busschou har fået point for sit svar i en anden tråd.
Avatar billede roenving Novice
08. februar 2006 - 16:11 #12
Oki '-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester