Søg
Avatar billede reino Nybegynder
12. august 2005 - 06:14 Der er 12 kommentarer og
1 løsning

Aktivt link ved galleri

Hejsa

Har flg, script forneden så billeder ikke bliver preloadet, har dog et problem, når det pågældende link er aktiveret ønsker jeg dette diffentieret i forhold til de andre links, er der en måde man kan få javascriptet til at finde ud af hvilket billede der er aktivt, uden at reloade siden ?

<html>
<head>
<style type="text/css">
#billede {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(logo.png);
}
</style>
<script type="text/JavaScript">
  <!--
  var backImage = new Array();
  backImage[0] = "url(11.jpg)";
  backImage[1] = "url(22.jpg)";
  backImage[2] = "url(33.jpg)";
  backImage[3] = "";

  function changeBGImage(whichImage){
    document.getElementById('billede').style.backgroundImage = backImage[whichImage];
  }
  //-->
</script>
</head>
<body>
<table>
  <tr>
    <td height="300" width="500" id="billede"></td>
  </tr>
  <tr>
    <td>
      <a href="java script:changeBGImage('1')">Skift</a>
      <a href="java script:changeBGImage('2')">Skift</a>
    <td>
  </tr>
</table>
</body>
</html>
Avatar billede nielle Nybegynder
12. august 2005 - 07:50 #1
F.ek.s sådan her?

<script type="text/JavaScript">
<!--
var currImage = -1;

var backImage = new Array();
backImage[0] = "url(11.jpg)";
backImage[1] = "url(22.jpg)";
backImage[2] = "url(33.jpg)";
backImage[3] = "";

function changeBGImage(whichImage)
{
    if (whichImage != currImage)
    {
        activeWindow = document.getElementById('billede').style.backgroundImage = backImage[whichImage];
        currImage = whichImage;
    }
}
Avatar billede roenving Novice
12. august 2005 - 12:26 #2
Mener du at dine links skal reagere anderledes, når det er en bestemt baggrund ?-)
Avatar billede reino Nybegynder
12. august 2005 - 12:34 #3
hejsa,

Jeps, i den stil, eks:

der er 2 billeder med nedenstående html. I denne skal billede 1 være stylet med en kasse rundt omkring den, såfremt det er billede 2 der er aktivt skal det være 2éren der er stylet. Såfremt dette ikke kan lade sig gøre må jeg nøjes med at linket aka tallet er en anden farve. Håber jeg har forklaret det godt nok :)


<td style="border-top: 1px solid; border-color: #ffffff; border-bottom: 1px solid; border-color: #ffffff; border-left: 1px solid; border-color: #ffffff; border-right: 1px solid; border-color: #ffffff"><a href="java script:changeBGImage('1')">1</a></td><td><a href="java script:changeBGImage('2')">2</a></td>
Avatar billede roenving Novice
12. august 2005 - 13:08 #4
Mener du at linket, som svarer til det aktive billede, skal være stylet anderledes ?-)
Avatar billede reino Nybegynder
12. august 2005 - 15:05 #5
jeps :)
Avatar billede roenving Novice
12. august 2005 - 15:28 #6
Tjah, så må vi jo finde en metode, hvor vi kan finde de links, som hører til funktionen (jeg går ud fra, at du også har andre links på siden !-)

-- så kan det f.eks. se således ud:

<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){
        if{l[i]==link){
          l[i].style.border = "1px solid red";
        }else{
          l[i].style.border = "0";
        }
      }
    }
  }
</script>

-- og:

<td style="border-top: 1px solid; border-color: #ffffff; border-bottom: 1px solid; border-color: #ffffff; border-left: 1px solid; border-color: #ffffff; border-right: 1px solid; border-color: #ffffff"><a class="bLink" href="java script:changeBGImage(this)">1</a></td><td><a class="bLink" href="java script:changeBGImage(this)">2</a></td>
Avatar billede reino Nybegynder
12. august 2005 - 15:41 #7
hejsa

får en fejl i linje 1, tegn 1, objekt var ventet, flg kode:

<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){
        if{l[i]==link){
          l[i].style.border = "1px solid red";
        }else{
          l[i].style.border = "0";
        }
      }
    }
  }
</script>
</head>
<body>
<table>
  <tr>
    <td height="300" width="500" id="billede">&nbsp;</td>
  </tr>
  <tr>

<td style="border-top: 1px solid; border-color: #ffffff; border-bottom: 1px solid; border-color: #ffffff; border-left: 1px solid; border-color: #ffffff; border-right: 1px solid; border-color: #ffffff"><a class="bLink" href="java script:changeBGImage(this)">1</a></td><td><a class="bLink" href="java script:changeBGImage(this)">2</a></td>
  </tr>
</table>
</body>
</html>
Avatar billede roenving Novice
12. august 2005 - 15:52 #8
Hrm, man kan åbenbart ikke bruge this, hvis man bruger java script: pseudo-protokollen, så sådan:

<!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 reino Nybegynder
14. august 2005 - 20:49 #9
Hejsa

I am back, det virker, super mange gange tak :), smider du lige et svar ?
Avatar billede roenving Novice
14. august 2005 - 22:41 #10
Velbekomme '-)
Avatar billede reino Nybegynder
15. august 2005 - 06:27 #11
takker :)
Avatar billede roenving Novice
15. august 2005 - 12:02 #12
-- og jeg takker for point ;~}
Avatar billede reino Nybegynder
06. september 2005 - 08:11 #13
Hejsa, har oprettet nyt spørgsmål i forbindelse med denne, hvis nogle kunne hjælpe :)
http://www.eksperten.dk/spm/645691
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
I går 20:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
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
White papers
Flere white papers »