Avatar billede andersasp Nybegynder
18. oktober 2005 - 11:17 Der er 8 kommentarer og
1 løsning

Vise title på billeder via javascript

Hejsa,

Jeg har et script som smider et x-antal billeder ud fra en database. Dette script virker rigtig godt. Men nu vil jeg gerne have det sådan at når man holder musen over et billede, vil man så få overskriften (beskrivelsen af billedet) vist foroven at de 16 felter, overskriften er tilknyttet det enkelte felt som også indeholder billederne til mouseover:

Se et eksempel af scriptet her:
http://www.smz.dk/projekter.asp?PID=1

Jeg er rimelig blank i Javascript og håber det kan lade sig gøre.

Jeg beklager den lange kode forneden. Det eneste den dog gør er at definere billederne som skal bruges til de forskellige mouseover.

Overskriften skal så vises/ændres her efter ”boliger”:

Home - > Projekter - > Boliger -> Rec(“Pmenu”)

Således bliver de enkelte billeder til mouseover og hyperlinks:
-----------------------------------------------------------------

<a href="<%=link1%>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img1','','upload/projekter/<%=pic1%>',1)"><img src="upload/projekter/<%=picon1%>" name="img1" width="120" height="120" border="0"></a>

Dette er så scriptet som smider de 16 billeder ud:
----------------------------------------------------

<%
Dim Rec
Set Rec = Server.CreateObject("ADODB.Recordset")

SQL = "SELECT * FROM projekter where Pnogle = " & request.QueryString("PID") & " ORDER BY PID DESC"

Dim intPageCount, intRecCount, intPageNumber, i, howmanyshowing

if request.QueryString("page") = "" then
  intPageNumber = 1
else
  intPageNumber = cint(request.QueryString("page"))
end if

ReDim pic(0), picon(0), picid(0)

howmanyshowing = 16
Rec.Open SQL, MM_database_STRING, 1, 1

If Not (Rec.BOF Or Rec.EOF) Then
  Rec.PageSize = howmanyshowing
  Rec.AbsolutePage = intPageNumber
  intRecCount = Rec.PageSize
  intPageCount = Rec.PageCount
  Do While Not rec.EOF And intRecCount > 0
    if intRecCount <> Rec.PageSize then
      ' Der skal kun udvides hvis det første element er blevet fyldt
      ReDim preserve pic(ubound(pic)+1)
      ReDim preserve picon(ubound(picon)+1)
      ReDim preserve picid(ubound(picid)+1)
    end if

    pic(ubound(pic)) = rec("Pbillede")
    picon(ubound(picon)) = rec("Pbilledeon")
    picid(ubound(picid)) = rec("PID")   

    if pic(ubound(pic)) = "" then
      pic(ubound(pic)) = "billedemangler.gif"
    end if
    if picon(ubound(picon)) = "" then
      picon(ubound(picon)) = "billedemangleron.gif"
    end if

    intRecCount = intRecCount - 1
    Rec.MoveNext
  Loop
End If

Totalrecords        = ubound(pic) + 1

Rec.Close
set Rec = nothing

thismanytotal      =  Totalrecords
startcounthere    = 0

if thismanytotal <= 16 then
  thismanyonpage = thismanytotal
end if

thismanyonpage    = ((intPageNumber - 1) * howmanyshowing)

if Totalrecords-1 < 1 then
  pic1 = "bg1.gif"
  picon1 = "bg1.gif"
  link1 = "#"
else
  pic1 = pic(0)
  picon1 = picon(0)
  link1 = "uniktprojekt.asp?pid=" & picid(0)
end if

if Totalrecords < 2 then
  pic2 = "bg2.gif"
  picon2 = "bg2.gif"
  link2 = "#"
else
  pic2 = pic(1)
  picon2 = picon(1)
  link2 = "uniktprojekt.asp?pid=" & picid(1)
end if

if Totalrecords < 3 then
  pic3 = "bg3.gif"
  picon3 = "bg3.gif"
  link3 = "#"
else
  pic3 = pic(2)
  picon3 = picon(2)
  link3 = "uniktprojekt.asp?pid=" & picid(2)
end if

if Totalrecords < 4 then
  pic4 = "bg4.gif"
  picon4 = "bg4.gif"
  link4 = "#"
else
  pic4 = pic(3)
  picon4 = picon(3)
  link4 = "uniktprojekt.asp?pid=" & picid(3)
