Søg
Avatar billede topperware Nybegynder
06. marts 2005 - 17:41 Der er 11 kommentarer og
1 løsning

Placering af link i kode.

Jeg har tidligere fået hjælp til efterfølgende kode her på Eksperten, men mangler lige lidt hjælp til at gøre sitet helt færdigt.

følgende kode fungerer på den måde, at man ser 25 små billeder, der hver er et udsnit af et tilhørende stort billede. Når man klikker på et af de små billeder, forsvinder de resterende 24 små billeder og et stort billede - det der svarer til det lille man klikkede på - kommer til syne i et underliggende layer. Jeg ønsker at der, hver gang man ser/befinder sig i det layer der indeholder et stort billede, skal være et link tilbage til forsiden (det layer der indeholder de 25 små billeder). Jeg kan bare ikke finde ud af hvor det link skal placeres i koden, om der er i CSS / JavaScript eller HTML delen. Man kan vel nøjes med at skrive det et sted i koden sådan som koden er bygget op. Eller hva´? Ydermere vil jeg gerne i det layer der indeholder det store billede og forhåbenlig snart et tilbage link, have lidt plads til lidt text. Er det oppe i CSS koden det defineres??

På forhånd tak
Michael
Avatar billede topperware Nybegynder
06. marts 2005 - 17:42 #1
Her kommer koden:

<style type="text/css">
html,body{height:100%;border:0;margin:0;padding:0;}
#img-container{
position:relative;
width:500px;
height:500px;
padding:0px;
}
#stortbillede{
position:absolute;
top:0px;
left:0px;
width:500px;
height:500px;
z-index:-1;
}
.lilbill{
position:absolute;
top:0px;
left:0px;
float:left;
width:100px;
height:100px;
z-index:1;
border:0;
margin:0;
padding:0;
}
</style>

<script type="text/javascript">
function applyOnclick(){
var img = document.images;
for(i=0;img.length>i;i++){
if(img[i].className=='lilbill'){
img[i].onclick = function(){showBig(this);}
}
}
}
var raekkefolge,num,intId,ny = true;
function showBig(elm){
if(ny)ny = !ny;
else return;
var id=elm.name.replace(/^.*?(\d+)$/,"$1"),tmp,n;
num = 0;
raekkefolge = new Array();
for(i=0;25>i;i++)raekkefolge[i] = i+1;
for(i=0;25>i;i++){
n = Math.floor(Math.random()*raekkefolge.length);
tmp = raekkefolge[i];
raekkefolge[i] = raekkefolge[n];
raekkefolge[n] = tmp;
}

//alert("billede" + id + ".jpg");
document.images['stortbillede'].src = "billede" + id + ".jpg";
intId = setInterval('hideSmall()',80);
}

function hideSmall(){
document.getElementById('lillebillede'+raekkefolge[num++]).style.display='none';
if(num==25){clearInterval(intId);ny = true;}
}
window.onload = applyOnclick;
</script>

</head>
<body>
<!--table align="center">
<tr>
<td-->
<div id="img-container"> <img name="stortbillede" id="stortbillede" src="default.jpg">
  <img name="lillebillede1" id="lillebillede1" src="1.jpg" class="lilbill"> <img name="lillebillede2" id="lillebillede2" src="2.jpg" class="lilbill" style="left:100px;">
  <img name="lillebillede3" id="lillebillede3" src="3.jpg" class="lilbill" style="left:200px;">
  <img name="lillebillede4" id="lillebillede4" src="4.jpg" class="lilbill" style="left:300px;">
  <img name="lillebillede5" id="lillebillede5" src="5.jpg" class="lilbill" style="left:400px;">
  <img name="lillebillede6" id="lillebillede6" src="6.jpg" class="lilbill" style="top:100px;">
  <img name="lillebillede7" id="lillebillede7" src="7.jpg" class="lilbill" style="top:100px;left:100px;">
  <img name="lillebillede8" id="lillebillede8" src="8.jpg" class="lilbill" style="top:100px;left:200px;">
  <img name="lillebillede9" id="lillebillede9" src="9.jpg" class="lilbill" style="top:100px;left:300px;">
  <img name="lillebillede10" id="lillebillede10" src="10.jpg" class="lilbill" style="top:100px;left:400px;">
  <img name="lillebillede11" id="lillebillede11" src="11.jpg" class="lilbill" style="top:200px;">
  <img name="lillebillede12" id="lillebillede12" src="12.jpg" class="lilbill" style="top:200px;left:100px;">
  <img name="lillebillede13" id="lillebillede13" src="13.jpg" class="lilbill" style="top:200px;left:200px;">
  <img name="lillebillede14" id="lillebillede14" src="14.jpg" class="lilbill" style="top:200px;left:300px;">
  <img name="lillebillede15" id="lillebillede15" src="15.jpg" class="lilbill" style="top:200px;left:400px;">
  <img name="lillebillede16" id="lillebillede16" src="16.jpg" class="lilbill" style="top:300px;">
  <img name="lillebillede17" id="lillebillede17" src="17.jpg" class="lilbill" style="top:300px;left:100px;">
  <img name="lillebillede18" id="lillebillede18" src="18.jpg" class="lilbill" style="top:300px;left:200px;">
  <img name="lillebillede19" id="lillebillede19" src="19.jpg" class="lilbill" style="top:300px;left:300px;">
  <img name="lillebillede20" id="lillebillede20" src="20.jpg" class="lilbill" style="top:300px;left:400px;">
  <img name="lillebillede21" id="lillebillede21" src="21.jpg" class="lilbill" style="top:400px;">
  <img name="lillebillede22" id="lillebillede22" src="22.jpg" class="lilbill" style="top:400px;left:100px;">
  <img name="lillebillede23" id="lillebillede23" src="23.jpg" class="lilbill" style="top:400px;left:200px;">
  <img name="lillebillede24" id="lillebillede24" src="24.jpg" class="lilbill" style="top:400px;left:300px;">
  <img name="lillebillede25" id="lillebillede25" src="25.jpg" class="lilbill" style="top:400px;left:400px;">
