Avatar billede kimmys Nybegynder
20. marts 2006 - 23:34 Der er 35 kommentarer og
1 løsning

skift tekst og billede når man trykker på en knap/billede

jeg leder efter et script der kan noget alla det der sker på jamo's hjemmeside: http://www.jamo.dk/Default.aspx?ID=3825&M=Shop&PID=10705&ProductID=17649

hvis man trykker på "Specification" i højre side, skifter teksten under billederne.. hvis man trykker på et af billederne under "Favorite Details" i højre side skifter både tekst og billede. Smart! har kigget lidt i kildekoden, og kan se at de har lavet det pokkers besværligt!

Er der nogen der kan lave det nemt, overskueligt og Godt!

det ville være dejligt hvis teksterne kunne hentes ind fra en fil, fx beskrivelse.txt, hvis man ville se beskrivelse og omproduktet.txt, hvis man ville se noget om produktet!

Håber jeg har forklaret mig så godt som muligt og at der er nogen der kan hjælpe!
Avatar billede mclemens Nybegynder
21. marts 2006 - 01:25 #1
noget ala det her?
... skal nok senere have fundet ud af at have rettet den innerHTML til noget mere moderne... skal lige først finde helt ud af hvordan det gøres ... det her bør dog virke alligevel ;) = ?

... billedernes navne er ligemeget chngit.js filerne skal dog være i formen:
"chngit"+nr+".js"

chngit('billede2.jpg',1); skifter billedet samt teksten til den i chngit1.js
chngit(0,1); skifter ikke billedet kun teksten til den i chngit1.js
chngit('billede2.jpg',0); skifter billedet men ikke teksten

-bør måske gøres med ajax... men jeg er jo newbie i js så...





.html

<html><head>

<script type="text/javascript" src="chngit.js"></script>
<script type="text/javascript">

function chngit(pict,file){
if(file!=0){
  scripts=document.getElementsByTagName("script");
  for(runit=0;runit<scripts.length;runit++)if(scripts[runit].src.match("chngit")){
  scripts[runit].src="chngit"+file+".js";document.getElementById("dintekst").innerHTML=chngittxt;
  }
}

if(pict!=0){
  document.getElementById("billedet").src=pict;
}

}

</script>

</head><body>

<a href="java script:chngit('billede1.jpg',1)">a</a>
<a href="java script:chngit('billede2.jpg',0)">a</a>
<a href="java script:chngit(0,2)">a</a>
<a href="java script:chngit('billede3.jpg',3)">a</a>

<img src="billedeknap" onclick="chngit('billede2.jpg',1);">

<div><img id="billedet" src="billede1.jpg"></div>
<div id="dintekst">start tekst</div>

</body></html>


chngit.js
chngittxt="";



chngit1.js
chngittxt="start tekst";


chngit2.js
chngittxt="tekst 2";


chngit3.js
chngittxt="tekst 3";
Avatar billede mclemens Nybegynder
21. marts 2006 - 01:33 #2
tillæg:
chngit('billede2.jpg','beskrivelse2prod'); skifter billedet samt teksten til den i chngitbeskrivelse2prod.js
Avatar billede kimmys Nybegynder
21. marts 2006 - 01:42 #3
jeg kigger lige på det!
Avatar billede kimmys Nybegynder
21. marts 2006 - 02:08 #4
Den vil ikke rigtig vise billederne, også selvom stien er rigtig
Avatar billede kimmys Nybegynder
21. marts 2006 - 02:13 #5
og i de der chngit1.js, chngit2.js og chngit3.js  har jeg jo ikke mulighed for at bruge tabeller, eller sætte billeder ind har jeg?

fx

chngittxt="<table border="1" width="100%">
    <tr>
        <td>&nbsp;</td>
        <td>ty</td>
        <td>
        <img src="v1.gif"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>rty</td>
    </tr>
</table>";
Avatar billede mclemens Nybegynder
21. marts 2006 - 07:52 #6
Den vil ikke rigtig vise billederne, også selvom stien er rigtig>
- kigger på det :P


og i de der chngit1.js, chngit2.js og chngit3.js  har jeg jo ikke mulighed for at bruge tabeller, eller sætte billeder ind har jeg?>

Joh,

chngittxt='<table border="1" width="100%">
    <tr>
        <td>&nbsp;Har lige ændret " til en \' ... nogle tegn skal til tider escapes med \ ... se evt. http://www.w3schools.com/js/js_special_characters.asp </td>
        <td>ty</td>
        <td>
        <img src="v1.gif"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>rty</td>
    </tr>
</table>';
Avatar billede mclemens Nybegynder
21. marts 2006 - 07:55 #7
Den vil ikke rigtig vise billederne, også selvom stien er rigtig>
... et eksempel på en et kald til funktionen?

mine virker fint...

<a href="java script:chngit('../122/billede2.jpg',0)">a</a>
Avatar billede mclemens Nybegynder
21. marts 2006 - 08:00 #8
.. eller
<a href="java script:chngit('http://www.ditdomæne.dk/stientilbilledet/ditbillede.jpg',0)">a</a>

hvis nu du bruger:

<a href="java script:chngit('..\122\billede2.jpg',0)">a</a>
skal \ escapes med \ så \ bliver = \\
<a href="java script:chngit('..\\122\\billede2.jpg',0)">a</a>
Avatar billede mclemens Nybegynder
21. marts 2006 - 08:08 #9
Du kan selvfølgelig også bruge stier til chngit.js filer:

<a href="java script:chngit('./billeder/billede1.jpg','/minteksttilbilen')">a</a>

vil skifte billedet til det der er placeret i nuværendedir/billeder/billede1.jpg
samt js filen der bestemmer teksten til chngit/minteksttilbilen.js

<a href="java script:chngit('./billeder/billede1.jpg','/../minteksttilbilen')">a</a>

vil skifte billedet til det der er placeret i nuværendedir/billeder/billede1.jpg
samt js filen der bestemmer teksten til chngit/../minteksttilbilen.js altså nuværendedir/minteksttilbilen.js
Avatar billede kimmys Nybegynder
21. marts 2006 - 12:36 #10
Billender virker nu
<img src="billedeknap" onclick="chngit('billede2.jpg',1);"> billedeknap havde du bare lige glemt skulle ha' .jpg i enden, og det var jeg lige for træt til at se i aftes!

Nu virker alle billederne, men

chngittxt='<table border="1" width="100%">
    <tr>
        <td>&nbsp</td>
        <td>ty</td>
        <td>
        <img src="v1.gif"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>rty</td>
    </tr>
</table>';

virker ikke, den siger "Stregkonstanten er uafsluttet"
Avatar billede mclemens Nybegynder
21. marts 2006 - 13:08 #11
min fejl :/


chngittxt='<table border="1" width="100%"><tr><td>&nbsp</td><td>ty</td><td><img src="v1.gif"></td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>rty</td></tr></table>';

eller

chngittxt='<table border="1" width="100%">'+
    '<tr>'+
        '<td>&nbsp</td>'+
        '<td>ty</td>'+
        '<td>'+
        '<img src="v1.gif"></td>'+
    '</tr>'+
    '<tr>'+
        '<td>&nbsp;</td>'+
        '<td>&nbsp;</td>'+
        '<td>rty</td>'+
    '</tr>'+
'</table>';
Avatar billede kimmys Nybegynder
21. marts 2006 - 13:14 #12
JAmen det virker jo så flot så flot... du får point!

Så har jeg lidt at lege med i dag!
Avatar billede mclemens Nybegynder
21. marts 2006 - 13:45 #13
svar ;)
Avatar billede kimmys Nybegynder
21. marts 2006 - 13:46 #14
Tak for hjælpen
Avatar billede mclemens Nybegynder
21. marts 2006 - 13:48 #15
så lidt :)
Avatar billede mclemens Nybegynder
21. marts 2006 - 13:48 #16
...og tak for point :)
Avatar billede kimmys Nybegynder
21. marts 2006 - 13:53 #17
men det kan jo godt være at jeg kommer med et spørgsmål hvis der er noget jeg ikke kan forstå :D
Avatar billede mclemens Nybegynder
21. marts 2006 - 13:58 #18
ok, abonnerer lige :P
Avatar billede kimmys Nybegynder
27. januar 2007 - 20:37 #19
-Hey Mclemens abonnere du stadig? for har et spørgsmål
Avatar billede roenving Novice
28. januar 2007 - 04:56 #20
-- prøv at stille det, så kan det være, at mclemens eller en anden kan hjælpe !-)
Avatar billede kimmys Nybegynder
28. januar 2007 - 10:10 #21
okay-

hans script ser sådan her ud:

<html><head>

<script type="text/javascript" src="chngit.js"></script>
<script type="text/javascript">

function chngit(pict,file){
if(file!=0){
  scripts=document.getElementsByTagName("script");
  for(runit=0;runit<scripts.length;runit++)if(scripts[runit].src.match("chngit")){
  scripts[runit].src="chngit"+file+".js";document.getElementById("dintekst").innerHTML=chngittxt;
  }
}

if(pict!=0){
  document.getElementById("billedet").src=pict;
}

}

</script>

</head><body>

-jeg har måtte ændre
scripts[runit].src="chngit"+file+".js";document.getElementById
("dintekst").innerHTML=chngittxt;
til-
scripts[runit].src=file+".js";document.getElementById("dintekst").innerHTML=chngittxt;

Da filerne ligger i under mapper og alt bliver hentet ind på en index side.

så der kommet stier til "chngit"
onclick="chngit('pic/info/nikon_3.jpg','/pages/info/kamerat/chngit1');

Men det tror jeg ikke er skyld i mit problem. (bare så I også vidste jeg havde ændret noget..)

mit problem er at man skal trykke 2 gange på et link for at det virker, og jeg får en fejlmeldign: 'chngitxt' er ikke defineret. Når man har trykket 2 gange på alle link virker de fint, men det dur jo ikke rigtig..

prøv selv:

obs den første række med billeder, der er der ikke nogen side der skifter, først den næste række...

http://www.subir.dk/?ID=page_h864349_categoryID_462372g48654
Avatar billede mclemens Nybegynder
28. januar 2007 - 12:55 #22
Hvad med:

<html><head>

<script type="text/javascript" src="chngit.js"></script>
<script type="text/javascript">

function chngit(pict,file){
  if(file!=0){
    scripts=document.getElementsByTagName("script");
    for(runit=0;runit<scripts.length;runit++){
      if(scripts[runit].src.match("chngit")){
        a=document.createElement("script");
        a.setAttribute("type","text/javascript");
        a.setAttribute("src",file+".js");
        scripts[runit].parentNode.replaceChild(a,scripts[runit]);
        break;
      }
    }
  }

  if(pict!=0){
    document.getElementById("billedet").setAttribute("src",pict);
  }

}

function ihtml(i){
  document.getElementById("dintekst").innerHTML=i;
}



</script>

</head><body>

<img src="billedeknap" alt="a" onclick="chngit('pic/info/nikon_3.jpg','./chngit1');">
<img src="billedeknap" alt="a" onclick="chngit('pic/info/nikon_3.jpg','./chngit2');">
<img src="billedeknap" alt="a" onclick="chngit('pic/info/nikon_3.jpg','./chngit3');">

<div><img id="billedet" src="billede1.jpg"></div>
<div id="dintekst">start tekst</div>
</body></html>



og

chngit0.js
ihtml('');

chngit1.js
ihtml('1 siden');

chngit2.js
ihtml('2 siden');

chngit3.js
ihtml('3 siden');


... skift evt. mappeplaceringerne, istedet for at kalde
chngit('pic/info/nikon_3.jpg','/pages/info/kamerat/chngit1');

Kan du måske kalde: chngit('nikon_3.jpg','1');
og så rette a.setAttribute("src",file+".js"); til:
a.setAttribute("src","/pages/info/kamerat/chngit"+file+".js");

