Turvenn.no
Webutvikler kurs ASP.NET, C#, CSS mm.

WebRessurs.no - Webprogrammering og ressurs innen ASP, ASP.NET, PHP, SQL, HTML, CSS, Javascript, XML, C#, VB, Flash  mm.

Brukernavn: 
Passord:

Registrèr deg Glemt passord?
Logg deg inn




  ASP.net (199)
  ASP 3.0 (111)
  PHP (30)
  HTML (66)
  SQL (89)
  CSS (46)
  XML (7)
  JavaScript (78)
  Diverse kode (13)


  Programmering (22)
  System og drift (15)
  Trafikk og inntekt (11)
  Guider og tips (22)
  Nyttig lesestoff (23)
  Web forum (604)
  Link galleri (565)


  ASP.NET kurs(5)
  CSS kurs (2)
  JQuery kurs (2)


  Øk trafikken (8)
  Facebook App. (4)
  Microsoft CEO (6)


  Server & web
  Internett & epost
  Systemverktøy
  Sikkerhet
  Fildeling
  Lyd & media
  Diverse software


  Domenesalg
  Metagenerator
  Websikre farger
  WebMail


  Bli medlem!
  Siste innlegg
  Gjestebok
  Tips en venn
  Kontakt oss
  Forsiden




Kode Artikler
Linker


Mål internetthastigheten din.


Vise / skjule elementer og sette image src ved hjelp av javascript

av Øyvind A. Isaksen
 
Her viser vi en komplett kode som tar for seg veldig nyttig javascript funksjonalitet. I eksempelet har vi en side der vi viser en tekst og noen thumbnail bilder. Når man klikker på en thumbnail ønsker vi at teksten skal forsvinne og en større versjon av bildet vi klikket på skal vises i stedet. Alt sammen styres ved hjelp av javascript!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Viewer</title>
</head>

<script type="text/javascript">
function showImg(img) {
var imgvr = document.getElementById("imageviewer");
var proinf = document.getElementById("projectinfo");

//Disse linjene fjerner '_thumb' fra img argumentet hvis du kaller funksjonen med (this.src).
//Det går også greit å sende inn bildet du ønsker å vise direkte ved å kalle
//funksjonen slik: showImg('image2.jpg'). Da må du slette disse linjene under.
var format = img.substr(img.indexOf('.'));
img = img.substr(0,img.indexOf('_'))
if(img.indexOf('_')!==-1)img += format;
img = img + '.jpg'
/////////////////////////////////////

//Dette er hoveddelen i funksjonen:
imgvr.src = img;
imgvr.style.display = 'block';
/////////////////////////////////////

//Skjule "projectinfo" tekst:
proinf.style.display = 'none';
}
</script>

<style type="text/css">
#imageviewer{display:none;}
</style>
<body>

<div id="projectinfo">Her er litt tekst</div>
<img id="imageviewer" src="" />

<!-- Det er 2 måter du kan bruke showImg() funksjonen: -->

<!-- 1. Ved å kalle den med this.src argumentet (blir helt lik for hvert bilde): -->
<img src="image1_thumb.jpg" onclick="showImg(this.src);" />

<!-- 2. Ved å kalle den med bilde du vil vise direkte: -->
<img src="image2_thumb.jpg" onclick="showImg('image2.jpg');" />

</body>
</html>

WebRessurs.no anbefaler:    StackOverflow.com | Experts-Exchange.com | W3schools | ASP.NET | Codeproject | 4Guys
WebRessurs.no er utviklet og drives av SoftMaker
Sett som startside: [ ]. Bokmerk denne siden: [ klikk ]. Sitemap. http://twitter.com/webressurs_no/. Antall brukersesjoner: 14064978.
Copyright WebRessurs.no © 2003 - 2018
Jobbsøk.no - Jobbsøknad, CV, intervju, tips og lenker