---

Hej

Hvordan laver man et simpel billede skifte. Således at man feks kan få foto
header3.jpg, til at skifte med header4 og 5 osv..
Også så man evt kan vælge tidsinterval.

Min kode ser pt sådan ud..

<img src="{$image_dir}custom/header3.jpg" width="387" height="119"
border="0" />

Mvh Søren

---

"Søren" <s.thomsen@mail.dk> skrev

> Hvordan laver man et simpel billede skifte. Således at man feks kan få
> foto header3.jpg, til at skifte med header4 og 5 osv..
> Også så man evt kan vælge tidsinterval.

Det lyder som noget, jeg ville klare med noget javascript og funktionen
setTimeout().

Jeg sad selv og rodede med noget lignende for et par uger siden.
Koden kan du se her:
http://hitsurf.dk/privat/jstekstskift.html

Skift teksten ud med dine billeder, så skulle den være der.

---

"Philip Nunnegaard" <nunnenospam@hitsurf.dk> skrev i en meddelelse
news:488b0954$0$15875$edfadb0f@dtext01.news.tele.dk...
> "Søren" <s.thomsen@mail.dk> skrev
>
>> Hvordan laver man et simpel billede skifte. Således at man feks kan få
>> foto header3.jpg, til at skifte med header4 og 5 osv..
>> Også så man evt kan vælge tidsinterval.
>
> Det lyder som noget, jeg ville klare med noget javascript og funktionen
> setTimeout().
>
> Jeg sad selv og rodede med noget lignende for et par uger siden.
> Koden kan du se her:
> http://hitsurf.dk/privat/jstekstskift.html
>
> Skift teksten ud med dine billeder, så skulle den være der.

Visning af forskellige tekster, har ikke så meget med skift af billede at
gøre.

Skift af billede gøres ved at ændre src atributten for <img> tag.

Din kode (HTML) ville IMHO blive pænere, hvis du i javascriptet, skifter
teksten med innerHTML.
(Der vil kun være een <div id="nyhed".. Teksterne står i javascriptet, så
det er også nemmer at skifte nyhederne ud.)
Lidt mere avanceret, kunne teksterne hentes via AJAX fra en database eller
fil.
Du ville så kunne skifte teksterne, uden at siden skal reloades, og uden at
skulle rette i koden.


Skift af billede :
<script>
var visSek = 5; // Den tid billedet skal vises i sekunder
function SkiftBillede() {
var img_elm = document.getElementById( 'billedet');
img_elm.src = 'nyt_billede.jpg';
}
</script>

HTML
<img id="billedet" src="mit_billede.jpg" onload="setTimeout( SkiftBillede,
visSek*1000);">

Kan evt udvides ved at skabe et array af billeder, som funktionen
SkiftBillede kan vælge imellem - enten med en tæller eller tilfældigt.
Vil med fordel kunne preloade billederne, så den besøgende ikke skal vente
på at de hentes fra serveren, når der skiftes.


Birger
-----
http://bbsorensen.dk
http://varmeretter.dk - hverdagsmad. Sundt, nemt, hurtigt og billigt. Daglig
opdatering.

---

Birger skrev:
> Din kode (HTML) ville IMHO blive pænere, hvis du i javascriptet, skifter
> teksten med innerHTML.

Jeg har ikke rigtigt turdet bruge innerHTML, da jeg for nogen tid siden
læste at det ikke blev understøttet af alle browsere.
Jeg gætter umiddelbart på at det har været IE (6 og ældre), der har været
problemet. Det er et par år siden jeg læste det.

> var img_elm = document.getElementById( 'billedet');
> img_elm.src = 'nyt_billede.jpg';
> (...) <img id="billedet" src="mit_billede.jpg" onload="setTimeout(
> SkiftBillede, visSek*1000);">

Jeg var så ikke klar over at man også kunne skifte billede på den måde.
Det er da klart mere elegant.

---

Philip Nunnegaard wrote:

> Birger skrev:
>> Din kode (HTML) ville IMHO blive pænere, hvis du i javascriptet, skifter
>> teksten med innerHTML.
>
> Jeg har ikke rigtigt turdet bruge innerHTML, da jeg for nogen tid siden
> læste at det ikke blev understøttet af alle browsere.
> Jeg gætter umiddelbart på at det har været IE (6 og ældre), der har været
> problemet. Det er et par år siden jeg læste det.

Det må være nogle _noget_ ældre browsere du har hørt om.
IE6 understøtter innerHTML, og jeg har lige testet på en IE5, og der virker
det også.


--
Med venlig hilsen
Stig Johansen

---

"Philip Nunnegaard" <nunnenospam@hitsurf.dk> skrev i en meddelelse
news:488b2128$0$15874$edfadb0f@dtext01.news.tele.dk...
> Birger skrev:
>> Din kode (HTML) ville IMHO blive pænere, hvis du i javascriptet, skifter
>> teksten med innerHTML.
>
> Jeg har ikke rigtigt turdet bruge innerHTML, da jeg for nogen tid siden
> læste at det ikke blev understøttet af alle browsere.
> Jeg gætter umiddelbart på at det har været IE (6 og ældre), der har været
> problemet. Det er et par år siden jeg læste det.
>
>> var img_elm = document.getElementById( 'billedet');
>> img_elm.src = 'nyt_billede.jpg';
>> (...) <img id="billedet" src="mit_billede.jpg" onload="setTimeout(
>> SkiftBillede, visSek*1000);">
>
> Jeg var så ikke klar over at man også kunne skifte billede på den måde.
> Det er da klart mere elegant.

Bruger det ofte ;>)

Jeg har også læst, at man skal passe på med innerHTML, men endnu ikke
oplevet noget der ikke virkede som forventet.
Jeg har også brugt det tidligere i IE6, uden problemer.
Alternativet er at gå over DOM - her kan teksten så vidt jeg husker, skiftet
som en attribut - men jeg har endnu ikke haft brug for det...
Problemet er nok at innerHTML ikke er del af W3C DOM specifikationer - og
altså ikke med sikkerhed virker ens i alle browsere.

http://developer.mozilla.org/en/docs/DOM:element.innerHTML

Man kan IKKE indsætte tabelelementer i en eksisterende tabel - <tr>, <td>
etc. - med innerHTML, her SKAL bruges DOM, men man kan godt skifte indholdet
af en <td>, og man kan også indsætte hele tabeller i andre elementer, men
altså ikke manipulere opbygningen af tabellen, via innerHTML.


Birger
-----
http://bbsorensen.dk
http://varmeretter.dk - hverdagsmad. Sundt, nemt, hurtigt og billigt. Daglig
opdatering.

---

Birger wrote:
8X
> Man kan IKKE indsætte tabelelementer i en eksisterende tabel - <tr>,
> <td> etc. - med innerHTML, her SKAL bruges DOM, men man kan godt
> skifte indholdet af en <td>, og man kan også indsætte hele tabeller i
> andre elementer, men altså ikke manipulere opbygningen af tabellen,
> via innerHTML.

Fandt så lige en ting mere, der ikke går så godt.
Man kan heller ikke indsætte options i en select, via dens innerHTML.
Det virker i FF - men ikke i IE7

Så for at indsætte options i en select, skal man altså også bruge DOM.

Til gengæld kan man ikke bruge DOM til at sætte den valgte option
(selectedIndex) i FF - her skal man bruge almindelig scripting.
(Både scripting og DOM virker i IE7 - men altså ikke i FF)


Briger
--
http://bbsorensen.dk
http://varmeretter.dk - hverdagsmad. Sundt, nemt, hurtigt og billigt.
Daglig opdatering.

---

