/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
problemer med et fotoalbum
Fra : Torben Svendsen


Dato : 02-01-04 14:02

Godt nytår til alle

Jeg har problemer med et fotoalbum. Det kan ses på
http://www.sydjyskvinselskab.dk/vinside/test.php. Det virker godt nok i
explorer, men fungerer ikke med mozilla 1.5 og i firebird 0.7. Problemet er
at med disse browsere, skal der klikkes to gange på et lille billede før det
tilsvarende store billede vises korrekt.

Den centrale html-kode ser sådan ud:

h3>Vildtaften</h3>

<a onclick="vis(0)" href="#"><img alt="" src="./grafik/slukefter/zcarl.jpg"
id="b1"></a>
<a onclick="vis(1)" href="#"><img alt=""
src="./grafik/slukefter/zformand.jpg" id="b2"></a>
<a onclick="vis(2)" href="#"><img alt=""
src="./grafik/slukefter/zsuppe.jpg" id="b3"></a>
<a onclick="vis(3)" href="#"><img alt=""
src="./grafik/slukefter/zsalat.jpg" id="b4"></a>

<img alt="" src="./grafik/slukefter/carl.jpg" id="b5">

<a onclick="rul('op')" href="#"><img src="./grafik/op.gif" id="op"
alt=""></a>
<a onclick="rul('ned')" href="#"><img src="./grafik/ned.gif" id="ned"
alt=""></a>

id=*** placeringen via et stylesheet.

Mit javascript er lavet på følgende måde:

antal = 8
nr = 0
function rul (type){
var billede1 = new Array(
"./grafik/slukefter/zcarl.jpg",
"./grafik/slukefter/zformand.jpg",
"./grafik/slukefter/zsuppe.jpg",
"./grafik/slukefter/zsalat.jpg",
"./grafik/slukefter/zhoved.jpg",
"./grafik/slukefter/zost.jpg",
"./grafik/slukefter/zdessert.jpg",
"./grafik/slukefter/zvinder.jpg"
)
if (type=='ned') {
nr=nr-1
if (nr<0) {
nr=nr+antal
}
}
if (type=='op') {
nr=nr+1
if (nr>antal) {
nr=nr-antal
}
}
document.images[2].src=billede1[nr%antal]
document.images[3].src=billede1[(nr+1)%antal]
document.images[4].src=billede1[(nr+2)%antal]
document.images[5].src=billede1[(nr+3)%antal]
}

function vis(billednr) {
var billede = new Array(
"./grafik/slukefter/carl.jpg",
"./grafik/slukefter/formand.jpg",
"./grafik/slukefter/suppe.jpg",
"./grafik/slukefter/salat.jpg",
"./grafik/slukefter/hoved.jpg",
"./grafik/slukefter/ost.jpg",
"./grafik/slukefter/dessert.jpg",
"./grafik/slukefter/vinder.jpg"
)
document.images[6].src=billede[(nr+billednr)%antal]
document.images[6].src=billede[(nr+billednr)%antal]
}

Bemærk at overskrift og logo også er billeder, og det første billede er
nummer 0, så det store billede bliver nr 6.

Hvad er galt?

På forhånd tak!

Torben Svendsen

http://www.sydjyskvinselskab.dk

PS: jeg ved godt at koden i index.php er kikset - jeg arbejder på sagen.



 
 
Lasse Reichstein Nie~ (02-01-2004)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 02-01-04 15:28

"Torben Svendsen" <torbensvendsen@mail.dk> writes:

> Jeg har problemer med et fotoalbum. Det kan ses på
> http://www.sydjyskvinselskab.dk/vinside/test.php. Det virker godt nok i
> explorer, men fungerer ikke med mozilla 1.5 og i firebird 0.7. Problemet er
> at med disse browsere, skal der klikkes to gange på et lille billede før det
> tilsvarende store billede vises korrekt.

Faktisk ikke, det ser bare sådan ud. Hvis du klikker på et lille
billede, og venter på at det store er loadet, så kan du minimere
browseren og maksimere den igen, og så er billedet det rigtige. Det er
bare skærmen der ikke bliver opdateret rigtigt, men det er det rigtige
billede der er sat til at blive vist.

Det sker kun første gang et billede bliver klikket på, altså når det
store billede loades. Næste gang man klikker på det samme billede virker
det fint, derfor ser det ud som om man skal trykke to gange.

> Den centrale html-kode ser sådan ud:
>
> h3>Vildtaften</h3>
>
> <a onclick="vis(0)" href="#"><img alt="" src="./grafik/slukefter/zcarl.jpg"
> id="b1"></a>

