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 16:03 Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
I går 14:43 html <Input.. Danske bogstaver Af pjotre i Andet software
I går 14:35 Brænde musik fra usb drev til cd Af Caso i Andet hardware
21/1222:16 Er "OneDrive" et "Must" ? Koster det penge ? Af Ikke-ekspert i Windows
21/1216:42 Windows Media Player - Hvilken version (Versioner) er gode til at afspille og kopiere ? Af Ikke-ekspert i Musik & videoafspillere
White papers
Flere white papers »


Premium
Teaser billede
Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer
Læs mere »
Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter
Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret
Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge
Se alle »
Computerworld
Teaser billede
Mord på it-profil truer San Franciscos status som tech-mekka: Byen er forvandlet til en zombie-by
Læs mere »
Netværkstest: Første mesh-sæt med komplette WiFi 7-features sætter nye rekorder for dækning og hastighed
Temu åbner stort varehus i Sverige og kan nu sende varer til danskerne endnu hurtigere: "Hvad vi frygtede, er sket"
Nørgaard: Copilot scorer pænt højt i min kendte 3D-test (Dyrt, Dumt, Dårligt)
Se alle »
CIO
Teaser billede
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Læs mere »
Software-selskabernes prisstigninger får nu danske virksomheder til at søge mod open source
AI er et falmende buzzword: Lad mig fluks dele en god og en dårlig nyhed
Region Sjælland vil skrive evighedskontrakt med Oracle-specialister: Står klar med 150 millioner kroner
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Merete Søby klar med nyt top-job efter pludselig exit fra Schultz: Her er hendes nye job
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Se alle »
White paper
Teaser billede
Cyberangreb bliver mere kostbare: Er du forberedt?
Læs mere »
SAP: Skab værdi og minimér omkostninger med effektiv dokumenthåndtering
Sådan: Én løsning til compliance, sikkerhed og overblik
Beskyt virksomheden mod trusler – og hold ressourceforbruget nede
Se alle »

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