separera javascript och html

7 svar · 286 visningar · startad av Leine 24 maj 2004

LeineMedlem sedan nov. 200235 inlägg

24 maj 2004 17:00#1

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

jarvkloMedlem sedan juli 20013 378 inlägg

24 maj 2004 17:55#2

Flyttas från HTML, XHTML & CSS

dectgapMedlem sedan sep. 20021 655 inlägg

24 maj 2004 18:37#3

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>

Peter SMedlem sedan dec. 20025 483 inlägg

24 maj 2004 19:55#4

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] />

LeineMedlem sedan nov. 200235 inlägg

24 maj 2004 21:02#5

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 ;-)

JosefMedlem sedan mars 20023 561 inlägg

24 maj 2004 21:11#6

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

LeineMedlem sedan nov. 200235 inlägg

24 maj 2004 21:12#7

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

Peter SMedlem sedan dec. 20025 483 inlägg

25 maj 2004 08:41#8

<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.