samt document.getElementById("billedet").setAttribute("src",pict); til:
document.getElementById("billedet").setAttribute("src","pic/info/"+pict);

...

...

Opkaldet til skiftet af innerHTML er rykket til javascriptet, så
skiftet af innerHTML'en først sker når javascriptet er blevet loadet.
Og script skiftet er rettet over til noget mere dom agtigt (nu er FF også med).
Avatar billede kimmys Nybegynder
29. januar 2007 - 21:15 #23
jeg kan desværre ikke skifte mappeplaceringerne i skriptet, da scriptet skal bruges andre steder på siden, men det virker perfekt nu, jeg kan i hvert fald ikke se nogen fejl!! =D tusinde mange tak for hjælpen!
Avatar billede mclemens Nybegynder
29. januar 2007 - 21:44 #24
Velbekom og undskyld at det
første var noget skidt ;D
Avatar billede kimmys Nybegynder
29. januar 2007 - 22:09 #25
nej det gør ikke noget, ved da ikke om det var skidt... Nu er der jo næsten også gået et år... hehe så du har vel lært noget mere... det ser i hvert fald godt ud

så tusinde mange tak igen
Avatar billede kimmys Nybegynder
30. januar 2007 - 20:23 #26
lige et tillægs spørgsmål

kan det godt passe at mine chngit1.js ikke kan indholde:

ihtml('<table><tbody><tr><td onmouseover="function anonymous(){this.style.backgroundColor='#E19460';window.status='Click for at folde ud';}" style="VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-ALIGN: center" onclick="function anonymous(){foldIndUd('trEks');}" onmouseout="function anonymous(){this.style.backgroundColor='#dddddd'; window.status='';}" bgcolor="#008080" colspan="2">Klik for at folde ind og ud</td></tr><tr><td class="tabel" valign="middle" colspan="2"><div id="trEks" style="DISPLAY: none; MARGIN: 0px">åben </div></td></tr></tbody></table>');
Avatar billede mclemens Nybegynder
30. januar 2007 - 20:45 #27
Når du bruger ' inde i ihtml(' skal du lige skrive \' istedet
... Hvis nu du havde brugt ihtml(" skulle skrive " som \" istedet ;)

ihtml('<table><tbody><tr><td onmouseover="function anonymous(){this.style.backgroundColor=\'#E19460\';window.status=\'Click for at folde ud\';}" style="VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-ALIGN: center" onclick="function anonymous(){foldIndUd(\'trEks\');}" onmouseout="function anonymous(){this.style.backgroundColor=\'#dddddd\'; window.status=\'\';}" bgcolor="#008080" colspan="2">Klik for at folde ind og ud</td></tr><tr><td class="tabel" valign="middle" colspan="2"><div id="trEks" style="DISPLAY: none; MARGIN: 0px">åben </div></td></tr></tbody></table>');
Avatar billede kimmys Nybegynder
30. januar 2007 - 21:07 #28
okay, tak igen..

men synes ikke det virker.. jo altså det du viser der virker, men der sker et eller andet med det script, når jeg samler det i en linje.. så virker det ikke, orginalt ser det sådan her ud:

<table>
<tr>
<td style="text-align:center;cursor:pointer;vertical-align:middle;" colspan="2" onClick="foldIndUd('trEks');" onMouseOver="this.style.backgroundColor='#E19460';window.status='Click for at folde ud';" onMouseOut="this.style.backgroundColor='#dddddd'; window.status='';" bgcolor="#008080">Klik for at folde ind og ud</td>
</tr>
<tr>
<td colspan="2" class="tabel" valign="middle">
<div id="trEks" style="display: none;margin:0px;">
åben
</div>
</td>
</tr>
</table>

kan du se hvad der er galt?
Avatar billede kimmys Nybegynder
30. januar 2007 - 21:11 #29
eller kan du noget der er bedre :D

der høre også

<head>

<script>
function foldIndUd(id) {
    var obj = document.getElementById(id);
    obj.style.display = obj.style.display == 'block' ? 'none' : 'block';
}
</script>

</head>

til forresten
Avatar billede mclemens Nybegynder
30. januar 2007 - 21:24 #30
Hmm, de der function anonymous forstår jeg ikke lige (prøv at fjerne dem). Jeg kørte bare en replace af ' til \' og læste det ikke igennem ... Denne virker hos mig:


ihtml('<table><tbody><tr><td onmouseover="this.style.backgroundColor=\'#E19460\';window.status=\'Click for at folde ud\';" style="VERTICAL-ALIGN: middle; CURSOR: pointer; TEXT-ALIGN: center" onclick="foldIndUd(\'trEks\');" onmouseout="this.style.backgroundColor=\'#dddddd\'; window.status=\'\';" bgcolor="#008080" colspan="2">Klik for at folde ind og ud</td></tr><tr><td class="tabel" valign="middle" colspan="2"><div id="trEks" style="DISPLAY: none; MARGIN: 0px">åben </div></td></tr></tbody></table>');
Avatar billede kimmys Nybegynder
30. januar 2007 - 21:37 #31
yes nu virker det... tusinde tak igen, igen... tror snart ikke jeg kan spørge om mere :D
Avatar billede mclemens Nybegynder
30. januar 2007 - 21:42 #32
Velbekomme ;)
Avatar billede kimmys Nybegynder
06. februar 2007 - 22:08 #33
Er der noget i dette her script der kan få explorer til at komme med denne fejlmeddelse:

linje 20
tegn 5
Fejl: Et objekt er obligatorisk
kode 0

Denne fejlmeddelse kommer kun på alle de sider hvor rand.js scribtet ikke bliver brugt -  er det pga den sidste linje i sciptet "window.onload=getRandPic;"

-scriptet:
var arrBilleder = new Array();
for(i=0;i<30;i++){
arrBilleder[i] = new Image;
arrBilleder[i].pic = "pic/rand/img"+(i+1)+".jpg";
}
function getRandPic() {
    var aRand, tmp, nD, myD, myM;
    aRand = [11,6,22,13,3,5,17,13,10,3,14,4,23,2,14,9,6,15,14,16,12,22,0,20,9,7,24,2,4,11,19,29,1,5,7,25,0,16,21,12,24,2,4,11,1,28];
    nD = new Date();
    nD.setDate(nD.getDate() - ((nD.getDay() + 6) % 7));
    myM = nD.getMonth()+1;
    myD = nD.getDate();

    for ( i=0; i<myM; i++) {
        tmp = aRand.shift();
        aRand.push(tmp);
    }
    var billede="url("+arrBilleder[aRand[myD]].pic+")";
    document.getElementById("tab1").style.backgroundImage = billede;


}
window.onload=getRandPic;
Avatar billede mclemens Nybegynder
06. februar 2007 - 22:27 #34
Hvis det er og scriptet virker
normalt ellers kan du prøve med:

window.onload=function(){
  if(document.getElementById("tab1"))getRandPic();
}

istedet for din nuværende onload.

... Fejlen bestod i (formoder jeg, jeg ved jo ikke om det løser det) at i dette tilfælde manglede elementet som javascriptet skulle bruge til billederne. Ved at spørge på om hvorvidt elementet eksisterer, inden funktionen startes undgåes dette problem. Alternativt kan man selv gøre så <script tag delen kun står på sider, hvor scriptet skal køres, men ofte har man jo flere javascripts i samme script fil, og det er derfor ikke optimalt.
Avatar billede mclemens Nybegynder
06. februar 2007 - 22:28 #35
Edit: "Hvis det er og scriptet virker
normalt ellers kan du prøve med:"

->

Hvis det er, at scriptet virker normalt
på de andre sider, kan du prøve med:
Avatar billede kimmys Nybegynder
06. februar 2007 - 22:35 #36
Tak mclemens, det virkede med
window.onload=function(){
  if(document.getElementById("tab1"))getRandPic();
}
nu har jeg ikke noget problem med de andre sider
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester