Avatar billede andersasp Nybegynder
24. april 2002 - 13:28 Der er 16 kommentarer og
1 løsning

Ændring af position i frame!

Hejsa alle javascript eksperter!

Jeg har et online slideshow der kan slide mellem 5 forskellige billeder!

Se slideshowet på www.mobilos.dk og klik på banneret "tilbud"!

Det problem jeg har, er at der i overeste frame er 5 billeder at klikke på, når man klikker på den ønskede knap får man en rød farve!

Mit problem er så, at jeg gerne vil have tal på!!

Dvs. de billeder menuen består af er nu:

ku.gif = sort knap
kr.gif = rød knap

Jeg vil dog gerne have at den virker med følgende knapper!

sorte knapper = ku1.gif, ku2.gif, ku3.gif, ku4.gif, ku5.gif

Røde knapper = kr1.gif, kr2.gif, kr3.gif, kr4.gif, kr5.gif

Håber nogle kan hjælpe, jeg har forsøgt i timevis -
Jeg har vedlagt koden forneden!!

<title>Topmenu</title>
<script LANGUAGE="javascript">
<!--

// opretter variabler og arrays
var who=new Array("item0","item1","item2","item3","item4");
var where=new Array(0,605,1210,1815,2420,3025);
var current=who[0];
var position=0;
var positionstart=0;
var positionend=0;
var time=10;
parent.slider.location.hash=0
var browserokay=false;


var ver = navigator.appVersion.charAt(0);
if (ver >= 4 || (navigator.appName == "Netscape" && ver >= 3))browserokay=true;

if (!browserokay){
alert('Skift browser.' )
}


if(browserokay){

    nav_block=new Image(24,12);
    nav_block.src="ku.gif"
    red_navi=new Image(24,12);
    red_navi.src="kr.gif"
    red_fr=new Image(24,12);
    red_fr.src="ku.gif"
    red_bg=new Image(24,12);
    red_bg.src="ku.gif"
}

function flip(which){
    if(which!=current && browserokay){
        x = parseInt(eval(which.charAt(4)))*825;
        y = parseInt(eval(current.charAt(4)))*825;
    if (navigator.appName == "Netscape" && ver >= 4) y = parent.slider.pageXOffset;
        if (x>y){document.images["block"+which].src=red_fr.src;}
        if (x<y){document.images["block"+which].src=red_bg.src;}
        }
}

function restore(which){
    if(which!=current && browserokay){
    document.images["block"+which].src=nav_block.src;
        }
}


function jump(which){

    if(which!=current && !browserokay){
        parent.slider.location.hash=where[seek(which)]
        //alert(parent.slider.location.hash)
    }
   
    if(which!=current && browserokay){
        startslide(where[seek(current)],where[seek(which)])
        document.images["block"+current].src=nav_block.src;
        document.images["block"+which].src=red_navi.src;
        current=which;
    }
}

function startslide(start,end){
    position=0;
    positionstart = start
    if (navigator.appName == "Netscape" && ver >= 4) positionstart = parent.slider.pageXOffset;
    positionend=end;
    slide(positionstart,positionend);
}

function slide(start,end){
    position+=(Math.max(start,end)-Math.min(start,end))/(250/time);
    if(start<end) parent.slider.scroll(right(position,start,end),0);
    else parent.slider.scroll(left(position,start,end),0);
    if(position<=Math.max(start,end)) setTimeout("slide(positionstart,positionend)",time);
}

