---
title: "Hur lägga klickbara bilder ovanpå bild?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/159657-hur-lägga-klickbara-bilder-ovanpå-bild"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "xtreme"
published: "2007-04-25T22:22:53.000Z"
updated: "2007-04-26T11:07:54.000Z"
replies: 7
views: 634
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/159657-hur-lägga-klickbara-bilder-ovanpå-bild"
---

# Hur lägga klickbara bilder ovanpå bild?

## #1 — xtreme, 2007-04-25T22:22Z

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 ;)

Bilagor:

- [preview.gif](https://www.webforum.nu/a/14424.gif)

Permalänk: https://www.webforum.nu/p/159657

## #2 — tanten, 2007-04-25T22:59Z

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>
```

Permalänk: https://www.webforum.nu/p/1970048

## #3 — tanten, 2007-04-26T07:29Z

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;		
	}
```

Permalänk: https://www.webforum.nu/p/1970075

## #4 — xtreme, 2007-04-26T08:12Z

> **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.

Permalänk: https://www.webforum.nu/p/1970089

## #5 — tanten, 2007-04-26T08:23Z

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?**

Permalänk: https://www.webforum.nu/p/1970099

## #6 — headbug, 2007-04-26T08:55Z

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

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

MVH

Permalänk: https://www.webforum.nu/p/1970113

## #7 — Danne V, 2007-04-26T09:02Z

> **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é.

Permalänk: https://www.webforum.nu/p/1970114

## #8 — xtreme, 2007-04-26T11:07Z

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.

Permalänk: https://www.webforum.nu/p/1970157

---

Tråden på webben: https://www.webforum.nu/amne/html-css/159657-hur-lägga-klickbara-bilder-ovanpå-bild
