|
|
 | Slide show???
Fra :  pspgirl | Vist : 775 gange
50 point
Dato : 23-08-07 22:26 |
| | |
 | Kommentar
Fra : disken  |
Dato : 24-08-07 02:58 |
|
Citat
søger noget i stil med det her men hvor man kan linke fra billederne til anden side .... |
HÅBER SGU HELLER DU GØR DET_________
Du ÆDER andres BÅNDBREDDE....
Med andre ORD, hotlinker du et billede, uden at betale
for det_______________får du tæsk af andre.
 
Og du får IKKE mange besøgende,
da disse kan se HVAD du har GANG I.
Citat
men kan ikk se i koden om man kan linke til anden side |
DET ER OGSÅ UNDERORDNET
| |
| Kommentar
Fra : disken |
Dato : 24-08-07 03:01 |
|
Og lad MIG STJÆLE::::
Så var du lukket ned efter 24 timer....
HELT LOVLIGT....
| |
| Kommentar
Fra : disken |
Dato : 24-08-07 04:11 |
| | |
| Kommentar
Fra : disken |
Dato : 24-08-07 04:12 |
| | |
 | Kommentar
Fra : molokyle |
Dato : 24-08-07 06:30 |
|
Læs om Javascript slideshows her: http://webdesign101.dk/slideshow/sequencer.php
Her er koden til eksempel 2:
Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="da" lang="da" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Webdesign 101 : JavaScript : : JavaScript tidslinie : : : Brugerstyring</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="/javascript/res/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/slideshow/res/slideshoweksempel.css" media="screen,projection" />
<script type="text/javascript">
/*<![CDATA[*/
/* Support DHTML funktioner */
function setBgColor(objekt, color) {
document.getElementById(objekt).style.backgroundColor = color;
}
function setFgColor(objekt,color) {
document.getElementById(objekt).style.color = color;
}
function collapse(objekt) {
document.getElementById(objekt).style.display = "none";
}
function expand(objekt) {
document.getElementById(objekt).style.display = "block";
}
function skjulObjekt(objekt) {
document.getElementById(objekt).style.visibility = "hidden";
}
function visObjekt(objekt) {
document.getElementById(objekt).style.visibility = "visible";
}
function nytIndhold(objekt,text){
var blok = document.getElementById(objekt);
blok.firstChild.nodeValue=text;
return;
}
var totalTime, currTime; // Tidsvariable
var Time, Seq; // Arrays
var speed = 100; // Timer interval
var timer; // timer ID
var running=0; // Kører scriptet?
var nr=1; // Hvilket billede?
var antal=8;
var images = new Array()
for(i = 1; i < antal + 1; i++){
images[i] = new Image();
images[i].src = "/slideshow/seq2/pix" + i + ".jpg";
}
function startSeq(SeqNumber) {
Time[SeqNumber] = 0;
SeqController(SeqNumber);
}
function stopSeq(SeqNumber){
Time[SeqNumber] = Seq[SeqNumber].length;
}
function SeqController(SeqNumber) {
if (Time[SeqNumber] <= Seq[SeqNumber].length - 1) {
Time[SeqNumber]++;
if (Seq[SeqNumber][Time[SeqNumber]] != null){
eval(Seq[SeqNumber][Time[SeqNumber]]);
}
timer=setTimeout('SeqController(' + SeqNumber + ')', speed);
}
}
function init() {
Time = new Array();
Seq = new Array();
Seq[0] = new Array();
Seq[0][20] = 'visPix(2);';
Seq[0][40] = 'visPix(3);';
Seq[0][60] = 'visPix(4);';
Seq[0][80] = 'visPix(5);';
Seq[0][100] = 'visPix(6);';
Seq[0][120] = 'visPix(7);';
Seq[0][140] = 'visPix(8);';
Seq[0][160] = 'start();';
//don't change
startSeq(0);
}
var totalTime, currTime;
var Time, Seq;
function visPix(nr) {
document.images.pix.src = images[nr].src;
setColors();
setFgColor('pixnr'+nr,'#fff');
setBgColor('pixnr'+nr,'#666');
}
function start(){
if (running==1){
stopSeq(0);
visPix(1);
skjulObjekt('speedpanel');
nytIndhold('stopknap','Start det!')
running=0;
return;
}
if (running==0){
visPix(1);
nytIndhold('stopknap','Stop det!')
visObjekt('speedpanel')
setSpeed(2)
init()
running=1;
}
}
function setSpeed(faktor) {
speed = faktor * 100;
speedpanelColor(faktor)
}
function speedpanelColor(faktor){
for (i=1;i<6;i++){
setFgColor('speed'+ i,'#000')
setBgColor('speed' + i,'#fff')
}
switch(faktor){
case 1: setFgColor('speed1','#c30')
break;
case 2: setFgColor('speed2','#c30')
break;
case 3: setFgColor('speed3','#c30')
break;
case 5: setFgColor('speed4','#c30')
break;
case 10: setFgColor('speed5','#c30')
break;
}
}
function setColors(){
for (i=1;i<antal+1;i++){
setFgColor('pixnr'+ i,'#000')
setBgColor('pixnr' + i,'#fff')
}
}
function pixNr(nr) {
if (running==1) {
alert("Stop venligst autovisning, \nfør du viser enkeltbilleder.")
}
else
visPix(nr)
}
function initpage(){
visPix(1);
skjulObjekt('speedpanel');
}
/*]]>*/
</script>
<style type="text/css" media="screen">
#pixarea {
width:310px;
height:310px;
border:1px solid teal;
margin:1em auto;}
#panel,#nrpanel,#speedpanel {
font-family:arial,sans-serif;
text-align:center;
font-size:0.9em;
margin:0.3em auto;}
#nrpanel {color:#000;}
#nrpanel a {
text-decoration:none;
margin:0;
padding:0 2px;
font-weight:bold;}
#speedpanel {
visibility:hidden;
color:#000;}
#speedpanel a {
color:#000;
text-decoration:none;}
p.opdatering {padding-top:2em;padding-bottom:5em;}
#menuspalte h3.top {margin-top:20px;}
</style>
</head>
<body class="sektion4 page3">
<div id="page">
<div id="banner">
<p><a id="toppen"></a></p>
<h1 onclick="location.href='/'">Webdesign 101<br />
<span>– en webdesign notesblok</span></h1>
<h2 class="sektionstitel" onclick="location.href='/javascript/'"><span>JavaScript</span></h2>
</div><div id="wrapper" class="clearfix">
<div id="container">
<div id="indhold">
<ul class="sti">
<li><a href="/">Forsiden</a></li>
<li><span>»</span> <a href="/slideshow/sequencer.php">JavaScript tidslinier</a></li>
</ul><h2>Eksempel 2: Brugerkontrol med slideshowet</h2>
<div class="manchet">
<p>Dette script er nærmere beskrevet i artiklen
<a href="/slideshow/sequencer.php#eks02">JavaScript tidslinier</a>.
Kopier scriptet ved at bruge browser-funktionen Vis kilde.</p>
</div>
<div id="pixarea">
<img src="seq2/pix1.jpg" id="pix" width="310" height="310" alt="" /></div>
<div id="panel">
<a id="stopknap" href="#" onclick="start();return false;">Start det!</a>
</div>
<div id="speedpanel">
Hastighed:
<a id="speed1" href="#" onclick="setSpeed(1);return false;">1 sek</a>
<a id="speed2" href="#" onclick="setSpeed(2);return false;">2 sek</a>
<a id="speed3" href="#" onclick="setSpeed(3);return false;">3 sek</a>
<a id="speed4" href="#" onclick="setSpeed(5);return false;">5 sek</a>
<a id="speed5" href="javascript:setSpeed(10);return false;">10 sek</a>
</div>
<div id="nrpanel">
Viser/vis billede nr:
<a id="pixnr1" href="#" onclick="pixNr(1);return false;">1</a>
<a id="pixnr2" href="#" onclick="pixNr(2);return false;">2</a>
<a id="pixnr3" href="#" onclick="pixNr(3);return false;">3</a>
<a id="pixnr4" href="#" onclick="pixNr(4);return false;">4</a>
<a id="pixnr5" href="#" onclick="pixNr(5);return false;">5</a>
<a id="pixnr6" href="#" onclick="pixNr(6);return false;">6</a>
<a id="pixnr7" href="#" onclick="pixNr(7);return false;">7</a>
<a id="pixnr8" href="#" onclick="pixNr(8);return false;">8</a>
</div>
<p class="opdatering">
Denne side er senest opdateret: 25. June, 2006 </p>
</div>
</div>
<div id="menuspalte">
<ul class="cssmenu">
<li><a id="link1" href="/slideshow/squencer.php"
title="Oversigt over eksemplerne">Tidslinie-script, oversigt</a></li>
<li><a id="link2" href="/slideshow/sequencer_1.php"
title="Brugerkontrol">Eksempel 1: Start og stop</a></li>
<li><a id="link3" href="/slideshow/sequencer_2.php"
title="Sideløbende tidslinier">Eksempel 2: Udvidet brugerkontrol</a></li>
<li><a id="link4" href="/slideshow/sequencer_3.php"
title="Du kan vise flere billeder på samme tid">Eksempel 3: Vis flere billeder</a></li>
<li><a id="link5" href="/slideshow/sequencer_4.php"
title="Parallelle tidslinier">Eksempel 4: Parallelle tidslinier</a></li>
<li><a id="link6" href="/javascript/slideshow/sequencer/pro6/index.html"
title="Et slideshow fra "det virkelige liv"">Eksempel 5: Real Life eksempel</a></li>
</ul><h3 class="top">En fiksere udformning</h3>
<p>– af kontrollerne kan du finde på websiden
<a href="eksempel_4.php">Udvidet interaktivitet</a>
om JavaScript slideshows.</p>
</div>
</div>
<div id="footer">
<script src="/javascript/res/footer.js" type="text/javascript"></script>
</div>
</div>
</body>
</html> |
Som du kan se vises billederne i afsnittet:
Kode
<div id="pixarea">
<img src="seq2/pix1.jpg" id="pix" width="310" height="310" alt="" /></div> |
Det er derfor her du skal skrive koden til det korrensponderende link. Dette kan gøre på flere måder:
1.) Ved i Javascriptet at indskrive linkene (anchormarkørene <a..> ..</a>) sammen med billedet med brug af DOM's document.write("..");
2.) Benytte funktionen innerHTML på DIV elementet vha. et ID.
Altså:
Kode
<span id="mylink"></span><div id="pixarea"><img src="seq2/pix1.jpg" id="pix" width="310" height="310" alt="" /></div></a> |
..hvor man i Javascriptet dynamisk indsætter linket med noget alá:
Kode
document.getElementById('mylink').innerHTML = "<a href='http://www.MIT_LINK.dk/' title='linktekst til pix1'>"; |
Jeg har dog ikke tid til at kode et færdigt galleri med links for dig, men nu har du fået indblik hvorledes det gøres og kan arbejde videre derfra.
Ellers må du finde et færdigt galleri med linkfunktion til download 'derude'. Jeg ved de findes 
 </MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 24-08-07 06:38 |
