4 svar · 316 visningar · startad av fiddler
Glad advent på er! :)
Jag är ute efter lite inspiration till ett fotoalbum. Jag håller på att göra ett program som genererar ett fotoalbum i HTML. Tanken är att programmet "spottar ut" två ex av varje bild, en tumnagel och en större bild.
Har någon av er någon idé?
Ni kan se resultatet av en tidigare version här.
(Var lite osäker på vilket forum...)
Vad är frågan?
Frågan löd:Någon som gjort ett album?
Jodå, jag har gjort flera, här ett "litet" exempel som man kan anpassa lite som man vill.
Om det inte passar så kan du få lite ideér kanske!
<html>
<head>
<title>lek_med_bilder</title>
<style type="text/css">
body {background-color:lightblue; font-family:arial, verdana; font-size:18; color:yellow;margin:0px;}
.tabell {background-color:green;width:80%; height:100%; border-collapse:collapse;
border:2px solid black}
.td {background-color:blue; position:absolute; left:2%; top:0%; width:60% height:80%; border-collapse:collapse;
border:2px solid black; color:blue;}
a:link, a:visited
{ font-family: tahoma,verdana; font-size:12px; color:blue; text-decoration:none;}
a:active
{font-family: tahoma,verdana; color:red; font-size: 12px;text-decoration: underline;}
a:hover
{font-family: tahoma,verdana; color:green; font-size: 12px;text-decoration: underline;}
}
#bild1 {display:none;}
#bild2 {display:none;}
#bild3 {display:none;}
#bild4 {display:none;}
#bild5 {padding:15; background-color:white; display:none;}
#bild6 {padding:15; background-color:silver; display:none;}
#bild7 {display:none;}
#bild8 {display:none;}
#bild9 {display:none;}
#bild10 {display:none;}
#bild11{padding:15; background-color:white; display:none;}
#bild12{padding:15; background-color:silver; display:none;}
</style>
<script type="text/javascript" language=javascript>
<!--
function bild(currPic){thisText=document.getElementById(currPic).style
if (thisText.display == "block"){thisText.display="none"}
else { thisText.display = "block" } }
-->
</script>
</head>
<body>
<table width=16% height=100% align=right bgcolor=lightgreen>
<td>
<A HREF OnClick="bild('bild1');" OnClick="bild('bild1');"><img src=001.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida1.htm>Bild 1 </A>
<A HREF OnClick="bild('bild3');" OnClick="bild('bild3');"><img src=003.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida3.htm>Bild 3 </A>
<A HREF OnClick="bild('bild5');" OnClick="bild('bild5');"><img src=005.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida5.htm>Bild 5 </A>
</td>
<td>
<A HREF OnClick="bild('bild2');" OnClick="bild('bild2');"><img src=002.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida2.htm>Bild 2 </A>
<A HREF OnClick="bild('bild4');" OnClick="bild('bild4');"><img src=004.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida4.htm>Bild 4 </A>
<A HREF OnClick="bild('bild6');" OnClick="bild('bild6');"><img src=006.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida6.htm>Bild 6 </A>
</td>
<tr>
<td>
<A HREF OnMouseOver="bild('bild7');" OnMouseOut="bild('bild7');"><img src=007.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida7.htm>Bild 7 </A>
<A HREF OnMouseOver="bild('bild9');" OnMouseOut="bild('bild9');"><img src=009.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida9.htm>Bild 9 </A>
<A HREF OnMouseOver="bild('bild11');" OnMouseOut="bild('bild11');"><img src=011.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida11.htm>Bild 11 </A>
</td>
<td>
<A HREF OnMouseOver="bild('bild8');" OnMouseOut="bild('bild8');"><img src=008.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida8.htm>Bild 8 </A>
<A HREF OnMouseOver="bild('bild10');" OnMouseOut="bild('bild10');"><img src=010.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida10.htm>Bild 10 </A>
<A HREF OnMouseOver="bild('bild12');" OnMouseOut="bild('bild12');"><img src=012.jpg width=50 height=45 title="din bildbeskrivning"></A>
<A HREF = länksida12.htm>Bild 12 </A>
</td>
</tr>
<tr>
<td>
<A HREF=bildsida2.htm>Se flera bilder </A>
<!--
Om småbilderna ej får plats på en sida länkar man bara till en sida med exakt samma kod som denna,
som då kan heta bildsida2.htm. Man måste förstås ändra bildnamnen till bild13, bild14 o.s.v.
-->
</td>
</tr>
</table>
<table class=tabell>
<td>Tabell med endast en cell. För muspekaren över bild 7 t.o.m 12.
<BR><BR>
Scriptet känner av bildens storlek, jag har här satt 570x430 som max bildstorlek
<BR>
för bilderna 4 t.om 9, vilket alltså inte behövs .
<BR>
Du kan själv ange önskad maxstorlek på bilderna.
<BR><BR>
Padding 15px på bild 5, 6, 11 och 12 gör att de får en ram (sk. passpartou).
<BR><BR>
Bilderna som ej har någon storleksangivelse visas som de är.
<BR>
Dock bör inte storleken överstiga 580x440.
<BR>
Detta gäller vid skärmupplösning 800 x 600.
<BR><BR>
Har man annan upplösning så får man ändra bildernas maxstorlek.
<BR><BR>
Är ursprungsbilden större än angiven storlek i koden
<BR>
så visas de förminskade inom den storlek jag angivit här.
<BR><BR>
Obs! om man anger annan bildstorlek än ursprungsbilden
<BR>
så måste det anges proportionellt, annars förvrängs ju bilden.
<BR><BR>
Bara att välja om man vill ha OnClick eller OnMouseOver på bilderna
<BR>
För bild 1 t.o.m 6 gäller: Klicka för att visa bilderna, klicka åter för att dölja bilden.
<BR>
För bild 7 t.o.m 12 gäller: OnMouseOver på bilderna.
<BR><BR>
Textlänk under bilderna, där man ser vilken länk som senast besöktes.
<BR>
Dessa textlänkar är förstås inte nödvändiga.
<BR><BR>
Detta går att bygga ut och anpassa nästan som man vill.
</td>
<div>
<!-- Nedan anger du maxstorleken, obs! Om bilden beskärs så måste det göras proportionellt, annars förvrängs bilden -->
<td class=td id="bild1"><IMG SRC=001.jpg alt="bildbeskrivning"></td>
<td class=td id="bild2"><IMG SRC=002.jpg alt="bildbeskrivning"></td>
<td class=td id="bild3"><IMG SRC=003.jpg alt="bildbeskrivning"></td>
<td class=td id="bild4"><IMG SRC=004.jpg width=570 height=430 alt="bildbeskrivning"></td>
<td class=td id="bild5"><IMG SRC=005.jpg width=540 height=400 alt="bildbeskrivning"></td>
<td class=td id="bild6"><IMG SRC=006.jpg width=540 height=400 alt="bildbeskrivning"></td>
<td class=td id="bild7"><IMG SRC=007.jpg width=570 height=430 ></td>
<td class=td id="bild8"><IMG SRC=008.jpg width=570 height=430 ></td>
<td class=td id="bild9"><IMG SRC=009.jpg width=540 height=400 ></td>
<td class=td id="bild10"><IMG SRC=010.jpg></td>
<td class=td id="bild11"><IMG SRC=011.jpg><BR>bildbeskrivning om man vill</td>
<td class=td id="bild12"><IMG SRC=012.jpg><BR>bildbeskrivning om man vill</td>
<div>
</table>
</body>
</html>
Tack Bosse! :) :) :)