>>> Hvordan laver man et simpel billede skifte. Således at man feks kan få
>>> foto header3.jpg, til at skifte med header4 og 5 osv..
>>> Også så man evt kan vælge tidsinterval.
>>
>> Det lyder som noget, jeg ville klare med noget javascript og funktionen
>> setTimeout().
>>
>> Jeg sad selv og rodede med noget lignende for et par uger siden.
>> Koden kan du se her:
>> http://hitsurf.dk/privat/jstekstskift.html
>>
>> Skift teksten ud med dine billeder, så skulle den være der.
>
> Visning af forskellige tekster, har ikke så meget med skift af billede at
> gøre.
>
> Skift af billede gøres ved at ændre src atributten for <img> tag.
>
> Din kode (HTML) ville IMHO blive pænere, hvis du i javascriptet, skifter
> teksten med innerHTML.
> (Der vil kun være een <div id="nyhed".. Teksterne står i javascriptet, så
> det er også nemmer at skifte nyhederne ud.)
> Lidt mere avanceret, kunne teksterne hentes via AJAX fra en database eller
> fil.
> Du ville så kunne skifte teksterne, uden at siden skal reloades, og uden
> at skulle rette i koden.
>
>
> Skift af billede :
> <script>
> var visSek = 5; // Den tid billedet skal vises i sekunder
> function SkiftBillede() {
> var img_elm = document.getElementById( 'billedet');
> img_elm.src = 'nyt_billede.jpg';
> }
> </script>
>
> HTML
> <img id="billedet" src="mit_billede.jpg" onload="setTimeout( SkiftBillede,
> visSek*1000);">
>
> Kan evt udvides ved at skabe et array af billeder, som funktionen
> SkiftBillede kan vælge imellem - enten med en tæller eller tilfældigt.
> Vil med fordel kunne preloade billederne, så den besøgende ikke skal vente
> på at de hentes fra serveren, når der skiftes.
>
>
Hej.. Tak

Virker bare fint Men, jeg ville gerne så fotos skiftede.. Den bliver
bare stående på foto 2

Mvh Søren

---

"Søren" <s.thomsen@mail.dk> skrev i en meddelelse
news:488b4e79$0$15881$edfadb0f@dtext01.news.tele.dk...
>>>> Hvordan laver man et simpel billede skifte. Således at man feks kan få
>>>> foto header3.jpg, til at skifte med header4 og 5 osv..
>>>> Også så man evt kan vælge tidsinterval.
>>>
>>> Det lyder som noget, jeg ville klare med noget javascript og funktionen
>>> setTimeout().
>>>
>>> Jeg sad selv og rodede med noget lignende for et par uger siden.
>>> Koden kan du se her:
>>> http://hitsurf.dk/privat/jstekstskift.html
>>>
>>> Skift teksten ud med dine billeder, så skulle den være der.
>>
>> Visning af forskellige tekster, har ikke så meget med skift af billede at
>> gøre.
>>
>> Skift af billede gøres ved at ændre src atributten for <img> tag.
>>
>> Din kode (HTML) ville IMHO blive pænere, hvis du i javascriptet, skifter
>> teksten med innerHTML.
>> (Der vil kun være een <div id="nyhed".. Teksterne står i javascriptet, så
>> det er også nemmer at skifte nyhederne ud.)
>> Lidt mere avanceret, kunne teksterne hentes via AJAX fra en database
>> eller fil.
>> Du ville så kunne skifte teksterne, uden at siden skal reloades, og uden
>> at skulle rette i koden.
>>
>>
>> Skift af billede :
>> <script>
>> var visSek = 5; // Den tid billedet skal vises i sekunder
>> function SkiftBillede() {
>> var img_elm = document.getElementById( 'billedet');
>> img_elm.src = 'nyt_billede.jpg';
>> }
>> </script>
>>
>> HTML
>> <img id="billedet" src="mit_billede.jpg" onload="setTimeout(
>> SkiftBillede, visSek*1000);">
>>
>> Kan evt udvides ved at skabe et array af billeder, som funktionen
>> SkiftBillede kan vælge imellem - enten med en tæller eller tilfældigt.
>> Vil med fordel kunne preloade billederne, så den besøgende ikke skal
>> vente på at de hentes fra serveren, når der skiftes.
>>
>>
> Hej.. Tak
>
> Virker bare fint Men, jeg ville gerne så fotos skiftede.. Den bliver
> bare stående på foto 2
>
> Mvh Søren

