Søg
Avatar billede reino Nybegynder
06. september 2005 - 08:10 Der er 21 kommentarer og
1 løsning

Aktivt link ved galleri, 2

Hejsa

Har følgende kode som virker perfekt. Koden genererer nogle links hvormed man kan skifte billeder. Dog har jeg et ønske om at bruge nogle .gif knapper så man "bladre" mellem billeder, men kan ikke få det til at virke med .gifferne, kun ved selve tekstlinksene, er det muligt også at skifte billederne via .gif ikonerne ?. Gode point gives da det er en haster :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#billede {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(11.jpg);
}
</style>
<script type="text/JavaScript">
  var backImage = new Array();
  backImage[0] = "11.jpg";
  backImage[1] = "22.jpg";
  backImage[2] = "33.jpg";
  backImage[3] = "";

  function changeBGImage(link){
    document.getElementById('billede').style.backgroundImage = "url(" + backImage[+link.firstChild.nodeValue] + ")";
    var l = document.getElementsByTagName("a");
    for(i=0;l.length>i;i++){
      if(l[i].className.indexOf("bLink")>-1){
        l[i].style.border = "0";
      }
    }
    link.style.border = "1px solid red";
  }
</script>
</head>
<body>
<table>
  <tr>
    <td height="300" width="500" id="billede">&nbsp;</td>
  </tr>
  <tr>

<td style="border: 1px solid #fff;"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">1</a></td><td><a class="bLink" href="#" onclick="changeBGImage(this);return false;">2</a></td>
  </tr>
</table>
</body>
</html>
Avatar billede roenving Novice
06. september 2005 - 13:18 #1
Tjah, det er vel ikke helt svært:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#billede {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(11.jpg);
}
</style>
<script type="text/JavaScript">
  var backImage = new Array();
  backImage[backImage.length] = "11.jpg";
  backImage[backImage.length] = "22.jpg";
  backImage[backImage.length] = "33.jpg";
  backImage[backImage.length] = "44.jpg";
  //osv.

  var actNum = 0;

  function changeBGImage(link,dir){
    num += dir;
    num = num<0?backImage.length:num>=backImage.length?0:num;
    document.getElementById('billede').style.backgroundImage = "url(" + backImage[num] + ")";
    var l = document.getElementsByTagName("img");
    for(i=0;l.length>i;i++){
      if(l[i].className.indexOf("bLink")>-1){
        l[i].style.border = "0";
      }
    }
    link.style.border = "1px solid red";
  }
</script>
</head>
<body>
<table>
  <tr>
    <td height="300" width="500" id="billede">&nbsp;</td>
  </tr>
  <tr>

<td style="border: 1px solid #fff;"><img src="tilbage.gif" class="bLink" onclick="changeBGImage(this,-1);"></td><td><img src="fremad.gif" class="bLink" onclick="changeBGImage(this,1);"></td>
  </tr>
</table>
</body>
</html>

-- absolut utestet !-)
Avatar billede roenving Novice
06. september 2005 - 13:19 #2
Hov, alle steder skal num skiftes ud med actNum (6 steder !-)
Avatar billede reino Nybegynder
07. september 2005 - 04:35 #3
Super :), det virker, har dog lige en sidste ting, kan man ikke kombinere det nye script med det gamle, så man både har mulighed for at bladre via gif ikonerne samt linksene også ?.
Avatar billede roenving Novice
07. september 2005 - 10:09 #4
Samme sted ?-)
Avatar billede reino Nybegynder
07. september 2005 - 10:10 #5
ja, hvis det er muligt :)
Avatar billede roenving Novice
07. september 2005 - 11:55 #6
-- og den skal stadig markere den valgte option ?-)
Avatar billede reino Nybegynder
07. september 2005 - 11:59 #7
ja tak :)
Avatar billede roenving Novice
07. september 2005 - 12:02 #8
Så f.eks. sådan:

  <tr>
    <td style="border: 1px solid #fff;" onclick="changeBGImage(this,-1);"><img src="tilbage.gif" class="bLink">&nbsp;1</td>
    <td style="border: 1px solid #fff;" onclick="changeBGImage(this,1);"><img src="fremad.gif" class="bLink">&nbsp;2</td>
  </tr>
Avatar billede reino Nybegynder
09. september 2005 - 14:49 #9
hejsa, kan stadigvæk ikke få det til at virke, jeg har lavet følgende kode nu. Ville være glad hvis du kunne gennesmkue det :)

Set fso = CreateObject("Scripting.FileSystemObject")
set mainfolder=fso.GetFolder(strPhysicalPath)
Set filecollection = mainfolder.Files

intTotPics = 0
For Each file In filecollection
      intTotPics = intTotPics + 1
     
      Next
      Redim strPicArray(2,intTotPics)
    x = 0
    For Each file in filecollection
    strPicArray(0,x) = file.Name
            x = x + 1
    Next
      For x = 0 to UBound(strPicArray,2)-1
      'Response.Write "<img src='" & thumbFilePath & strPicArray(0,x) & "'>"
      Response.Write "backImage[" & x & "] = '" & thumbFilePath & rs("sagsnummer") & "-101c" & x & ".jpg';" & vbCrLf
          intPicNo = intPicNo + 1
      If intPicNo=picsInRow Then

          intPicNo = 0
          End If

    Next


%>

  function changeBGImage(link){
    document.getElementById('billede').style.backgroundImage = "url(" + backImage[+link.firstChild.nodeValue] + ")";
    var l = document.getElementsByTagName("a");
    for(i=0;l.length>i;i++){
      if(l[i].className.indexOf("bLink")>-1){
        l[i].style.border = "0";
      }
    }
    link.style.border = "1px solid white";
  }
</script>



        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="20">&nbsp;&nbsp;&nbsp;&nbsp;<br><br></td>
                    <td width="550" valign="top"><br>
                        <table border="0" style="border:1px solid #000000;" id="billede" width="550" height="397" cellspacing="0" cellpadding="0">
                        <tr>
                        <td height="300">&nbsp;</td>
                        </tr>
                        <tr>
                        <td class="trans" height="15" width="100%" align="left" valign="middle">
                        <table border="0" cellspacing="0" cellpadding="2">
                            <tr>
                                <td valign="middle"><span class="billedgalleri">&nbsp;&nbsp;&nbsp;&nbsp;<img src="gfx/billedgalleri.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
                                <%for a=1 to intPicNo-2%>
<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;"><%=a%></a></td>
<%
next
%>
                            </tr>
                        </table>
                       
                        </td>
                        </tr>
                        </table><br>
                    <table width="100%" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td width="50%" onMouseOver="imagename1.src='gfx/forrige_over.gif'" onMouseOut="imagename1.src='gfx/forrige.gif'"><img border=0 name="imagename1" src="gfx/forrige.gif" width="265" height="19"></td>
                            <td width="50%" align="right" onMouseOver="imagename.src='gfx/naeste_over.gif'" onMouseOut="imagename.src='gfx/naeste.gif'"><img border=0 name="imagename" src="gfx/naeste.gif" width="265" height="19"></td>
                        </tr>
                    </table><br>
                    </td>
Avatar billede roenving Novice
11. september 2005 - 09:39 #10
Hvordan ser det ud, når det rammer browseren (Vis kilde !-)
Avatar billede reino Nybegynder
11. september 2005 - 09:53 #11
Hejsa

Kommer her:

<style type="text/css">
#billede {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(1170/1170-101c1.jpg);
}
</style>
<script type="text/JavaScript">
  var backImage = new Array();
backImage[0] = '1170/1170-101c0.jpg';
backImage[1] = '1170/1170-101c1.jpg';
backImage[2] = '1170/1170-101c2.jpg';
backImage[3] = '1170/1170-101c3.jpg';
backImage[4] = '1170/1170-101c4.jpg';
backImage[5] = '1170/1170-101c5.jpg';
backImage[6] = '1170/1170-101c6.jpg';
backImage[7] = '1170/1170-101c7.jpg';
backImage[8] = '1170/1170-101c8.jpg';
backImage[9] = '1170/1170-101c9.jpg';
backImage[10] = '1170/1170-101c10.jpg';
backImage[11] = '1170/1170-101c11.jpg';
backImage[12] = '1170/1170-101c12.jpg';
backImage[13] = '1170/1170-101c13.jpg';
backImage[14] = '1170/1170-101c14.jpg';
backImage[15] = '1170/1170-101c15.jpg';
backImage[16] = '1170/1170-101c16.jpg';
backImage[17] = '1170/1170-101c17.jpg';
backImage[18] = '1170/1170-101c18.jpg';
backImage[19] = '1170/1170-101c19.jpg';
backImage[20] = '1170/1170-101c20.jpg';
backImage[21] = '1170/1170-101c21.jpg';
backImage[22] = '1170/1170-101c22.jpg';


  function changeBGImage(link){
    document.getElementById('billede').style.backgroundImage = "url(" + backImage[+link.firstChild.nodeValue] + ")";
    var l = document.getElementsByTagName("a");
    for(i=0;l.length>i;i++){
      if(l[i].className.indexOf("bLink")>-1){
        l[i].style.border = "0";
      }
    }
    link.style.border = "1px solid white";
  }
</script>



        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="20">&nbsp;&nbsp;&nbsp;&nbsp;<br><br></td>
                    <td width="550" valign="top"><br>
                        <table border="0" style="border:1px solid #000000;" id="billede" width="550" height="397" cellspacing="0" cellpadding="0">
                        <tr>
                        <td height="300">&nbsp;</td>
                        </tr>
                        <tr>
                        <td class="trans" height="15" width="100%" align="left" valign="middle">
                        <table border="0" cellspacing="0" cellpadding="2">
                            <tr>
                                <td valign="middle"><span class="billedgalleri">&nbsp;&nbsp;&nbsp;&nbsp;<img src="gfx/billedgalleri.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
                               
<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">1</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">2</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">3</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">4</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">5</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">6</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">7</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">8</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">9</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">10</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">11</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">12</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">13</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">14</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">15</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">16</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">17</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">18</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">19</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">20</a></td>

<td width="5"><a class="bLink" href="#" onclick="changeBGImage(this);return false;">21</a></td>

                            </tr>
                        </table>
                       
                        </td>
                        </tr>
                        </table><br>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="50%" onMouseOver="imagename1.src='gfx/forrige_over.gif'" onMouseOut="imagename1.src='gfx/forrige.gif'"><img border=0 name="imagename1" src="gfx/forrige.gif" width="265" height="19"></td>
                            <td width="50%" align="right" onMouseOver="imagename.src='gfx/naeste_over.gif'" onMouseOut="imagename.src='gfx/naeste.gif'"><img border=0 name="imagename" src="gfx/naeste.gif" width="265" height="19"></td>
                        </tr>
                    </table>
Avatar billede roenving Novice
11. september 2005 - 10:15 #12
Hvordan virker det ikke ?-)
Avatar billede reino Nybegynder
11. september 2005 - 10:16 #13
er det ok hvis jeg sender et link ?
Avatar billede roenving Novice
11. september 2005 - 10:18 #14
Jepz !-)
Avatar billede reino Nybegynder
11. september 2005 - 10:21 #15
Oki, thanks :)

http://ekomp.reinholdt.cc/default.asp?komp=visboligbilleder&sagsnummer=21&billede=1
Avatar billede roenving Novice
11. september 2005 - 10:58 #16
Hvis funktionaliteten skal være hel, slipper du nok ikke udenom at give dine links et id !-)

-- og jeg skal lige forstå, hvorfor der er 23 elementer i arrayet, men kun 21 links ?-)
Avatar billede reino Nybegynder
11. september 2005 - 11:14 #17
Oki, havde det lidt på fornemmelsen - 2 af billederne i mappen er en plantegning samt boligsagsbilledet, læser det via fso, så derfor har jeg trukket 2 fra i scriptet. Dvs. billeder på denne sag er der kun 21 af. Selvom der ligger 23 i mappen.
Avatar billede roenving Novice
11. september 2005 - 11:33 #18
Jeg kan ikke anbefale at have de to ekstra billeder, da du så for evigt skal vedligeholde, at der præcis er de to billeder som start og slut, en bedre ide ville være at sortere dem i en undermappe eller lignende, men når du nu har dem, kan koden f.eks. se således ud:

backImage[22] = '1170/1170-101c22.jpg';


  var actNum = 1;
  function changeBGImage(link, dir){
    if(link)
      actNum = +link.id.replace(/^.*?(\d+)$/,"$1");
    else if(dir){
      actNum += dir;
      if(actNum > backImage.length - 2)
        actNum = 1;
      else if(actNum == 0)
        actNum = backImage.length - 2;
      link = document.getElementById('link' + actNum);
    }
    document.getElementById('billede').style.backgroundImage = "url(" + backImage[actNum] + ")";
    //alert(backImage[+link.firstChild.nodeValue] +"\n"+ link.firstChild.nodeValue)
    var l = document.getElementsByTagName("a");
    for(i=0;l.length>i;i++){
      if(l[i].className.indexOf("bLink")>-1){
        l[i].style.border = "0";
      }
    }
    link.style.border = "1px solid green";
  }
</script>

...

                                <%for a=1 to intPicNo-2%>
<td width="5"><a id="link<%=a%>" class="bLink" href="#" onclick="changeBGImage(this);return false;"><%=a%></a></td>
<%
next
%>

...

      <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td width="50%" onclick="changeBGImage(null,-1);" onMouseOver="imagename1.src='gfx/forrige_over.gif'" onMouseOut="imagename1.src='gfx/forrige.gif'"><img border=0 name="imagename1" src="gfx/forrige.gif" width="265" height="19"></td>
          <td width="50%" onclick="changeBGImage(null,1);" align="right" onMouseOver="imagename.src='gfx/naeste_over.gif'" onMouseOut="imagename.src='gfx/naeste.gif'"><img border=0 name="imagename" src="gfx/naeste.gif" width="265" height="19"></td>
        </tr>
      </table></td>
Avatar billede reino Nybegynder
11. september 2005 - 11:55 #19
hey, det vil jeg lige kigge på, du har helt ret i dette. Har lige afprøvet koden og det spiller nu, helt KANON, så blev det en god søndag alligevel :)

Tusinde tak for hjælpen :), smider du lige et svar ?
Avatar billede roenving Novice
11. september 2005 - 11:57 #20
Velbekomme '-)

-- og hvis du får ryddet op i billed-mapperne spørger du bare, hvis ikke du kan tilpasse scriptet !-)
Avatar billede reino Nybegynder
11. september 2005 - 12:01 #21
Heps, takker, skal nok råbe højt :)
Avatar billede roenving Novice
11. september 2005 - 12:02 #22
-- og jeg takker 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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
18/0720:34 Tidsbestemt Gendannelse - ny funktion i Windows Af Uvanga i Windows
18/0718:04 Ingen menubjælke i chrome Af valby i Browsere
White papers
Flere white papers »