---
title: "Mouseover utan javascript"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/85482-mouseover-utan-javascript"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "bymarie"
published: "2003-09-07T18:50:30.000Z"
updated: "2003-09-08T08:49:56.000Z"
replies: 9
views: 485
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/85482-mouseover-utan-javascript"
---

# Mouseover utan javascript

## #1 — bymarie, 2003-09-07T18:50Z

Går det att göra det?
Byta en bild vid mouseover utan ett javascript?
I sådana, fall.. hur?

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

## #2 — jarvklo, 2003-09-07T20:31Z

Jupp.
Ersätt bildtaggen i länken med en omslutande div och några bakgrundsbilder i CSS för länktaggen...

Exempel:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <title>CSS Rollover-effekt</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#bildomslag {  /* Denna är mest med för att "rollover"-bilden skall förladdas */
  background-image: url(testbild2.gif); 
  width:100px; height:100px; 
  padding:0;
}
a#bild { /* grundbilden */
  background-image: url(testbild.gif); 
  display:block; height:100%; width:100%; 
  text-decoration:none; /* bort med strecket under &amp;nbsp; i länken*/
}
a#bild:hover { /* samma som i #bildomslag */
  background-image: url(testbild2.gif) 
}
-->
</style>
</head>
<body>
<div>
Här kommer en bild med rollover-effekt skapad av "ren" CSS (inga scripts!):
<div id="bildomslag"><a id="bild" href=".">&amp;nbsp;</a></div>
Fiffigt va?
</div>

</body>
</html>
```

Provkör : <http://member.webforum.nu/2241/CSSrollover.html>

Idén har jag korpat från bl.a. <http://www.zeldman.com/daily/0203c.shtml#cssbg>

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

## #3 — bymarie, 2003-09-07T20:33Z

Tack så hemskt mycket!!!!

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

## #4 — Cheguelin, 2003-09-07T21:41Z

Varför skulle man vilja ha en sån här lösning? Det är t ex mycket segare än en javascript-lösning.

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

## #5 — bymarie, 2003-09-08T06:59Z

För ett javascript mouseover kolliderar troligen med andra javascript jag har..

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

## #6 — bassebhu, 2003-09-08T08:13Z

> **bymarie skrev:**
>
> För ett javascript mouseover kolliderar troligen med andra javascript jag har..

Hur skriver du då? Det måste ju gå att lösa...

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

## #7 — voigtann1, 2003-09-08T08:15Z

jarvklo: kan man göra en "enkel" javascript med din kod då? så man kan tex skapa en variabel av vilken bild som ska visas?

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

## #8 — jarvklo, 2003-09-08T08:38Z

Voigtann1 \> Ehm. - Hur menar du?

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

## #9 — bymarie, 2003-09-08T08:39Z

Bassebhu: Ska visa när jag kommer dit. :)

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

## #10 — jarvklo, 2003-09-08T08:49Z

> **Cheguelin skrev:**
>
> Varför skulle man vilja ha en sån här lösning? Det är t ex mycket segare än en javascript-lösning.

Det kanske stämmer att CSS-lösningen upplevs som aningen segare - men om man t.ex. kör med flera alternativa utseenden på sidan med hjälp av "alternate stylesheets" så tycker iallafall jag att en rolloverlösning via Javascript är betydligt knöligare att underhålla eftersom man då måste in och meka i både CSS- och Javascriptfiler när man ändrar något eller lägger till en alternativ stilmall till ;)

**Därmed inte sagt att det ena skulle vara "rätt" eller det andra "fel"** \- det finns dessutom ännu fler sätt än dessa två att göra rollovers på. :e

Frågan var om det gick med enbart CSS - och det gör det! ;)

Sedan väljer man väl ändå alltid det som är "bäst" utifrån de förutsättningar och mål man har med just den sidan man håller på med,  och inte baserat på vad omgivningen för tillfället anser är "bäst" eller "coolast" ?

PEACE!  :birp

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/85482-mouseover-utan-javascript