function right(position,start,end){return -(end-start)*(Math.pow(position-end,2)/Math.pow(end,2))+end;}
function left(position,start,end){return (start-end)*(Math.pow(position-start,2)/Math.pow(start,2))+end;}
function seek(part){
    var distance=who.length;
    for(var loop=0;loop<distance;++loop) if(who[loop]==part) break;
    return loop;

// scroll funktion slut
}
//-->
</script>
<base target="_self">
</head>
<body bgcolor="#666666" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF"
topmargin="4" leftmargin="10">
<table cellspacing=0 cellpadding=0 width=100% border=0>
  <tbody>
  <tr>
    <td valign=top bgcolor=#007590 height=25 width="44%">
      <div align=left><img height=25 src="design%20slide/themplate-filer/transpx.gif"
            width=1><img height=25 src="design%20slide/themplate-filer/topbg.gif"
            width=319></div>
    </td>
    <td valign=top bgcolor=#007590 height=25 width="40%">
      <div align="right"><font face="Verdana" size="1">Klik for Navigering</font>
      </div>
    </td>
    <td valign=top bgcolor=#007590 height=25 width="16%">
      <table width="100" border="0" cellspacing="0"
        cellpadding="0">
        <tr>
          <td width="24"><a href="java script:jump('item0')" onMouseOver="flip('item0')"
            onMouseOut="restore('item0')"><img name="blockitem0" src="images/kr.gif" align="top" border="0"
            width="20" height="20"></a></td>
          <td width="24"><a href="java script:jump('item1')" onMouseOver="flip('item1')"
            onMouseOut="restore('item1')"><img name="blockitem1" src="images/ku.gif" align="top" border="0"
            width="20" height="20"></a></td>
          <td width="24"><a href="java script:jump('item2')" onMouseOver="flip('item2')"
            onMouseOut="restore('item2')"><img name="blockitem2" src="images/ku.gif" align="top" border="0"
            width="20" height="20"></a></td>
          <td width="24"><a href="java script:jump('item3')" onMouseOver="flip('item3')"
            onMouseOut="restore('item3')"><img name="blockitem3" src="images/ku.gif" align="top" border="0"
            width="20" height="20"></a></td>
          <td width="24"><a href="java script:jump('item4')" onMouseOver="flip('item4')"
            onMouseOut="restore('item4')"><img name="blockitem4" src="images/ku.gif" align="top" border="0"
            width="20" height="20"></a></td>
        </tr>
      </table>
      <div align="right"></div>
    </td>
  </tr>
  <tr>
    <td valign=top bgcolor=#ffffff height=1 colspan="3"><img height=1
            src="design%20slide/themplate-filer/transpx.gif" width=1></td>
  </tr>
  <tr bgcolor="#d2d6c4">
    <td colspan="3"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#666666"><%=(slideshow.Fields.Item("STitle").Value)%></font></td>
  </tr>
  </tbody>
</table>
<p>&nbsp;</p>
</body>
</html>
Avatar billede Slettet bruger
24. april 2002 - 19:13 #1
Sættes øverst i dine script-tags:

on_bill = new Array();
off_bill = new Array();
for (i = 0; i < 5; i++) {
n = i + 1;
on_bill[i] = new Image();
on_bill[i].src = "kr" + n + ".gif";
off_bill[i] = new Image();
off_bill[i].src = "ku" + n + ".gif";
}
function skift(cur) {
nr = parseInt(cur);
for (i = 0; i < 5; i++) {
if (i == nr) document.images["block" + cur].src = on_bill[nr].src;
else document.images["blockitem" + i].src = off_bill[nr].src;
}
}

Så skal disse to linjer i jump()-funktionen:

document.images["block"+current].src=nav_block.src;
document.images["block"+which].src=red_navi.src;

... erstattes med:

c = which;
skift(which);

Så håber jeg det virker!
Avatar billede Slettet bruger
24. april 2002 - 19:14 #2
Ups, du skal erstatte linjerne med:

c = which;
skift(c);
Avatar billede =maddog= Nybegynder
24. april 2002 - 19:16 #3
// opretter variabler og arrays
var who=new Array("item0","item1","item2","item3","item4");
var where=new Array(0,605,1210,1815,2420,3025);
var red_nav_pics = new Array(); //
var grey_nav_pics = new Array(); //
var current=who[0];
var position=0;
var positionstart=0;
var positionend=0;
var time=10;
parent.slider.location.hash=0
var browserokay=false;


if(browserokay){
for (i = 0; i != 5; i++) { //
    red_nav_pics[i] = new Image(24,12);
    red_nav_pics[i].src = "kr"+(i+1)+".gif"
    grey_nav_pics[i] = new Image(24,12);
    grey_nav_pics[i].src = "ku"+(i+1)+".gif"
}
/*
    nav_block=new Image(24,12);
    nav_block.src="ku.gif"
    red_navi=new Image(24,12);
    red_navi.src="kr.gif"
    red_fr=new Image(24,12);
    red_fr.src="ku.gif"
    red_bg=new Image(24,12);
    red_bg.src="ku.gif"
    */
}


