10 svar · 229 visningar · startad av Jerpa
Om ni hade en massa thumbnails, hur skulle ni då presentera dessa?
.Ett nytt blankt fönster med bara bilden o en massa vitt
.En popup
.Eller en fil åt vaje bild som visas inbakad i sidan...
Har funderat lite men vet inte vad jag ska välja, hur skulle du göra/har du gjort?
Hmm....
Är nog inte riktigt med på vad du menar...
Menar du rent kodningsmässigt eftersom frågan ligger här i HTML-forumet?
Gå in på min sida, kolla foto, så har jag löst det ;)
Här har du ett exempel som jag gjorde för nåt år sedan.
Bara att kopiera o klistra. Kanske detta kan ge lite ideer.
Byt bara ut bildnamnen 001.jpg, 002.jpg o.s.v. mot dina egna bildnamn.
<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:15; background-color:white; display:none; border:inset 8px white;}
#bild6 {padding:15; background-color:silver; display:none; border:inset 8px white;}
#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>
Jag gjorde för något år sedan detta lilla bildgalleri.
<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>
Padding resp. inset gör bara att man får lite olika ramar om så önskas.
<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.
<BR>
I koden här heter bilderna 001.jpg t.om. 012.jpg
</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=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><BR>bildbeskrivning om man vill</td>
<td class=td id="bild12"><IMG SRC=012.jpg width=400 height=300><BR>bildbeskrivning om man vill</td>
<div>
</table>
</body>
</html>
Ja, jag vet inte var jag skulle lägga det, här, javascript eller php.
Om du klickar på en liten bild, hur skulle du vilja se den bilden stor?
En popup brukar inte vara populär och eftersom man oftast måste klicka bort den föra tt nästa ska visas blir detta drygt.
Sen har vi ju även dessa nya webläsare som dödar popupsen.
På nåt sätt känns det drygt att göra en sida för varje bild med bakgrund o allt.
Hur ska man lösa det?
Eftersom detta mer låter som en designfråga med lite anknytning till användbarhet, och för att du skall slippa fler kodningsförslag som du inte behöver så flyttar jag tråden från HTML, XHTML & CSS till ett lite mer generellt forum.
bossse skrev:
Här har du ett exempel som jag gjorde för nåt år sedan.
Bara att kopiera o klistra. Kanske detta kan ge lite ideer.
Byt bara ut bildnamnen 001.jpg, 002.jpg o.s.v. mot dina egna bildnamn.
Var iofs bra, men har jag klickat på en bild o sen nästa så ligger båda kvar...
Visst, det står i infot till koden; se nedan
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.
Det smidigaste är alltså att använda sig av OnMouseOver + OnMouseOut.
Ajaa, läste lite för fort där.. Ett problem eller det vet jag inte än är att jag vet inte var jag ska visa den stora bilden. Om den som ska bli över allt annat, alltså över alla "naglar".. hmm... Har aldrig fått kläm på detta och har visat allt hit o dit men aldrig riktigt nöjd.
Du måste positionera stora bilden så att även de små blir synliga, hur har du annars tänkt dig att man ska kunna välja nästa bild.
Om du vill ha så att bilden täcker hela skärmen så får du använda dig av ett popupscript.
Jag tror det får bli en popup-version iaf.. och ev göra som web-tor har eller nåt liknande. Så att man visa alla bilder i samma kategori i samma popup istf en bild/popup