Skiftende billede.

Det kan sagtens lade sig gøre.

<img id="billede" src="pic1.jpg" alt="" />

<script type="text/javascript">

var images = new Array(3);
images[0] = new Image();
images[0].src = "pic1.jpg";
images[1] = new Image();
images[1].src = "pic2.jpg";
images[2] = new Image();
images[2].src = "pic3.jpg";

function changeit() {
  var el = document.getElementById("billede");
  el.src = images[Math.floor(Math.random() * images.length)].src;
}
setInterval("changeit()", 5000);
</script>

Hejsa!

OK! Mange tak! Det virker fint efter hensigten...

Men hvordan kan man så lave det sådan at hvis man klikker på billedet kommer der endnu et nyt tilfældigt billede?

\Dan

Skal det bare skifte til et andet billede, hvis man klikker på det?

Jeps! Bare i et a-tag...

Som for eksempl:
<a href="#" onclick="SKIFT()">
<img id="billede" src="pic1.jpg" alt="" />
</a>

- eller sådan noget...

\Dan

Det kan du sagtens.. du skal bare skrive changeit() i din onclick, i stedet for SKIFT().

..eller.. der er faktisk ingen grund til at bruge et <A>-tag overhovedet. Du kan bare lave en onclick på billedet.

<img id="billede" src="pic1.jpg" alt="" onclick="changeit()" />

Hej igen.

Jeg har lige et spørgsmål til om dette forrygende script.
Hvordan putter man et element mere på? Sådan at der står en linie mere i array´et der hvor der nu står:
images[0] = new Image();
images[0].src = "pic1.jpg";
- Og så fremdeles...
Jeg vil nemlig gerne have det sådan at man kan linke til en bestemt side ved at klikke på billedet... Og dette er selvfølgelig forskelligt hvilken side der skal linkes til, alt efter hvilket billede vi taler om...

- Kan dette lade sig gøre?

\Dan

Det kan det godt, ja. Du kan eventuelt lave en ny array med links i.

<img id="billede" src="pic1.jpg" alt="" onclick="jumpto()" />

<script type="text/javascript">

var currentimage = 0;

var images = new Array(3);
var ilinks = new Array(3);

images[0] = new Image();
images[0].src = "pic1.jpg";
ilinks[0] = "side1.html";

images[1] = new Image();
images[1].src = "pic2.jpg";
ilinks[1] = "side2.html";

images[2] = new Image();
images[2].src = "pic3.jpg";
ilinks[2] = "side3.php";

function jumpto() {
  window.location.href = ilinks[currentimage];
}

function changeit() {
  var el = document.getElementById("billede");
  currentimage = Math.floor(Math.random() * images.length);
  el.src = images[currentimage].src;
}
setInterval("changeit()", 5000);
</script>


... Jeg har ikke lige testet det, men så vidt jeg kan se, burde det virke.

Hejsa!

OK! Det virker ikke helt efter hensigten...

Som det er nu, bruger den altid den URL som står i ilinks[0], også selvom det er et andet billede vi har med at gøre...

\Dan

Hmm. Det bør den ikke gøre, og den gør det heller ikke, da jeg lige prøvede at smække den ind i et html-dokument. Må jeg se din kode?

Hejsa

Jeps du må gerne se min kode...

Det er lidt blandet med asp, da billederne bliver hentet i en mappe, efter FSO-princippet...
<img border="0" width="450" galleryimg="no" id="billede" onclick="jumpto()" src="MainPics/current/current.jpg" alt="Tilfældigt billede">
<script type="text/javascript">
var currentimage = 0;
var images = new Array(<%="" & SPcount+1 & ""%>);
var ilinks = new Array(<%="" & SPcount+1 & ""%>);
images[0] = new Image();
images[0].src = "MainPics/current/current.jpg";
ilinks[0] = "http://www.google.com";
<%
dim image
Set directory=server.createobject("scripting.filesystemobject")
Set allfiles=directory.getfolder(server.mappath("MainPics"))
For each image in allfiles.files
IMGname = "" & image.Name & ""
PICcount=PICcount+1
%>
images[<%="" & PICcount & ""%>] = new Image();
images[<%="" & PICcount & ""%>].src = "MainPics/<%="" & IMGname & ""%>";
ilinks[<%="" & PICcount & ""%>] = "http://www.eksperten.dk";
<%
Next
Set allfiles=nothing
Set directory=nothing
%>
function jumpto() {
  window.location.href = ilinks[currentimage];
}
function changeit() {
  var el = document.getElementById("billede");
  el.src = images[Math.floor(Math.random() * images.length)].src;
}
setInterval("changeit()", <%="" & PicShift & ""%>);
</script>

- Koden der bliver genereret ser derfor sådan her ud:
<img border="0" width="450" galleryimg="no" id="billede" onclick="jumpto()" src="MainPics/current/current.jpg" alt="Tilfældigt billede">
<script type="text/javascript">
var currentimage = 0;
var images = new Array(6);
var ilinks = new Array(6);
images[0] = new Image();
images[0].src = "MainPics/current/current.jpg";
ilinks[0] = "#";

images[1] = new Image();
images[1].src = "MainPics/1.jpg";
ilinks[1] = "#";

images[2] = new Image();
images[2].src = "MainPics/10.jpg";
ilinks[2] = "#";

images[3] = new Image();
images[3].src = "MainPics/11.jpg";
ilinks[3] = "#";

images[4] = new Image();
images[4].src = "MainPics/12.jpg";
ilinks[4] = "#";

images[5] = new Image();
images[5].src = "MainPics/13.jpg";
ilinks[5] = "#";

function jumpto() {
  window.location.href = ilinks[currentimage];
}
function changeit() {
  var el = document.getElementById("billede");
  el.src = images[Math.floor(Math.random() * images.length)].src;
}
setInterval("changeit()", 5000);
</script>

Hvor firkanten "#" selvfølgelig skal erstattes af en URL...

Du har glemt at opdatere funktionen changeit()
Den skal se således ud, ifølge det andet eksempel:

function changeit() {
  var el = document.getElementById("billede");
  currentimage = Math.floor(Math.random() * images.length);
  el.src = images[currentimage].src;
}


... ellers vil du netop få den effekt, at currentimage variablen aldrig skifter, og den samme url bliver brugt hver gang.

OK! Jeg siger mange tak for hjælpen...

- Og tak for tolerancen og tålmodigheden for én som er ny i Java-scripts!

\Dan