---
title: "separera javascript och html"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/104248-separera-javascript-och-html"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Leine"
published: "2004-05-24T17:00:08.000Z"
updated: "2004-05-25T08:41:07.000Z"
replies: 7
views: 292
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/104248-separera-javascript-och-html"
---

# separera javascript och html

## #1 — Leine, 2004-05-24T17:00Z

har följande kod som behöver separeras mer ( tycker dom som ska godkänna mitt arbete), hur gör jag det så det inte finns javascript-kod i html-koden?

man ska alltså klicka på en liten bild och få upp en större i ett nytt fönster med bestämd storlek.

 i \*.jp

function openWindow(URL, name, features) {
  window.open(URL, name, features, "toolbar=no, location=yes, directories=no, menubar=no, scrollbars=yes, resizable=no")
}

i \*.html

\<a href="#" onclick="openWindow('img/pics/hundkoja.jpg','Daniel', 'width=460, height=350, top=80, left=80')"\>\<img src="img/thumbs/hundkoja.gif" alt="" /\>\</a\>

Permalänk: https://www.webforum.nu/p/104248

## #2 — jarvklo, 2004-05-24T17:55Z

Flyttas från HTML, XHTML & CSS

Permalänk: https://www.webforum.nu/p/1353277

## #3 — dectgap, 2004-05-24T18:37Z

Om du inte använder funktionen openWindow någon annanstans kan du strunta i argumenten:

```
function openWindow() {
window.open("img/pics/hundkoja.jpg","Daniel", "width=460, height=350, top=80, left=80, toolbar=no, location=yes, directories=no, menubar=no, scrollbars=yes, resizable=no")
}

...

<a href="#" onclick="openWindow()"><img src="img/thumbs/hundkoja.gif" alt="" /></a>
```

Permalänk: https://www.webforum.nu/p/1353299

## #4 — Peter S, 2004-05-24T19:55Z

Ett alternativ:

```
window.onload = function() {
    document.getElementById("img").onclick = function() {
        openWindow('img/pics/hundkoja.jpg','Daniel', 'width=460, height=350, top=80, left=80');
    }
}

<img src="img/thumbs/hundkoja.gif" alt="" [b]style="cursor:pointer" id="img"[/b] />
```

 :)

Permalänk: https://www.webforum.nu/p/1353350

## #5 — Leine, 2004-05-24T21:02Z

problemet är att jag kommer ha många bildlänkar till stora bilder.... måste man göra en funktion för varje bild då?

och hur använder man \[\] för att få kod: i forumet förresten.... inte kul att göra fel ;-)

Permalänk: https://www.webforum.nu/p/1353383

## #6 — Josef, 2004-05-24T21:11Z

Beror på om det är olika storlek på de stora bilderna...

Permalänk: https://www.webforum.nu/p/1353388

## #7 — Leine, 2004-05-24T21:12Z

ja det är olika storlek, både liggande och stående bilder nämligen.

Permalänk: https://www.webforum.nu/p/1353389

## #8 — Peter S, 2004-05-25T08:41Z

```
<script type="text/javascript">

//************************************************************

Koden för open-metoden nedan är hämtad från [url]http://www.jojoxx.net[/url];
mer specifikt från [url]http://www.jojoxx.net/jscript/archive/show.asp?id=75[/url]

//************************************************************

var Images = {
    init: function() {
	var imgs = document.images,
	    iLen = imgs.length;

	while (iLen-->0)
	    if (/img\/thumbs\//i.test(imgs[iLen].src)) {
		imgs[iLen].onmouseover = function() {
		    this.style.cursor = "pointer";
		}

		imgs[iLen].onclick = function() {
		    Images.open(this.src.replace(/thumbs/i, "pics"));
		}
	    }
    },
    open: function(url) {
        MyWin = window.open("","","scrollbars=no,resizable=yes,toolbar=no,location=no,directori&#101;s=no,status=no,menubar=no,width=100,height=100");
        with(MyWin.document){
        open();
        write("<html>\n<head><scr"+"ipt>");
        write("window.onresize=function(){if(document.getElementById){\ndocument.getElementById('myimg').style.width=(document.all)?document.body.clientWidth:window.innerWidth;\ndocument.getElementById('myimg').style.height=(document.all)?document.body.clientHeight:window.innerHeight;\n}}\n");
        write("awidth=(document.layers)?0:8;awidth+=(document.all)?4:0;aheight=(document.layers)?0:29;\n");
        write("window.onload=function(){ window.resizeTo(document.images[0].width+awidth,document.images[0].height+aheight); window.moveTo(parseInt(screen.width/2-document.images[0].width/2),parseInt(screen.height/2-document.images[0].height/2));\n");
        write("if(document.all) document.all['wait'].style.visibility='hidden';\n");
        write("if(document.layers) document.layers['wait'].visibility='hide';\n");
        write("if(document.getElementById) document.getElementById('wait').style.visibility='hidden';\n");
        write("}\n</scr"+"ipt>\n");
        write("<title>Bildvisare</title>\n</head>\n<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 rightmargin=0 style=\"overflow:hidden;\">\n");
        write("<div id='wait' style='position:absolute;top:0px;left:0px;width:100px;height:100px;background-color:rgb(0,0,200);color:white;font:bold 12px Arial;'><p> </p><p>Vänta...<br>Bilden laddas</p></div>\n");
        write("<img id='myimg' src=\""+url+"\">\n");
        write("</body>\n</html>\n");
        close();
        }
    }
};

window.onload = Images.init;

</script>

<img src="bild1.png" width="" height="" alt=""/>
<img src="bild2.png" width="" height="" alt=""/>
```

Tänk på att du måste ha tillåtelse från Jojoxx för att använda delar av skriptet ovan om det är tänkt att användas i en kommersiell applikation.

Det verkar även bli några otrevliga radbrytningar i open-metodens kod. Dessa får du nog rätta till.

 :)

Permalänk: https://www.webforum.nu/p/1353513

---

Tråden på webben: https://www.webforum.nu/amne/javascript/104248-separera-javascript-och-html