function jump(which){

    if(which!=current && !browserokay){
        parent.slider.location.hash=where[seek(which)]
        //alert(parent.slider.location.hash)
    }
   
    if(which!=current && browserokay){
        w = parseInt(eval(which.charAt(4))); //
        c = parseInt(eval(which.charAt(4))); //
        startslide(where[seek(current)],where[seek(which)])
        document.images["block"+current] = grey_nav_pics[c] //.src=nav_block.src;
        document.images["block"+which]  = red_nav_pics[w]  //.src=red_navi.src;
        current=which;
    }
}


Har forsøgt at sætte remarks hvor jeg har ændret
Avatar billede =maddog= Nybegynder
24. april 2002 - 19:17 #4
damn you phoenix. men du har glemt at which ikke er en int.
Avatar billede Slettet bruger
24. april 2002 - 19:23 #5
Jamen, jeg bruger jo parseInt på den i min funktion!
Avatar billede =maddog= Nybegynder
24. april 2002 - 19:25 #6
hjælper vist ikke. parseint tager kun cifre i en string hvis de står først, så charAt(4) eller split('item')[0] er vist måden. tror jeg.
Avatar billede =maddog= Nybegynder
24. april 2002 - 19:34 #7
split('item')[1] selvfølgelig. prøv evt.
<html><head><script LANGUAGE="javascript">
var str = "item1";
</script></head><body>
<a href=# onclick="alert(str);">str</a> <br>
<a href=# onclick="alert(parseInt(str));">parseInt(str)</a> <br>
<a href=# onclick="alert(str.split('item')[1]);">str.split('item')[1]</a> <br>
<a href=# onclick="alert(parseInt(str.split('item')[1])+2);">parseInt(str.split('item')[1])+2</a> <br>
</body></html>
Avatar billede Slettet bruger
25. april 2002 - 09:29 #8
Det har du faktisk ret i! Det anede jeg ikke engang!

Ja, så skal linjen:

nr = parseInt(cur);

... jo skiftes ud med:

nr = cur.split("item")[1];

P.S. Husk lige at skrive "return false" i slutningen af dine onclick's, ellers går siden jo til toppen (#).
Avatar billede =maddog= Nybegynder
25. april 2002 - 09:43 #9
ok. det gik lidt schnell.
Avatar billede andersasp Nybegynder
25. april 2002 - 14:51 #10
Hej eksperter!

Undskyld jeg først vender tilbage nu!  jeg har med glæde læst jeres besvarelser - men jeg får dig stadig en dum fejl. som er en popup fejl der siger der er fejl i linie nr. 65 hvor den siger 'red_fr'
Avatar billede =maddog= Nybegynder
25. april 2002 - 15:15 #11
Undskyld, måske er det fordi jeg ikke fatter en bjælde af det, men hvad er der galt med:
<html><head>
<title>Topmenu</title>
<script LANGUAGE="javascript">
<!--

// opretter variabler og arrays
var who=new Array("item0","item1","item2","item3","item4");
var where=new Array(0,605,1210,1815,2420,3025);
var red_nav_pics = new Array(); //
var grey_nav_pics = new Array(); //
var current=who[0];
var position=0;
var positionstart=0;
var positionend=0;
var time=10;
parent.slider.location.hash=0
var browserokay=false;


var ver = navigator.appVersion.charAt(0);
if (ver >= 4 || (navigator.appName == "Netscape" && ver >= 3))browserokay=true;

if (!browserokay){
alert('Beklager, men din browser er ikke understøttet. Du bliver nød til at købe din mobiltelefon et andet sted.' )
}

if(browserokay){
    for (i = 0; i != 5; i++) { //
        red_nav_pics[i] = new Image(24,12);
        red_nav_pics[i].src = "kr"+(i+1)+".gif"
        grey_nav_pics[i] = new Image(24,12);
        grey_nav_pics[i].src = "ku"+(i+1)+".gif"
    }
}

function jump(which){

    if(which!=current && !browserokay){
        parent.slider.location.hash=where[seek(which)]
    }
   
    if(which!=current && browserokay){
        startslide(where[seek(current)],where[seek(which)])
        document.images["block"+current].src=red_nav_pics[parseInt(current.split("item")[1])-1];
        document.images["block"+which].src=red_nav_pics[parseInt(which.split("item")[1])-1];
        current=which;
    }
}

function startslide(start,end){
    position=0;
    positionstart = start
    if (navigator.appName == "Netscape" && ver >= 4) positionstart = parent.slider.pageXOffset;
    positionend=end;
    slide(positionstart,positionend);
}