</div>
Avatar billede roenving Novice
07. marts 2005 - 11:41 #2
F.eks.

<a href="#" onclick="for(i=1;26>i;i++){document.getElementById('lillebillede'+i).style.display='inline';}">Vis forside</a>
Avatar billede roenving Novice
07. marts 2005 - 11:50 #3
-- og hov, der manglede jo lige return false;

<a href="#" onclick="for(i=1;26>i;i++){document.getElementById('lillebillede'+i).style.display='inline';};return false;">Vis forside</a>
Avatar billede topperware Nybegynder
07. marts 2005 - 17:57 #4
Linket virker som det skal, men det skal helst kun være synligt når et stort billede vises. altså når man ser de 25 små billeder er det gemt væk. Og så forstår jeg ikke hvad: onclick="for(i=1;26>i;i++){document.getElementById('lillebillede'+i).style.display='inline';};return false;" -  gør. Hvis jeg blot skriver: <a href="test.htm">Vis forside</a>, ser det ud til at have samme synlige effekt, men der er sikkert noget jeg ikke har fået fat i.
Avatar billede roenving Novice
07. marts 2005 - 18:38 #5
-- den reverserer bare den action, du ellers laver med at gemme alle de små, så det bageste billede kommer frem, og betyder derfor, at der overhovedet ikke skal snakkes med serveren ...

-- hvilket de af dine brugere, som sidder på almindelige modems vil være _meget_ glade for !-)

-- hvis du vil skjule/vise linket, skal du i den funktion, som hedder showBig tilføje en linje, som f.eks. kan se sådan ud:

  document.getElementById('visForsideLink').style.display = 'inline';

-- og så skal linket se sådan ud:

<a href="#" id="visForsideLink" onclick="for(i=1;26>i;i++){document.getElementById('lillebillede'+i).style.display='inline';};this.style.display='none';return false;" style="display:none;">Vis forside</a>
Avatar billede topperware Nybegynder
08. marts 2005 - 20:43 #6
...så er jeg her igen og tak for svarene.
ok så virker det efter hensigten, jeg tænker blot at det kunne være cool hvis linket først vises når alle de små billeder er væk. Kunne det ordnes med en form for forsinkelse/timer? på "vis link funktionen", der så er sat til den samme tid som det skal tage de små billeder at forsvinde?
Avatar billede topperware Nybegynder
08. marts 2005 - 20:59 #7
Jeg formoder man kan bruge setTimeout jeg kan bare ikke se hvor det er jeg lige skal placere den. De steder jeg har set den anvendt har man gjort følgende:
setTimeout('...den funktion den skal virke på()...', ...og her tiden: fx. 10000...);
Avatar billede topperware Nybegynder
08. marts 2005 - 21:37 #8
og forøvrigt ...ja undskyld, men smid lige et svar så du kan få dine point
Avatar billede topperware Nybegynder
08. marts 2005 - 21:44 #9
Grunden til jeg gerne vil have forsinkelsen, er at fordi jeg synes det ser bedst ud, at det først kommer når de små billeder er væk, men der går også ged i siden hvis man trykker på linket, før alle de små billeder er væk.
Avatar billede topperware Nybegynder
10. marts 2005 - 21:29 #10
...jeg fandt ud af det, var ikke så svært alligevel, faktisk ret simpelt:

setTimeout("document.getElementById('visForsideLink').style.display = 'inline';",5000);

jeg takker endnu engang for hjælpen
Avatar billede roenving Novice
11. marts 2005 - 10:19 #11
Jamen, så velbekomme '-)
Avatar billede roenving Novice
11. marts 2005 - 23:32 #12
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
I går 10:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
White papers
Flere white papers »