end if

if Totalrecords < 5 then
  pic5 = "bg1.gif"
  picon5 = "bg1.gif"
  link5 = "#"
else
  pic5 = pic(4)
  picon5 = picon(4)
  link5 = "uniktprojekt.asp?pid=" & picid(4)
end if

if Totalrecords < 6 then
  pic6 = "bg2.gif"
  picon6 = "bg2.gif"
  link6 = "#"
else
  pic6 = pic(5)
  picon6 = picon(5)
  link6 = "uniktprojekt.asp?pid=" & picid(5)
end if

if Totalrecords < 7 then
  pic7 = "bg3.gif"
  picon7 = "bg3.gif"
  link7 = "#"
else
  pic7 = pic(6)
  picon7 = picon(6)
  link7 = "uniktprojekt.asp?pid=" & picid(6)
end if

if Totalrecords < 8 then
  pic8 = "bg4.gif"
  picon8 = "bg4.gif"
  link8 = "#"
else
  pic8 = pic(7)
  picon8 = picon(7)
  link8 = "uniktprojekt.asp?pid=" & picid(7)
end if

if Totalrecords < 9 then
  pic9 = "bg1.gif"
  picon9 = "bg1.gif"
  link9 = "#"
else
  pic9 = pic(8)
  picon9 = picon(8)
  link9 = "uniktprojekt.asp?pid=" & picid(8)
end if

if Totalrecords < 10 then
  pic10 = "bg2.gif"
  picon10 = "bg2.gif"
  link10 = "#"
else
  pic10 = pic(9)
  picon10 = picon(9)
  link10 = "uniktprojekt.asp?pid=" & picid(9)
end if

if Totalrecords < 11 then
  pic11 = "bg3.gif"
  picon11 = "bg3.gif"
  link11 = "#"
else
  pic11 = pic(10)
  picon11 = picon(10)
  link11 = "uniktprojekt.asp?pid=" & picid(10)
end if

if Totalrecords < 12 then
  pic12 = "bg4.gif"
  picon12 = "bg4.gif"
  link12 = "#"
else
  pic12 = pic(11)
  picon12 = picon(11)
  link12 = "uniktprojekt.asp?pid=" & picid(11)
end if

if Totalrecords < 13 then
  pic13 = "bg1.gif"
  picon13 = "bg1.gif"
  link13 = "#"
else
  pic13 = pic(12)
  picon13 = picon(12)
  link13 = "uniktprojekt.asp?pid=" & picid(12)
end if

if Totalrecords < 14 then
  pic14 = "bg2.gif"
  picon14 = "bg2.gif"
  link14 = "#"
else
  pic14 = pic(13)
  picon14 = picon(13)
  link14 = "uniktprojekt.asp?pid=" & picid(13)
end if

if Totalrecords < 15 then
  pic15 = "bg3.gif"
  picon15 = "bg3.gif"
  link15 = "#"
else
  pic15 = pic(14)
  picon15 = picon(14)
  link15 = "uniktprojekt.asp?pid=" & picid(14)
end if

if Totalrecords < 16 then
  pic16 = "bg4.gif"
  picon16 = "bg4.gif"
  link16 = "#"
else
  pic16 = pic(15)
  picon16 = picon(15)
  link16 = "uniktprojekt.asp?pid=" & picid(15)
end if
%>   
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<BODY onLoad="MM_preloadImages('upload/projekter/<%=pic1%>','upload/projekter/<%=pic2%>','upload/projekter/<%=pic3%>','upload/projekter/<%=pic4%>','upload/projekter/<%=pic5%>','upload/projekter/<%=pic6%>','upload/projekter/<%=pic7%>','upload/projekter/<%=pic8%>','upload/projekter/<%=pic9%>','upload/projekter/<%=pic10%>','upload/projekter/<%=pic11%>','upload/projekter/<%=pic12%>','upload/projekter/<%=pic13%>','upload/projekter/<%=pic14%>','upload/projekter/<%=pic15%>','upload/projekter/<%=pic16%>')">
Avatar billede roenving Novice
18. oktober 2005 - 12:35 #1
Hrm, jeg er ikke helt med ...

