The forums are currently locked and only available for read only access
bossse
Nu vet jag hur man gör inlägg!
Medlem
Forum Posts: 47
Member Since:
March 6, 2002
March 6, 2002
Offline
Sedan kan man göra ett eget också!
Detta kanske kan passa eller ge dig lite idéer.
<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; border:inset 10px white;}
#bild2 {display:none; border:inset 10px silver;}
#bild3 {display:none;}
#bild4 {display:none;}
#bild5 {padding:12; background-color:white; display:none; border:inset 8px white;}
#bild6 {padding:12; background-color:silver; display:none; border:inset 8px white;}
#bild7 {display:none;}
#bild8 {display:none;}
#bild9 {display:none;}
#bild10 {display:none;}
#bild11{padding:12; background-color:white; display:none;}
#bild12{padding:12; 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>
Jag gjorde för något år sedan detta lilla bildgalleri.
Scriptet känner av bildens storlek, jag har här satt 570x430 som max bildstorlek
för bilderna 4 t.om 9, vilket alltså inte behövs .
Du kan själv ange önskad maxstorlek på bilderna.
Padding 15px på bild 5, 6, 11 och 12 gör att de får en ram (sk. passpartou).
Bilderna som ej har någon storleksangivelse visas som de är.
Dock bör inte storleken överstiga 580x440.
Detta gäller vid skärmupplösning 800 x 600.
Har man annan upplösning så får man ändra bildernas maxstorlek.
Är ursprungsbilden större än angiven storlek i koden
så visas de förminskade inom den storlek jag angivit här.
Obs! om man anger annan bildstorlek än ursprungsbilden
så måste det anges proportionellt, annars förvrängs ju bilden.
Bara att välja om man vill ha OnClick eller OnMouseOver på bilderna
För bild 1 t.o.m 6 gäller: Klicka för att visa bilderna, klicka åter för att dölja bilden.
För bild 7 t.o.m 12 gäller: OnMouseOver på bilderna.
Textlänk under bilderna, där man ser vilken länk som senast besöktes.
Dessa textlänkar är förstås inte nödvändiga.
Detta går att bygga ut och anpassa nästan som man vill.
</td>
<div>
<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=570 height=430></td>
<td class=td id="bild10"><IMG SRC=010.jpg width=400 height=300></td>
<td class=td id="bild11"><IMG SRC=011.jpg width=400 height=300>
bildbeskrivning om man vill</td>
<td class=td id="bild12"><IMG SRC=012.jpg width=400 height=300>
bildbeskrivning om man vill</td>
<div>
</table>
</body>
</html>
Forum Timezone: Europe/Stockholm
Most Users Ever Online: 1030
Currently Online:
Guest(s) 382
Currently Browsing this Page:
1 Guest(s)
1 Guest(s)
Top Posters:
Andreas Galistel: 16287
Jonas Klar: 15897
ilg@dd: 10810
Nyhet: 10607
Mind: 10550
Ctrl: 10355
Gueno: 9881
Guest: 9344
Snorch: 8881
Callister: 8468
Newest Members:
PetrbonFU PetrbonFU
Karine Bembry
Dolores Mcdaniels
Anibal McLeish
Francisca Alt
Alfie Everhart
Lester Huitt
Orlando Jorgensen
Mikki Lundgren
Dakota Kozlowski
Forum Stats:
Groups: 11
Forums: 59
Topics: 146630
Posts: 1300967
Member Stats:
Guest Posters: 2
Members: 79425
Moderators: 0
Admins: 11
Administrators: nordicadmin, Henrik Berntsson, Anton Karmehed, Carl Holmberg, Joel Oscarsson, Mikael Linnér, Mikael Schwartz, Andreas Paulsson, Nickebjrk, Mattias Pettersson, EmxL
© Simple:Press —