5 svar · 627 visningar · startad av Söderlund
Hade tänkt att knåpa ihop en sida för att visa lite bilder, frågan är hur skall man göra?
Popup är jag lite tveksam till, kanske är smidigt men, nja. Kanske skulle gå att lösa med tabeller men det känns inte riktigt riktigt och frames känns ganska föråldrat.
Vad återstår då? Lager?
Är det det som man skall använda nu eller finns det något annat smidigt sätt?
Det finns inget fel att använda tabeller för tabell-data, t ex en prislista eller en uppsättning bilder. Det du inte ska använda tabeller för är ren design, särskilt när du kan div'ar. Så använd lugnt en tabell i detta fall.
http://www.huddletogether.com/projects/lightbox/
ett hyfsat kul alternativ till att publicera bilder. enkelt att installera om du har någorlunda koll på kodning.
Vad återstår då? Lager?
<html>
<head>
<style type="text/css">
.ram {width:100px; height:100%;border:1px solid black;position:absolute;left:10px; top:10px;padding:5px;}
.sidan {width:100%; height:100%;position:absolute;left:120px; top:5px;}
#showimage{
position:absolute;visibility:hidden;margin:5px; padding:5px;}
a { cursor:pointer;}
</style>
<script type="text/javascript">
var ie=document.all
var ns6=document.getElementById&&!document.all
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)?
document.documentElement : document.body}
function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") :document.all.showimage
if (position=="center"){ pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6?pageXOffset+window.innerWidth/2-imgwidth/2:ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6?pgyoffset+window.innerHeight/2-imgheight/2:pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"
crossobj.innerHTML='<div id="dragbar"><span OnClick=closepreview()></span></div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false }
else return true }
</script>
</head>
<BODY bgcolor=green>
<div class=sidan>
Här lägger du in allt övrigt sidinnehåll.
</div>
<div class=ram>
<div id="showimage"></div>
<a href onClick="return enlarge('http://www.t2.net/users/sbalzer/dana/cars/images/ferrari.gif',event,'center',500,500)">
<img src="http://www.t2.net/users/sbalzer/dana/cars/images/ferrari.gif" width=50 height=50 border="0"></a>
<br>
<a href onClick="return enlarge('http://www2.freefoto.com//images_d/15/19/15_19_1_web.jpg?&k=Tree%2C+Sunrise%',event,'center',500,500)">
<img src="http://www2.freefoto.com//images_d/15/19/15_19_1_web.jpg?&k=Tree%2C+Sunrise%" width=50 height=50 border="0"></a>
<br>
<a href onClick="return enlarge('http://w1.631.telia.com/~u63104551/alla/0-b/bakgr18.jpg',event,'center',500,500)">
<img src="http://w1.631.telia.com/~u63104551/alla/0-b/bakgr18.jpg" width=50 height=50 border="0"></a>
<br>
<a href onClick="return enlarge('http://w1.631.telia.com/~u63104551/alla/0-b/apple.jpg',event,'center',500,500)">
<img src="http://w1.631.telia.com/~u63104551/alla/0-b/apple.jpg" width=50 height=50 border="0"></a>
<br>
<a href onClick="return enlarge('http://www.beeflowers.com/Metro/-Startfiles-/City5.gif',event,'center',500,500)">
Obs! Jättestor bild nedan<br>
<font color=yellow>Klicka här </font></a>
<br><br>
<a href onClick="return enlarge('ingen_bild.jpg',event,'center',1000,400)">
Klicka <font color=yellow>här</font> för att släcka bild
<br>
eller klicka på annan bild
</a>
</div>
</BODY>
</HTML>
trendol,
tack för tipset :)
Tack för svaren!
Det blir både tabeller och lager. Nu gäller det bara att hitta på en smidig lösning på det hela. :)