-- skal linket fra billedet sættes ind som tekst efter myrestien, som er der i forvejen, skal det være et link, og hvornår skal det så ændres, for musen kører jo hele tiden ind over et nyt billede ?-)
Avatar billede andersasp Nybegynder
18. oktober 2005 - 12:51 #2
Agraaa sorry hvis jeg ikke har forklaret det godt nok. Overskriften skal blot vises ovenover de 16 felter (tabellen). DVS, når man holder musen over et bestemt billede vil 1. mouseover billedet vises og 2. den tilknyttede overskrift blive vist over tabellen, kører man så musen over et andet billede vil den nye overskrift så blive vist istedet for den sidste! Og når musen ikke er over noget billede skal der ikke vises nogen overskrift:

Som det kan ses her trækker jeg billederne samt ID'et ud til de enkelte poster her:

    pic(ubound(pic)) = rec("Pbillede")
    picon(ubound(picon)) = rec("Pbilledeon")
    picid(ubound(picid)) = rec("PID")


Her ville jeg så også smide overskriften til de enkelte felter ud som ser således ud:

Rec(“Pmenu”) - >    picmenu(ubound(picmenu)) = rec("PID")

Det er så den som ydermere skal vises...

Håber min forklaring giver mening :-O
Avatar billede andersasp Nybegynder
18. oktober 2005 - 12:52 #3
Sorry : picmenu(ubound(picmenu)) = rec("picmenu")
Avatar billede roenving Novice
18. oktober 2005 - 14:21 #4
Så f.eks. sådan:

<td><p><strong>POULSEN &amp; PARTNERE</strong><br>
        arkitekter og r&aring;dgivere </p>
        <a href="indexstart.asp">Home</a> - &gt; <a href="kategorier.asp?HKID=33">Projekter</a> - &gt; Boliger<span id="showPicMenu" style="visibility:hidden">&nbsp;- &gt;</span><br>
        <img src="design/poulsenogpartnere/images/spacer.gif" width="6" height="3"></td>

-- og sådan:

<a href="<%=link1%>" onmouseout="MM_swapImgRestore();showHeadline();" onmouseover="MM_swapImage('img1','','upload/projekter/<%=pic1%>',1);showHeadline('<%=picmenu1%>'"><img src="upload/projekter/<%=picon1%>" name="img1" width="120" height="120" border="0"></a>


-- og en funktion mere i script-blokken:

function showHeadline(txt){
  var elm = document.getElementById('showPicMenu');
  if(txt){
    elm.innerHTML = "&nbsp;- &gt; " + txt;
    elm.style.visibility = "visible";
  }else
    elm.style.visibility = "hidden";
}
Avatar billede andersasp Nybegynder
18. oktober 2005 - 15:05 #5
Ok, jeg har nu sat de forskellige ting ind: og som du kan se på test siden bliver overskriften udskrevet, men af en eller anden grund melder den fejl???

http://www.stein-graphic.dk/demo/poulsen/projekter.asp?PID=1

-- Mouseover kode --------------------

<a href="<%=link1%>" onmouseout="MM_swapImgRestore();showHeadline();" onmouseover="MM_swapImage('img1','','upload/projekter/<%=pic1%>',1);showHeadline('<%=picmenu1%>'"><img src="upload/projekter/<%=picon1%>" name="img1" width="120" height="120" border="0"></a>


Script som er lagt ekstra ind
-------------------------------------
function showHeadline(txt){
  var elm = document.getElementById('showPicMenu');
  if(txt){
    elm.innerHTML = "&nbsp;- &gt; " + txt;
    elm.style.visibility = "visible";
  }else
    elm.style.visibility = "hidden";
}

Koden som er oppe i menulinien:
-------------------------------------
<span id="showPicMenu" style="visibility:hidden">&nbsp;- &gt;</span>
Avatar billede roenving Novice
18. oktober 2005 - 15:07 #6
-- jeg har glemt en lukkeparantes:

<a href="<%=link1%>" onmouseout="MM_swapImgRestore();showHeadline();" onmouseover="MM_swapImage('img1','','upload/projekter/<%=pic1%>',1);showHeadline('<%=picmenu1%>')"><img src="upload/projekter/<%=picon1%>" name="img1" width="120" height="120" border="0"></a>
Avatar billede andersasp Nybegynder
18. oktober 2005 - 15:10 #7
Tusinde tak for hjælpen, nu virker det helt perfekt.. :)
Avatar billede roenving Novice
18. oktober 2005 - 15:13 #8
Velbekomme '-)
Avatar billede roenving Novice
18. oktober 2005 - 15:15 #9
-- og tak for point ;~}
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