---
title: "onmouseover problem"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/142857-onmouseover-problem"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Iceyes"
published: "2006-02-22T17:17:20.000Z"
updated: "2006-02-22T23:14:20.000Z"
replies: 11
views: 428
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/javascript/142857-onmouseover-problem"
---

# onmouseover problem

## #1 — Iceyes, 2006-02-22T17:17Z

Jag försökte skapa en meny med knappar som ändrar färgar onmouseover
lyckades få en att funka men så fort jag la till fler så slutade alla funka 

```
<div id="button4">
  <div><a href="index.html"
onMouseOver="handleOver();return true;" 
onMouseOut="handleOut();return true;" 
><img name=imgName width=92 height=26 border=0 
alt="img/red_me.jpg"
src="img/blue_me.jpg"
></a> 
<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
 img_on =new Image();  img_on.src ="img/red_me.jpg"; 
 img_off=new Image();  img_off.src="img/blue_me.jpg"; 
}

function handleOver() { 
 if (document.images) document.imgName.src=img_on.src;
}

function handleOut() {
 if (document.images) document.imgName.src=img_off.src;
}

//-->
</script></div>
</div>
```

jag tänkte på nån möjlighet att man inte har seprata knappar med text på som i det här fallet utan bara kör en "tom" röd respektive en "tom" blå
om så är fallet kan man lägga javascriptet i en separat sida så som man gör med css.  
Nått komando så den hämtar den koden som man gör i css?

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

## #2 — sl0k, 2006-02-22T17:56Z

Varför inte använda CSS till det här ? 

\<style type="text/css"\>
  a.menu { background-image: url('img/red_me.jpg'); }
  a.menu:hover { background-image: url('img/blue_me.jpg'); }
\</style\>

\<a href="länken" class="menu"\>Menylänk\</a\>

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

## #3 — Peter S, 2006-02-22T17:56Z

```
<script type="text/javascript" src="fil.js"></script>
```

fil.js:

```
if (document.images) {
 img_on =new Image();  img_on.src ="img/red_me.jpg"; 
 img_off=new Image();  img_off.src="img/blue_me.jpg"; 
}

function handleOver(img) { 
 if (document.images) document.images[img].src=img_on.src;
}

function handleOut() {
 if (document.images) document.images[img].src=img_off.src;
}
```

.html:

```
onmouseover="handleOver([b]'bild1'[/b])" onmouseout="handleOut([b]'bild1'[/b])"><img [b]name="bild1"[/b]...

onmouseover="handleOver([b]'bild2'[/b])" onmouseout="handleOut([b]'bild2'[/b])"><img [b]name="bild2"[/b]...
```

Red./ Eller ännu hellre som sl0k föreslår  :)

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

## #4 — Iceyes, 2006-02-22T20:11Z

> **sl0k skrev:**
>
> Varför inte använda CSS till det här ? 
> 
> \<style type="text/css"\>
>   a.menu { background-image: url('img/red_me.jpg'); }
>   a.menu:hover { background-image: url('img/blue_me.jpg'); }
> \</style\>
> 
> \<a href="länken" class="menu"\>Menylänk\</a\>

det förslaget lät bäst problemet är att jag har färdiga knappar med text redan skriven på och att jag i det här fallet behöver ha en länktext och texten måste vara lika lång som knappen för hela knappen ska visas. finns det nått sätt att undkomma det?

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

## #5 — sl0k, 2006-02-22T20:14Z

width: 90px;
lr dyl...

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

## #6 — Iceyes, 2006-02-22T21:20Z

```
<style type="text/css"> {
width: 92px;
height: 26px; }
a.menu { background-image: url('img/red_me.jpg'); }
a.menu:hover { background-image: url('img/blue_me.jpg'); }
</style>
    <a href="länken" class="menu">Menylänk</a></div>
```

om dessa nu e satta på rätt ställe funkar det fortfarande inte. 
och hur kommer jag ifrån att använda länktexten?

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

## #7 — nitro2k01, 2006-02-22T21:30Z

```
<style type="text/css"> [b].menu[/b]{
width: 92px;.menu
height: 26px; 
[b]display: block;[/b]
}
a.menu { background-image: url('img/red_me.jpg'); }
a.menu:hover { background-image: url('img/blue_me.jpg'); }
</style>
    <a href="länken" class="menu">Menylänk</a></div>
```

/r Beroende på vad blue_me.jpg och red_me.jpg är för bilder kan det vara händigt att sätta display:block;

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

## #8 — Iceyes, 2006-02-22T21:39Z

bilden blir inte större än vad länk texten är 
och även om jag använder &nbsp; så blir höjden på bilden ändå fel

<http://iceyes.se/stuff/test.html>

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

## #9 — nitro2k01, 2006-02-22T21:44Z

Se min redigering!

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

## #10 — Iceyes, 2006-02-22T22:19Z

nu funkar iallafall längden perfekt på bilden nu återstår det bara höjden den är cirka 16-18px den ska vara 26 sen att första gången man har musen över försvinner allt! 
men andra gången så funkar allt som det ska utom att height som sagt inte verkar funka. tesade sätta .menu efter den med men det gick inte

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

## #11 — sl0k, 2006-02-22T22:43Z

hade smygit sig in ett litet fel i ovanstående.. följande borde fungera bättre.. 

```
<style type="text/css">
.menu {
width: 92px;
height: 26px; 
display: block;
}
a.menu { background-image: url('img/red_me.jpg'); }
a.menu:hover { background-image: url('img/blue_me.jpg'); }
</style>
```

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

## #12 — Iceyes, 2006-02-22T23:14Z

funkar perfekt tack för hjälpen :)

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/142857-onmouseover-problem