CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede fcand Nybegynder
21. juni 2009 - 14:17 Der er 17 kommentarer og
2 løsninger

Javascript til visning af forskelligt indhold!

Hej Eksperter!

Jeg har en side hvorpå der er en masse thumbnails af større billeder. Når man trykker på disse thumbnails, vil jeg gerne have at det pågældende billede vises i stort format længere nede på samme side!

Kan det lade sig gøre med javascript?

Det vil altså sige at der skal laves en variabel der kan vise forskelligt indhold (billeder), afhængigt af hvilket billede (thumbnail) man trykker på øverst på samme side!

Håber det er til at forstå!
Avatar billede madfarmer Nybegynder
21. juni 2009 - 15:01 #1
<script language="javascript" type="text/javascript">
    function seeLargeImage(val){
    document.getElementById("Megaimage").src = val;
    }
</script>

og på billedet skriver du så

<img src="imagepath" alt="Loading.." onmouseover='seeLargeImage("imagepath")' />

onmouseover kan så skiftes til onclick
Avatar billede fcand Nybegynder
21. juni 2009 - 15:18 #2
Det kan jeg ikke få til at virke - Du blir nødt til at snakke mig igennem, har ikke så meget styr på det endnu!

Vil du have selve script'et til at stå i headeren og onmouseover til at stå på det lille billede (thumbnail)?
Avatar billede roenving Novice
21. juni 2009 - 15:49 #3
Hvis du bruger dine store billeder til at vise som thumbnails, kan du, som madfarmer angiver, bare bruge billedet:

<img src="myImage.gif" alt="Loading.." onmouseover="seeLargeImage(this.src)">

-- her udnytter jeg så, at du selvfølgelig har direkte adgang til src på billed-elementet, så du kan sætte præcis den samme kode på alle img-tags med thumbnails ...

-- en helt anden ting er, at det ofte vil være hensigtsmæssigt at billedbehandle, så man faktisk kun viser billederne i den rigtige størrelse, og så skal man jo finde frem og tilbage, et typisk eksempel vil være, at man har de store billeder i en mappe og de tilsvarende thumbnails i en anden, og så kan man f.eks. (her ligger de store billeder i en mappe, der hedder bigPics, de små i en, der hedder Thumbs:

<script type="text/javascript">
    function seeLargeImage(val){
      val = val.replace(/Thumbs/,"bigPics");
      document.getElementById("Megaimage").src = val;
    }
</script>
Avatar billede fcand Nybegynder
21. juni 2009 - 15:55 #4
Roenving >> Jeg har som du selv skriver til sidst, lavet en masse små billeder som ligger i en mappe der hedder "thumbs" og de tilsvarende store billeder ligger i en mappe der hedder "images"

Det er ikke bare de store billeder jeg har sat en højde og vidde på for at gøre dem mindre!

Men jeg har stadig mine thumbs øverst på en html side og vil gerne have at når man klikker på et thumb, så skal det tilsvarende store billede vises længere nede på samme html side!
Avatar billede madfarmer Nybegynder
21. juni 2009 - 17:13 #5
Har du husket at kalde de thumbs noget der ligne det originale navn alla

stort billednavn

billednavn.jpg

lille billednavn

billednavn_thumb.jpg

for så kan du finde navnet på det store billede med en substring fra det lille billede.. Hvis dette ikke er tilfældet, kunne det godt blive bøvlet..
Avatar billede madfarmer Nybegynder
21. juni 2009 - 17:15 #6
hvis ja.. så kom lige med 2 navne så kan jeg give dig substring kommandoen..
Avatar billede madfarmer Nybegynder
21. juni 2009 - 17:19 #7
doh.. læste ikke lige ordentligt efter i din sidste post.. går ud fra at thumbs nu har det samme navn som de store, men blot ligger i en mappe inde i billedmappen der hedder thumbs. alla

/images/billed1.jpg

/images/thumbs/billed1.jpg

for så kan du bruge roenvigs


<script type="text/javascript">
    function seeLargeImage(val){
      val = val.replace(/Thumbs/,"");
      document.getElementById("idpådetstorebillede").src = val;
    }
</script>
Avatar billede madfarmer Nybegynder
21. juni 2009 - 17:20 #8
rettelse


<script type="text/javascript">
    function seeLargeImage(val){
      val = val.replace('Thumbs/','');
      document.getElementById("idpådetstorebillede").src = val;
    }
</script>
Avatar billede fcand Nybegynder
21. juni 2009 - 17:28 #9
Det er måske nemmere hvis jeg giver Jer en URL, så kan i se kildekoden!

Og ja navnene på henholdsvis de store og små billeder er de samme, de ligger bare i forskellige mapper der hedder thumbs og images.

URL: http://afcdesign.dk/v6/artwork.html

Når man trykker på et af de to thumbs på denne side, skal det tilsvarende store billede vises længere nede på siden, under hvor der står "showcase". I kildekoden er det i den div der har class="blogCONTENT"
Avatar billede madfarmer Nybegynder
21. juni 2009 - 21:07 #10
ok. du skal på billederne

<img src="portfolio/thumbs/firefox_flames.png" width="110" height="108" alt="Firefox Flames" />

<img src="portfolio/thumbs/afcDESIGN_artwork.png" width="110" height="108" alt="afcDESIGN Bulletholes" />

indsætte en onclick command

<img src="portfolio/thumbs/firefox_flames.png" width="110" height="108" alt="Firefox Flames" onclick="seeLargeImage(this.src)" />

<img src="portfolio/thumbs/afcDESIGN_artwork.png" width="110" height="108" alt="afcDESIGN Bulletholes" onclick="seeLargeImage(this.src)" />

scriptet der ligges under <head vil så se således ud

<script type="text/javascript">
    function seeLargeImage(val){
      val = val.replace("/thumbs/","/images/");
      document.getElementById("stortbilledID").src = val;
    }
</script>

antaget at mappen images også ligger i portfoliomappen.

Du skal så der hvor du gerne vil vise billedet, oprette et img

<img id="stortbilledID" src="">
Avatar billede fcand Nybegynder
21. juni 2009 - 21:42 #11
madfarmer >> Det virker jo rigtig godt :)