function slide(start,end){
    position+=(Math.max(start,end)-Math.min(start,end))/(250/time);
    if(start<end) parent.slider.scroll(right(position,start,end),0);
    else parent.slider.scroll(left(position,start,end),0);
    if(position<=Math.max(start,end)) setTimeout("slide(positionstart,positionend)",time);
}

function right(position,start,end){return -(end-start)*(Math.pow(position-end,2)/Math.pow(end,2))+end;}
function left(position,start,end){return (start-end)*(Math.pow(position-start,2)/Math.pow(start,2))+end;}
function seek(part){
    var distance=who.length;
    for(var loop=0;loop<distance;++loop) if(who[loop]==part) break;
    return loop;
}
//-->
</script>
<base target="_self">
</head>
<body bgcolor="#666666" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF"
topmargin="4" leftmargin="10">
<table cellspacing=0 cellpadding=0 width=100% border=0>
  <tbody>
  <tr>
    <td valign=top bgcolor=#007590 height=25 width="44%">
      <div align=left><img height=25 src="design%20slide/themplate-filer/transpx.gif"
            width=1><img height=25 src="design%20slide/themplate-filer/topbg.gif"
            width=319></div>
    </td>
    <td valign=top bgcolor=#007590 height=25 width="40%">
      <div align="right"><font face="Verdana" size="1">Klik for Navigering</font>
      </div>
    </td>
    <td valign=top bgcolor=#007590 height=25 width="16%">
      <table width="100" border="0" cellspacing="0"
        cellpadding="0">
        <tr>
          <td width="24"><a href="nummer 1" onclick="jump('item0');return false;"><img name="blockitem0" src="images/kr1.gif" align="top" border="0"
            width="20" height="20"></a></td>
          <td width="24"><a href="nummer 2" onclick="jump('item1');return false;"><img name="blockitem1" src="images/kr2.gif" align="top" border="0"
            width="20" height="20"></a></td>
          <td width="24"><a href="nummer 3" onclick="jump('item2');return false;"><img name="blockitem2" src="images/kr3.gif" align="top" border="0"
            width="20" height="20"></a></td>
          <td width="24"><a href="nummer 4" onclick="jump('item3');return false;"><img name="blockitem3" src="images/kr4.gif" align="top" border="0"
            width="20" height="20"></a></td>
          <td width="24"><a href="nummer 5" onclick="jump('item4');return false;"><img name="blockitem4" src="images/kr5.gif" align="top" border="0"
            width="20" height="20"></a></td>
        </tr>
      </table>
      <div align="right"></div>
    </td>
  </tr>
  <tr>
    <td valign=top bgcolor=#ffffff height=1 colspan="3"><img height=1
            src="design%20slide/themplate-filer/transpx.gif" width=1></td>
  </tr>
  <tr bgcolor="#d2d6c4">
    <td colspan="3"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#666666"><%=(slideshow.Fields.Item("STitle").Value)%></font></td>
  </tr>
  </tbody>
</table>
<p>&nbsp;</p>
</body>
</html>
Avatar billede =maddog= Nybegynder
25. april 2002 - 15:18 #12
document.images["block"+current].src=red_nav_pics[parseInt(current.split("item")[1])-1];
        document.images["block"+which].src=red_nav_pics[parseInt(which.split("item")[1])-1];

skal være

document.images["block"+current].src=red_nav_pics[parseInt(current.split("item")[1])-1].src;
        document.images["block"+which].src=red_nav_pics[parseInt(which.split("item")[1])-1].src;

beklager min hast.
Avatar billede Slettet bruger
25. april 2002 - 17:50 #13
maddog, jeg overlader det til dig. Din metode er nemmere og hurtigere.
Avatar billede Slettet bruger
02. maj 2002 - 15:33 #14
Vil du have pointsene, maddog? Det var jo dig, der løste problemet!
Avatar billede =maddog= Nybegynder
02. maj 2002 - 15:36 #15
skal vi dele i porten 50-50. eller er det for stramt?
Avatar billede Slettet bruger
02. maj 2002 - 15:47 #16
Nu opretter jeg et til 100. Så må du selv finde ud af, hvor meget du vil have!
Uno momento...
Avatar billede Slettet bruger
02. maj 2002 - 15:49 #17
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