10 svar · 513 visningar · startad av KarlTomas
Hej, kan man göra så att en bild kommer upp i ett popupfönster och att popupfönstret har samma storlek som bilden, när man klicka på en länk?
Och jag menar utan att ange höjd & bredd i scriptet, dvs att scriptet själv känner av bildens storlek
Jag kan ingenting om javascript, och jag hittar inget på tex hotscripts.com så det skulle vara skysst om nån kunde ge ett exempel.
Mitt exempel nedan placeras i det dokument som du öppnar (popup-fönstret). document.images[0] anger att det är den första bilden i dokumentet som fönstret ska ta sin strorlek ifrån. Placera funktionen inom head-taggarna.
function storlek(){
var bredd = document.images[0].width;
var hojd = document.images[0].height;
resizeTo(bredd,hojd)
}
och i body:
<body onload="storlek()">
Du behöver komplettera med stylesheet också, för att sätta marginaler och padding till 0.
Tack det funkar, men hur tar jag bort alla knapp- & menyrader? Har för mig att man ska skiva in toolbar="no" eller nått likande, men var?
Du kan nog hitta en del här. :)
http://www.jojoxx.net/jscript/archive/imgpopup.html
Red: Hittade en annan tråd om samma fråga.
hypatia skrev:
Du kan nog hitta en del här. :)
http://www.jojoxx.net/jscript/archive/imgpopup.html
Red: Hittade en annan tråd om samma fråga.
Jojoxx script funkar, men där måste man ange H x B
Den andra tråden fattar jag inte riktigt, och det blev asp som löste problemet i den tråden....
vänta...
Jesper T:s inlägg går ju att använda även utan ASP. :)
Själva länken som ska öppna sidan "blopp.html" i popupen:
<a href="blopp.html" onClick="window.open('','fonster','width=200,height=200');" target="fonster"><img src="bild.jpg" width="80" height="80" border="0" alt="Klicka på bilden för att förstora"></a>
blopp.html :
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var isNav4, isIE4;
if (parseInt(navigator.appVersion.charAt(0)) >= 4) {
isNav4 = (navigator.appName == "Netscape") ? 1 : 0;
isIE4 = (navigator.appName.indexOf("Microsoft") != -1) ? 1 : 0;
}
function fitWindowSize() {
if (isNav4) {
window.innerWidth = document.layers[0].document.images[0].width;
window.innerHeight = document.layers[0].document.images[0].height;
}
if (isIE4) {
window.resizeTo(500, 500);
width = 500 - (document.body.clientWidth - document.images[0].width);
height = 500 - (document.body.clientHeight - document.images[0].height);
window.resizeTo(width, height);
}
}
// End -->
</script>
<title>Bildförstorare</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onBlur="window.close()" onLoad="fitWindowSize()">
<div style="position:absolute; left:0px; top:0px">
<img name='pic' alt="" src="bild.jpg" border="0">
</div>
</body>
</html>
Öppnande sida:
<a href="pop.html" onClick="window.open('','fonster','width=200,height=200');" target='fonster'>Öppna</a>
Bildvisande sida:
<SCRIPT LANGUAGE="JavaScript">
function storlek(){
var bredd = document.images[0].width;
var hojd = document.images[0].height;
resizeTo(bredd,hojd)
}
</script>
<body onload="storlek()" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" rightmargin="0" style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px">
<img src="bild.gif">
</body>
RED: Jaja, sen som vanligt...
Jag fösröker alltid att hålla det så enkelt som möjligt, så här är min lösning:
När du öppnar fönstret har du följande i head i dokumentet med länken till popupen:
<script type="text/javascript">
function oppnaNytt(url, namn)
{
window.open(url,namn,'scrollbars=yes,resizable=yes,menubar=yes,toolbar=no,height=555,width=500')
}
</script>
Och länken som kallar på funktionen:
<a href="bilder.htm" onclick="oppnaNytt(this,'bild');return false">bild</a>
Och i dokumentet så placerar du det skript som jag lämande tidigare för att ändra storleken på fönstret.
Solbulle lyckades posta en liknande variant, en minut innan mig, båda fungerar på samma sätt dock.
En variant av Jojoxx script, fast jag vet inte riktigt om det blir 100 i alla lägen...
Fördelen är att man har all kod i en o samma sida.
<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
får användas fritt så länge som dessa rader står kvar. */
function imgPopup(url){
MyWin = window.open("","fonster","width='200',height='200',toolbar=no,location=no,directories=no,status=no,menubar=no");
with(MyWin.document){
open();focus();
write("<html>\n<head>\<title>Bildvisare</title>\n</head>\n<SCR" + "IPT LANGUAGE='Java" + "Script'>\nfunction storlek(){\n");
write("var bredd = document.images[0].width;\nvar hojd = document.images[0].height;\nresizeTo(bredd,hojd)\n}\n</scr" + "ipt>");
write("<body onload=storlek() marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 rightmargin=0>\n");
write("<img src=\"" + url + "\">\n");
write("</body>\n</html>\n");
close();
}
}
</script>
<a href="#" onClick="imgPopup('calvin.gif'); return false;">Visa bild</a>
<br>
<a href="#" onClick="imgPopup('bild.gif'); return false;">Visa bild</a>
Tack för svaren, det enda som jag fick att fungera var solbulle´s förslag (det första), men det räcker för mig.
:bire