Anden gang er billedet jo vist, så det er klart...
prøv det her i funktionen

if ( img_elm.src == 'mit_billede.jpg' ) {
img_elm.src = 'nyt_billede.jpg';
}
else {
img_elm.src = 'nyt_billede.jpg';
}

eller en kortere version der gør det samme..
img_elm.src = ( img_elm.src == 'mit_billede.jpg') ? 'nyt_billede.jpg' :
'mit_billede.jpg';

i stedet for linien
img_elm.src = 'nyt_billede.jpg';

så skulle de to billeder gerne skifte...

Birger
-----
http://bbsorensen.dk
http://varmeretter.dk - hverdagsmad. Sundt, nemt, hurtigt og billigt. Daglig
opdatering.

---

>>>>> Hvordan laver man et simpel billede skifte. Således at man feks kan få
>>>>> foto header3.jpg, til at skifte med header4 og 5 osv..
>>>>> Også så man evt kan vælge tidsinterval.
>>>>
>>>> Det lyder som noget, jeg ville klare med noget javascript og funktionen
>>>> setTimeout().
>>>>
>>>> Jeg sad selv og rodede med noget lignende for et par uger siden.
>>>> Koden kan du se her:
>>>> http://hitsurf.dk/privat/jstekstskift.html
>>>>
>>>> Skift teksten ud med dine billeder, så skulle den være der.
>>>
>>> Visning af forskellige tekster, har ikke så meget med skift af billede
>>> at gøre.
>>>
>>> Skift af billede gøres ved at ændre src atributten for <img> tag.
>>>
>>> Din kode (HTML) ville IMHO blive pænere, hvis du i javascriptet, skifter
>>> teksten med innerHTML.
>>> (Der vil kun være een <div id="nyhed".. Teksterne står i javascriptet,
>>> så det er også nemmer at skifte nyhederne ud.)
>>> Lidt mere avanceret, kunne teksterne hentes via AJAX fra en database
>>> eller fil.
>>> Du ville så kunne skifte teksterne, uden at siden skal reloades, og uden
>>> at skulle rette i koden.
>>>
>>>
>>> Skift af billede :
>>> <script>
>>> var visSek = 5; // Den tid billedet skal vises i sekunder
>>> function SkiftBillede() {
>>> var img_elm = document.getElementById( 'billedet');
>>> img_elm.src = 'nyt_billede.jpg';
>>> }
>>> </script>
>>>
>>> HTML
>>> <img id="billedet" src="mit_billede.jpg" onload="setTimeout(
>>> SkiftBillede, visSek*1000);">
>>>
>>> Kan evt udvides ved at skabe et array af billeder, som funktionen
>>> SkiftBillede kan vælge imellem - enten med en tæller eller tilfældigt.
>>> Vil med fordel kunne preloade billederne, så den besøgende ikke skal
>>> vente på at de hentes fra serveren, når der skiftes.
>>>
>>>
>> Hej.. Tak
>>
>> Virker bare fint Men, jeg ville gerne så fotos skiftede.. Den bliver
>> bare stående på foto 2
>>
>> Mvh Søren
>
> Anden gang er billedet jo vist, så det er klart...
> prøv det her i funktionen
>
> if ( img_elm.src == 'mit_billede.jpg' ) {
> img_elm.src = 'nyt_billede.jpg';
> }
> else {
> img_elm.src = 'nyt_billede.jpg';
> }
>
> eller en kortere version der gør det samme..
> img_elm.src = ( img_elm.src == 'mit_billede.jpg') ? 'nyt_billede.jpg' :
> 'mit_billede.jpg';
>
> i stedet for linien
> img_elm.src = 'nyt_billede.jpg';
>
> så skulle de to billeder gerne skifte...
>

Mange tak, for hjælpen

Søren