danny1Medlem sedan sep. 20097 inlägg Hej, jag håller på att utveckla en hemsida där jag önskar ha en bildbläddring med knappar "nästa" och "föregående". Jag har löst detta med Javascript och det fungerar på PC. Lösningen fungerar däremot inte på Mac.
Är tacksam om någon av er kan kika på koden nedan och tipsa mig om hur man kan skriva den så att den funkar på Mac också.
Hälsningar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<link REL="stylesheet" href="docs/css/rules_ie.css" TYPE="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
var myImg= new Array(8)
myImg[0]= "poesi_sid1";
myImg[1]= "poesi_sid2";
myImg[2]= "poesi_sid3";
myImg[3]= "poesi_sid4";
myImg[4]= "poesi_sid5";
myImg[5]= "poesi_sid6";
myImg[6]= "poesi_sid7";
myImg[7]= "poesi_sid8";
myImgSrc = "docs/images/";
myImgEnd = ".jpg"
var i = 0;
function loadImg(){
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
function next(){
if(i>6){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
window.onload=loadImg;
</script>
</head>
<body bgColor="#FFFFFF" leftMargin="0" topMargin="0" marginheight="0" marginwidth="0">
<table width="100%" border="0" cellspacing=20 cellpadding=1">
<tr>
<td width=705 height="436">
<div style="width:400px; height:300px; margin: auto;">
<img name="Picture" id="imgSrc">
</div>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000; width:710; margin: auto;">
<tr>
<td width="92" height="27"></td>
<td class="textmeny3" width="705" height="27" align=center >
<input type="button" value="föregående" onClick="prev();">
<input type="button" value="nästa" onClick="next();">
</td>
</tr>
</table>
</body>
</html>
Peter SMedlem sedan dec. 20025 483 inlägg Välkommen till wF!
(Använd gärna kodtaggen när du postar kod så blir den mer lättläst.)
Ett problem i koden är att du försöker använda lokala variabler utanför sina scope. Ta t.ex. följande kod:
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
Här är l lokal för if-satsen och således inte synlig på document-raden. I stället bör det se ut så här:
function prev(){
var l;
if(i<1){
l = i
} else {
l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
@ndersMedlem sedan juni 200032 969 inlägg Jag redigerade in lite kod-taggar för läsbarhetens skull.
mvh,
danny1Medlem sedan sep. 20097 inlägg Tack Bosse för hjälpen. Har testat din lösning men den fortfarande funkar endast på PC. Någon har tipsat mig om att använda:
document.getElementById("imgSrc")......
Vet du hur man skulle tillämpa det i mitt fall eller har du andra idéer? Tack.
mvh/Danny
Mr. N.Medlem sedan sep. 20025 507 inlägg När du skriver att det inte funkar på Mac, menar du att det inte funkar i Safari (och i såna fall, funkar det i Safari på PC?) eller funkar det inte i någon webbläsare (Firefox, Opera, Chrome) på Mac?
document.imgSrc.src....
Känns som det är något specifikt IE, så det är inte ett "mac" problem, utan problemet ligger i att du kör bara i Internet Explorer.
är det
<img name="Picture" id="imgSrc">
som du vill ersätta så är det som du själv säger det, bara att köra en getElementById, rensade lite i din kod med:
<script language="JavaScript" type="text/JavaScript">
var myImg= ["poesi_sid1", "poesi_sid2", "poesi_sid3", "poesi_sid4", "poesi_sid5", "poesi_sid6", "poesi_sid7", "poesi_sid8"];
var myImgId = "imgSrc";
var myImgSrc = "docs/images/";
var myImgEnd = ".jpg";
var i = 0;
function loadImg(){
document.getElementById(myImgId).src = myImgSrc + myImg[i] + myImgEnd;
}
function prev(){
if(i<1)
var l = i;
else
var l = i-=1;
document.getElementById(myImgId).src = myImgSrc + myImg[l] + myImgEnd;
}
function next(){
if(i>6)
var l = i;
else
var l = i+=1;
document.getElementById(myImgId).src = myImgSrc + myImg[l] + myImgEnd;
}
window.onload=loadImg;
</script>
Peter SMedlem sedan dec. 20025 483 inlägg "Bosse" aside...
Voigtann, glöm inte att "var l" är lokal för if-satsen och därmed inte "synlig" på document-raderna.
Peter S, nej variabler som sätts inne i en metod är lokal inne i metoden, om du har firebug kan du testa:
if(1==1)
{
var l = 1;
}
console.log(l);
Så kommer den generera 1 i konsolen, men visst, man skall ju inte egentligen skapa upp ett objekt inne i en if fråga och sen använda den utanför.
danny1Medlem sedan sep. 20097 inlägg Jag har kört på både Safari och Firefox på Mac men det funkar ej på någon av dessa. På PC funkar det med IE.
Peter SMedlem sedan dec. 20025 483 inlägg Voigtann: Tack, det visste jag inte (y) Jag antog att JS var likt många andra språk på den delen.
danny:
Får du något felmeddelande?
danny1 skrev:
Jag har kört på både Safari och Firefox på Mac men det funkar ej på någon av dessa. På PC funkar det med IE.
Vad skall hända? Spontant så känns koden inte riktigt fungerande från start
danny1Medlem sedan sep. 20097 inlägg Hej allaihopa, tack för ert engagemang i mitt problem.
Till Peter S: NEJ, jag får inget felmedelande, det kommer inga scrollbilder oavsett om jag scrollar framåt eller tillbaka.
var myImg= ["poesi_sid1", "poesi_sid2", "poesi_sid3", "poesi_sid4", "poesi_sid5", "poesi_sid6", "poesi_sid7"];
var myImgLength = myImg.length - 1;
var myImgId = "imgSrc";
var myImgSrc = "docs/images/";
var myImgEnd = ".jpg";
var i = 0;
function loadImg(){
document.getElementById(myImgId).src = myImgSrc + myImg[i] + myImgEnd;
}
function prev(){
i = (i<1?myImgLength:i-1);
loadImg();
}
function next(){
i = (i==myImgLength?0:i+1);
loadImg();
}
window.onload=loadImg;
rensade lite mer kod, har en demo:
http://voigt.se/sandbox/imageNav/
det kommer inga scrollbilder oavsett om jag scrollar framåt eller tillbaka.
Vilka scrollar?
Grundproblmenet är att du använder document.imgSrc som bygger på att MSIE felaktigt importerar alla ids till den globala namnrymden. Detta är ett stort problem och inte något man bör utgå från.
Gör dig själv en tjänst och sluta utveckla i MSIE (och Frontpage). Det är bättre att använda riktiga grejor som Firefox, Opera eller Safari först och sedan fixa buggar för den klart sämre webbläsaren MSIE.