|
Her er et lille eksempel på brug af funktionen innerHTML:
Kode
<html>
<head>
<title>innerHTML test</title>
</head>
<body bgcolor="#FFCC30">
<p><h1>Overskrift</h1></p>
<span id="tekst" style="position:absolute;top:50%"></span>
<p>fyld</p>
<p>mere fyld</p>
<input type="text" onKeyUp="document.getElementById('tekst').innerHTML = this.value;">
</body>
</html> |
Her indsættes bogstaverne (this.value) fra INPUT med innerHTML i det SPAN element som har id="tekst".
Bare for at give dig en idé om hvorledes innerHTML kan bruges til dynamisk indsættelse af indhold i en HTML markør.
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 24-08-07 07:18 |
| | |
| Kommentar
Fra : pspgirl |
Dato : 24-08-07 13:19 |
|
1000 tak Molokyle du er en skat... 
jeg vil se om jeg kan hitte ud af det..... har kigget efter et færdigt script men har ikk fundet nogen...
nu vil jeg rode lidt med det du har sendt.....
til Disken..tror ski du misforstod mit spørgsmål...kunne aldrig drømme om at hotlinke til andres billeder..... ville linke fra mit eget billede til en af mine andre sider.
Som du ser har Molokyle hjulpet mig godt på vej ......
knus Pspgirl
| |
| Accepteret svar
Fra : molokyle | 
Modtaget 50 point
Dato : 25-08-07 08:23 |
|
Hai disken: Ja, jeg tror minsandten du fik spørgsmålet galt i halsen. Det pspgirl mente var:
Når et billede vises i slideshow'et, skal dette billede fungere som link til en anden side
..præcis som skiftende bannerreklamer hvor der kan klikkes på banneret, således man kommer til den hjemmeside hvor produktet sælges.
</MOLOKYLE>
| |
| Godkendelse af svar
Fra : pspgirl |
Dato : 25-08-07 14:05 |
|
Tak for svaret molokyle.
det var lige det jeg ledte efter
du er bare en skat
knus Pspgirl
| |
 | Du har følgende muligheder | |
|
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.
Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
| |
|
|