Avatar billede passiflora Juniormester
09. december 2007 - 16:39 Der er 8 kommentarer og
1 løsning

On mouse over ønsket stort billede til venstre for lille billed

Har før fået hjælpe til noget mouse over ... Mon der er lidt mere hjælpe at hente her ...

Jeg har en række produkter, der listes lodret (i tabel), med tekst til venstre og et lille billede til højre. Når brugeren køre musen hen over det lille billede må et stort gerne vises ...

Søren
Avatar billede w13 Novice
09. december 2007 - 16:52 #1
Du bruger bare koden:
<script type="text/javascript">
function ShowLarge(src){
  var id=document.getElementById("id-for-stort-billede");
  id.setAttribute("src",src);
  id.style.display="inline"
}
function HideLarge(){
  document.getElementById("id-for-stort-billede").style.display="none"
}
</script>

Og så kan du f.eks. bruge koden:

<img src="billede1_lille.jpg" onmouseover="ShowLarge('billede1_stort.jpg')" onmouseout="HideLarge()">

<img id="id-for-stort-billede" style="display:none">
Avatar billede passiflora Juniormester
09. december 2007 - 16:58 #2
... og det bliver så automatisk til venstre for det lille ...
Avatar billede passiflora Juniormester
09. december 2007 - 18:02 #3
Ja frem kommer billedet, ganske vist under ... og skubber tabellen i stykker ... kan man ikke få det ind over den eksisterende tekst ..?

Har sat min kludrede kode ind ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<!-- #include file="ADOVBS.inc" --><%

Set rs = Server.CreateObject("ADODB.RecordSet")
strDSN = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ="&Server.MapPath("/tossen/data/skyts.mdb")
strsql = "SELECT * FROM skyts where type=('"& Request("type") &"') ORDER BY intnr ASC"
rs.Open strSQL, strDSN, 1

Set typers = Server.CreateObject("ADODB.RecordSet")
strDSN = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ="&Server.MapPath("/tossen/data/skyts.mdb")
strsql = "SELECT DISTINCT type FROM skyts ORDER BY type ASC"
typers.Open strSQL, strDSN, 1
%>

<head>
<title>Krudttossen - Det eneste rigtige sted at købe Fyrværkeri</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<base target="_top" />
<script type="text/javascript">
function ShowLarge(src){
  var id=document.getElementById("stortbilled");
  id.setAttribute("src",src);
  id.style.display="inline"
}
function HideLarge(){
  document.getElementById("stortbilled").style.display="none"
}
</script>
</head>

<body style:"colour: black";>

<div id="site">
  <div id="top">
  </div>
  <div id="menu">
    <div id="menuind">
      <!-- #include file="menu.inc" -->
    </div>
  </div>
  <div id="main">
    <div id="vandretmenu">
      <table border="0" cellpadding="3" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1">
        <tr>
          <%
      Do While Not typers.EOF
      %>
          <td>
          <h4><a href="vissortiment.asp?type=<%=typers("type")%>"><%Response.write typers("type")%></a>
          </h4>
          </td>
          <%
   
      typers.MoveNext
  Loop
  typers.Close
  Set typers = Nothing
%>
        </tr>
      </table>
    </div>
    <div id="mainind">
      <table border="0" cellpadding="0" cellspacing="0" width="630px" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1">
        <%
      Do While Not rs.EOF
      %>
        <tr>
          <td align="left" valign="top">
          <h2><%Response.Write "Varenr: " & rs("intnr") & "  -  " & rs("type")%></h2>
          <h1><%Response.Write rs("navn")%></h1>
          <% if len(rs("beskrivelse"))>0 then %>
          <p><%response.write replace(rs("beskrivelse"), vbcrlf, "<br>")%></p>
          <% end if %> </td>
          <td align="right" valign="bottom">
          <img src="billed/skyts/small/<%=rs("nr")%>.png" onmouseover="ShowLarge('billed/skyts/<%=rs("nr")%>.png')" onmouseout="HideLarge()">
          <img id="stortbilled" style="display:none">
          </td>
        </tr>
        <tr>
          <td></a><hr color="#CC0000" size="1"></td>
          </td>
          <td></a><hr color="#CC0000" size="1"></td>
          </td>
        </tr>
        <%
      rs.MoveNext
  Loop
 
  rs.Close
  Set rs = Nothing
%>
      </table>
      </td>
      </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>
Avatar billede w13 Novice
09. december 2007 - 20:06 #4
Ind over den eksisterende tekst? Eh... Du kan vel bare sætte billedet der, hvor det skal være? Evt. ved at bruge style="position:relative;top:50px;left:50px"
Avatar billede passiflora Juniormester
09. december 2007 - 20:34 #5
Nuvel det kan jeg da ...

Men når siden scroller ned ... så bliver billedet vist samme sted, altså uden for det område brugeren kan se ...
Avatar billede w13 Novice
09. december 2007 - 21:23 #6
Ja. Det er jo sådan en HTML-side fungerer. Men hvis du bruger position:fixed; følger det med.
Avatar billede passiflora Juniormester
10. december 2007 - 00:33 #7
Tja'e du foreslog vist selv en position:relative.
Position:fixed er jo bestemt ikke ufarlig farvand :)

Må løse problemet senere.

Svaret dit er jo sikkert rigtigt, så sender du ikke lige et svar, så jeg kan få lukket.

Søren
Avatar billede w13 Novice
10. december 2007 - 02:29 #8
Det gør jeg da.
Avatar billede w13 Novice
10. december 2007 - 16:38 #9
Takker.
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