*Husk* at returnere false fra din onclick handler. Ellers kan nogel browsere,
fx Opera, vælge at genloade siden ud fra href="#". Altså:
<a onclick="vis(0);return false;" href=""> ... </a>
(href="" er tilstrækkeligt). Endnu bedre er:
<a onclick="vis(0);return false;" href="carl.jpg"> ... </a>
for så kan folk uden Javascript også få lov til at se billedet.
>
> <img alt="" src="./grafik/slukefter/carl.jpg" id="b5">
>
> <a onclick="rul('op')" href="#"><img src="./grafik/op.gif" id="op"
> alt=""></a>
> <a onclick="rul('ned')" href="#"><img src="./grafik/ned.gif" id="ned"
> alt=""></a>
>
> id=*** placeringen via et stylesheet.
>
> Mit javascript er lavet på følgende måde:

Lad være med at skrive language="JavaScript1.2" med mindre du ved hvad
javascript 1.2 er og er sikker på at det er det du skal bruge.
Til oplysning var Javascript version 1.2 kun i Netscape 4.0 til 4.05,
derefter skiftede de til version 1.3 fordi 1.2 var lidt ... speciel,
og 1.3 er ECMAScript-kompatibel. Netscape-browsere kan dog stadig sættes
til at udføre dit script som version 1.2 ved at have en language attribut
som den du har her ... og det er sikkert ikke det du vil have.

> antal = 8

Sættes antal et andet sted?

> nr = 0
> function rul (type){
> var billede1 = new Array(
> "./grafik/slukefter/zcarl.jpg",
> "./grafik/slukefter/zformand.jpg",
> "./grafik/slukefter/zsuppe.jpg",
> "./grafik/slukefter/zsalat.jpg",
> "./grafik/slukefter/zhoved.jpg",
> "./grafik/slukefter/zost.jpg",
> "./grafik/slukefter/zdessert.jpg",
> "./grafik/slukefter/zvinder.jpg"
> )
> if (type=='ned') {
> nr=nr-1
> if (nr<0) {
> nr=nr+antal
> }
> }
> if (type=='op') {
> nr=nr+1
> if (nr>antal) {
> nr=nr-antal
> }
> }
> document.images[2].src=billede1[nr%antal]
> document.images[3].src=billede1[(nr+1)%antal]
> document.images[4].src=billede1[(nr+2)%antal]
> document.images[5].src=billede1[(nr+3)%antal]

Det ser for øvrigt ikke ud til at preloadingen virker.

> Bemærk at overskrift og logo også er billeder, og det første billede er
> nummer 0, så det store billede bliver nr 6.
>
> Hvad er galt?

Ikke noget med scriptet som sådan (undtagen den manglende "return false"
over det hele). Jeg tror problemet er med Mozillas opdatering af skærmen -
den sker ikke når billedet er loadet færdigt.

Jeg gætter på at det er fordi alle elementerne er placeret absolut,
så browseren har lidt for svært ved at gætte hvilket område den skal
opdatere hvornår ... den holder sig gerne inden for body-elementet,
som måske ikke er så stort igen.

Hmm, uden at have en god måde at teste det på: Prøv at tilføje denne
attribut til billedet b5:
onload="this.style.border='none'"
Jeg ved ikke om det gør en forskel, det er et forsøg på at tvinge billedet
til at blive opdateret.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Torben Svendsen (02-01-2004)
Kommentar
Fra : Torben Svendsen


Dato : 02-01-04 16:47

"Lasse Reichstein Nielsen" <lrn@hotpop.com> skrev i en meddelelse <svar
klippet væk>

Tak for dit omfattende svar, som har givet mig noget at arbejde med.

Venligst

Torben Svendsen



Torben Svendsen (03-01-2004)
Kommentar
Fra : Torben Svendsen


Dato : 03-01-04 00:22


Lasse Reichstein Nielsen" <lrn@hotpop.com> skrev i en meddelelse
news:oetma0hu.fsf@hotpop.com...

> Jeg gætter på at det er fordi alle elementerne er placeret absolut,
> så browseren har lidt for svært ved at gætte hvilket område den skal
> opdatere hvornår ... den holder sig gerne inden for body-elementet,
> som måske ikke er så stort igen.

Du har fuldstændig ret. Hvis jeg bruger en tabel til placeringen af
billederne, er der ikke noget problem.

Endnu engang tak for hjælpen.

Torben Svendsen



Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste