---
title: "Ändrad bild när Pekaren glider över?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/118997-ändrad-bild-när-pekaren-glider-över"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "EnLitenDelfin"
published: "2004-12-30T20:57:18.000Z"
updated: "2004-12-31T15:38:16.000Z"
replies: 8
views: 367
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/118997-ändrad-bild-när-pekaren-glider-över"
---

# Ändrad bild när Pekaren glider över?

## #1 — EnLitenDelfin, 2004-12-30T20:57Z

Hur gör man så att bilden (länken) man drar muspekaren över ändrar sig?  

Såg det på <http://www.silfver.se/>
i menyn under titelbilden
och tyckte det var bra, men hur gör man?  Det är väl bara bakgrundsbilden som ändras?

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

## #2 — Peeer, 2004-12-30T21:03Z

Lite css bara. 

```
#menu ul li a {
	background-image: url(/css/menu.gif);
}

#menu ul li a:hover {
	background-image: url(/css/menu_hover.gif);
}
```

Dvs det visas en annan bakgrundsbild när musen är över menyvalet.

Välkommen till wF btw!

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

## #3 — Syd, 2004-12-30T22:05Z

Flyttas från Design & Grafik till HTML, XHTML & CSS

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

## #4 — zcorpan, 2004-12-30T23:29Z

Med Peeers metod kommer hover-bilden att laddas först när man hovrar länken. Dvs, det kanske tar ca 1 sekund från att man hovrar länken tills bilden byts (första gången, dvs).

För att lösa det kan man ha hover-bilden i samma bild som orginalbilden och positionera om den vid hover.

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

## #5 — EnLitenDelfin, 2004-12-31T00:39Z

Okej det låter schysst, det är detaljerna som skiljer...
men hur går man tillväga för att ompositionera bilden vid hover??

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

## #6 — WiZzLeR, 2004-12-31T01:11Z

> **zcorpan skrev:**
>
> Med Peeers metod kommer hover-bilden att laddas först när man hovrar länken. Dvs, det kanske tar ca 1 sekund från att man hovrar länken tills bilden byts (första gången, dvs).
> 
> För att lösa det kan man ha hover-bilden i samma bild som orginalbilden och positionera om den vid hover.

eller så pre-loadar han bilderna som inte visas än.

```php
<script language="JavaScript" type="text/JavaScript">
<!--

function MM_preloadImages() {
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

-->
</script>
```

och sedan 
onLoad="MM_preloadImages('bild1','bild2')" i bodytaggen.

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

## #7 — zcorpan, 2004-12-31T02:03Z

WiZzLeR: ditt förslag hör till det förflutna milleniet, jag vill inte se några DW-javascript. Usch ;)

Så här gör du:

```
ul {list-style-type: none;}

li a {display: block;
	height: 50px;
	line-height: 50px;
	width: 5em;
	background-image: url(menu-item-bg.png);
	background-repeat: repeat-x;
	background-position: 0 0;}

li a:hover {background-position: 0 -50px;}
```

```
<ul>
<li><a href="#">Foo</a></li>
</ul>
```

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

## #8 — WiZzLeR, 2004-12-31T15:02Z

livet är hårt. =) sålänge sidan fungerar så!

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

## #9 — zcorpan, 2004-12-31T15:38Z

> livet är hårt. =) sålänge sidan fungerar så!

Det fungerar ju inte om användaren har inaktiverat JavaScript.

Jag försöker alltid undvika JavaScript så mycket det går... Och om jag använder JavaScript så ska informationen vara tillgänglig även utan JavaScript, och saker som beror på JavaScript ska inte finnas när det är inaktiverat (för att förhindra förvirring).

Ärligt talat kan jag inte så mycket JavaScript (eller ECMAScript, som den standardiserade versionen heter), för jag har sällan användning av det. ;)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/118997-ändrad-bild-när-pekaren-glider-över