Jeg har bare et par småting nu - Kan man på nogen måde gøre så der vises en hånd og ikke bare en pil når man er over thumbs'ne med musen (det er mest for brugervenligheden af siden, så folk ved de kan klikke på thumbs'ne).

og den sidste ting er, at der vises standard ikonet for et billede der ikke referere til noget inden man har klikket på en thumb, det ser ikke så godt ud. Se linket igen, har uploaded det!
Avatar billede madfarmer Nybegynder
21. juni 2009 - 22:10 #12
Kan begge nemt løses

på billederne skriver du blot

<img style="cursor:pointer">;

og den sidste kan løses med

<img id="stortBillede" style="display:none" />

og i javascriptet tilføjer du så lige..

<script type="text/javascript">
    function seeLargeImage(val){
      val = val.replace("/thumbs/","/images/");
      document.getElementById("stortbilledID").src = val;
      document.getElementById("stortbilledID").style.display = 'block';
    }
</script>
Avatar billede madfarmer Nybegynder
21. juni 2009 - 22:11 #13
lidt rodet komentar den sidste.. hvis noget er uforståeligt, så sig lige til..
Avatar billede roenving Novice
22. juni 2009 - 15:48 #14
Det var med vilje, at jeg ikke anvendte gåseøjne, for det er nemlig en RegExp, en regular expression, som er specielt velegnet til at udføre tekst-operationer, bla. fjernelse og udskiftninger inde i en længere tekststreng !-)
Avatar billede madfarmer Nybegynder
22. juni 2009 - 23:58 #15
Men hvorfor bruge regexp der :) en smule meningsløst..
Avatar billede fcand Nybegynder
25. juni 2009 - 10:00 #16
madfarmer >> jeg forstod det nu godt og det virker helt perfekt! Jeg kom dog til at tænke på at det må være muligt at lave et anchor point så der automatisk scrolles ned til det store billede når man trykker op et thumb.

Jeg ved godt hvordan det skal gøres med almindelige links, men ikke når det er kodet i javascript og med onclick!??
Avatar billede fcand Nybegynder
25. juni 2009 - 11:07 #17
Og kan man forresten udbygge scriptet således at man kan klikke på det store billede, for at downloade det i pdf, som ligger i en tredje mappe??
Avatar billede madfarmer Nybegynder
25. juni 2009 - 11:10 #18
prøv

window.location.hash="anchorname";

Er ikke sikker på at det virker.. Men giv det et skud :)
Avatar billede fcand Nybegynder
25. juni 2009 - 11:28 #19
Det virkede både med:

window.location="#anchorname";
og
window.location.hash="anchorname";

ved dog bare ikke om det virker for forvirrende, må jeg lige tage stilling til - Har du nogen kommetar til #17 ? :-)
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 JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
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 06:10 Excel åbner fil i kæmpe format Af Aske i Excel
I går 22:00 Datafordeler Af Lsk i PHP
I går 12:37 Summere beløb pr. dato Af TTA i Excel
31/1022:44 Tilslutte chassic fans Af viking69 i PC
31/1020:28 LED lysstofrør Af ErikHg i Fri debat
White papers
Flere white papers »


Premium
Teaser billede
Staten vil selv udvikle kæmpe it-system til 650 millioner kroner: Nu tvinges regeringen til at lægge vigtige dokumenter frem
Læs mere »
Det går fantastisk på det danske Dynamics-marked: NNIT-selskabet Scales kan vælge og vrage mellem opgaver
Skelsættende GDPR-sag ændrer definitionen af 'følsomme oplysninger'
Microsoft: Tvungen skift til Windows 11 kan udskydes med et år, hvis du betaler os 200 kroner
Se alle »
Computerworld
Teaser billede
Russisk domstol: Google skal betale 20 kvintilliarder dollar i bøde - fordobles løbende
Læs mere »
Microsoft: Windows-opdateringer bliver nu 45 procent hurtigere
Test: Det er nærmest vanedannede at anvende disse mini-tastaturer
Prøvekørt: Mægtige, magelige Volvo EX90 er den fødte skærgårdskrydser
Se alle »
CIO
Teaser billede
Novo Nordisk satsede på HoloLens, men nu har Microsoft dræbt produktet
Læs mere »
Microsoft: Sådan arbejder Google målrettet på at skade os i det skjulte
Efter markante prisstigninger: VMware-kunder får dummebøder hvis de ikke skifter hurtigt nok til ny licens-ordning
Trods "indlysende ulempe": CIO Torben Ruberg siger nej til at konsolidere Satairs stribe af ERP-systemer
Se alle »
Job & Karriere
Teaser billede
Pludselig exit fra Schultz kom som en overraskelse for Merete Søby: Derfor stoppede samarbejdet
Læs mere »
Merete Søby fratræder med omgående virkning som CEO for Schultz efter blot tre måneder på posten
Danske Aeven flytter hele hovedkontoret med 600 medarbejdere til ny adresse og tager Sentia med
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Se alle »
White paper
Teaser billede
Styrk compliance, sikkerhed og overblik med ét hug
Læs mere »
MDR: Transparent sikkerhed og overvågning i realtid
Sikkerhed uden grænser: Cisco Hypershield
Nemmere overblik, styring og omkostningskontrol i dit multicloud-miljø
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »