Hur lägga klickbara bilder ovanpå bild?

7 svar · 631 visningar · startad av xtreme 25 apr. 2007

xtremeMedlem sedan juli 20002 056 inlägg

Frågan25 apr. 2007 22:22#1

Har följande bild (kolla bifogad) och ovanpå den vill jag sedan lägga klickbara bilder på rad mellan dom vita rutorna. Kan bara komma på att lägga dom klickbara bilderna i lager men tycker det blir så bökigt att få dom hålla sig på rätt plats alternativt skapa en tabell och lägga filmbilden som bakgrund och dom andra i cellerna vilket jag gissar är "förbjudet". Bifoga gärna lite kod till era förslag ;)

tantenMedlem sedan nov. 20051 596 inlägg

25 apr. 2007 22:59#2

Ett sätt du kan göra det på.
Med en liten snabb koll så tror jag bilderna ska vara 65X65 vilket de inte behöver vara i verkligheten. Ska vara fyrkantiga annars förvrängs de.

<style type="text/css">
	#bild{
		background: url(preview.gif.jpg) no-repeat top;
		width: 500px; height: 112px;
	}
		#bild img{
		float: left;
		margin:24px 8px 0 2px;
		height: 65px;
		width: 65px;
		border: none;
	}
	a {
		text-decoration: none;
	}
	</style>
</head>

<body>
<div id="bild">
<a href="#"><img src="bild.jpg" alt="" /></a>
<a href="#"><img src="bild.jpg" alt="" /></a>
<a href="#"><img src="bild.jpg" alt="" /></a>
<a href="#"><img src="bild.jpg" alt="" /></a>
<a href="#"><img src="bild.jpg" alt="" /></a>
</div>

tantenMedlem sedan nov. 20051 596 inlägg

26 apr. 2007 07:29#3

Till mitt förslag så kan du också använda % på bildstorleken för att kunna ha andra än fyrkantiga bilder. Ange inte bredden.
Vet ju inte vad du ska "klicken" till, men i båda förslagen behöver du inte göra några thumbs, om tanken är att man sedan ska visa bilden stor också.
så här

#bild img{
		float: left;
		margin-right: 10px;
		height: 56%;
		margin-top: 25px;
		border: none;		
	}

xtremeMedlem sedan juli 20002 056 inlägg

26 apr. 2007 08:12#4

tanten skrev:

Till mitt förslag så kan du också använda % på bildstorleken för att kunna ha andra än fyrkantiga bilder. Ange inte bredden.
Vet ju inte vad du ska "klicken" till, men i båda förslagen behöver du inte göra några thumbs, om tanken är att man sedan ska visa bilden stor också.
så här
#bild img{
		float: left;
		margin-right: 10px;
		height: 56%;
		margin-top: 25px;
		border: none;		
	}

Tackar för ditt underbara förslag ;)

Bilderna är inte kvadratiska och samma storlek så det hade varit bra om höjden på dem hade varit den samma men bredden varierat för att kunna behålla proportionerna. Sant att bilden ska visas som stor när man klickar på den. Om jag vill att alla bilderna ska öppnas i ett nytt fönster är det bara att slänga in target="_blank" i css-koden? Har nämligen läst att _target inte tillhör standarderna.

tantenMedlem sedan nov. 20051 596 inlägg

26 apr. 2007 08:23#5

Vad det är för storlek på bilderna spelar ingen roll. Det är inte % av bilden som koden säger nu ska visas utan % av bakgrunden som hela bilden ska visas på. Så för att det ska bli rätt proportioner så ange ingen bredd...
Nej med target får du ändra koden och ta bort xhtml-avsluten och använda transitional doctype.
Du får fundera på hur du vill visa stora bilderna. Finns ju fler sätt än att öppna nytt fönster.
Du kan t.ex använda hover på olika sätt...

Varför öppna nytt fönster?

headbugMedlem sedan sep. 2006867 inlägg

26 apr. 2007 08:55#6

Håller med tanten och föreslår tex lightbox istället :)

http://huddletogether.com/projects/lightbox2/

MVH

Danne VMedlem sedan aug. 20068 090 inlägg

26 apr. 2007 09:02#7

headbug skrev:

Håller med tanten och föreslår tex lightbox istället :)

http://huddletogether.com/projects/lightbox2/

MVH

Eller GreyBox http://orangoo.com/labs/GreyBox/ som t.o.m. är lite fiffigare än LightBox men bygger på samma idé.

xtremeMedlem sedan juli 20002 056 inlägg

26 apr. 2007 11:07#8

Anledningen att jag tänkte _target var att jag inte vill att besökaren ska behöva backa för att komma tillbaka till sidan och vanliga popup suger. Ska titta närmare på lightbox och GreyBox.