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

KODE EKSEMPLER

ASP.net (199)

ASP 3.0 (111)

PHP (30)

HTML (66)

SQL (89)

CSS (46)

XML (7)

JavaScript (78)

Diverse kode (13)

ARTIKLER / RESSURSER

Programmering (22)

System og drift (15)

Trafikk og inntekt (11)

Guider og tips (22)

Nyttig lesestoff (23)

Web forum (604)

Link galleri (565)

KURS / TUTORIALS

ASP.NET kurs(5)

CSS kurs (2)

JQuery kurs (2)

FILM / MEDIA

Øk trafikken (8)

Facebook App. (4)

Microsoft CEO (6)

GRATIS SOFTWARE

Server & web

Internett & epost

Systemverktøy

Sikkerhet

Fildeling

Lyd & media

Diverse software

TJENESTER

Domenesalg

Metagenerator

Websikre farger

WebMail

ANNET

Bli medlem!

Siste innlegg

Gjestebok

Tips en venn

Kontakt oss

Forsiden

INTERNETT HASTIGHET

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="" />




<img src="image1_thumb.jpg" onclick="showImg(this.src);" />


<img src="image2_thumb.jpg" onclick="showImg('image2.jpg');" />

</body>
</html>

WebRessurs.no er utviklet og drives av SoftMaker
Sett som startside: [ ]. Bokmerk denne siden: [ klikk ]. Sitemap. http://twitter.com/webressurs_no/. Antall brukersesjoner: 14817160.
Copyright WebRessurs.no © 2003 - 2018