---
title: "mouse.over?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/95104-mouse-over"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Jepro"
published: "2004-01-17T19:30:43.000Z"
updated: "2004-01-18T16:07:57.000Z"
replies: 3
views: 228
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/95104-mouse-over"
---

# mouse.over?

## #1 — Jepro, 2004-01-17T19:30Z

Jag har stött på ettt problem med mina planer.. Jag tänkte lägga upp lite miniatyrbilder och när man för musen över dem så dycker det upp en större bild ovandör eller under i en ruta.. 

typ så här..

                 Stor bild!

Bild bild bild bild bild bild bild bild bild

sånär man för bilden över en av "bild"erna dycker det upp en stor bild där  det står "Stor bild!" Fattar nån? Tacksam för svar!

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

## #2 — frankof, 2004-01-17T19:34Z

Kolla "foto" på min [sida](http://hem.passagen.se/frankof/), så menar du?
Kika i källan vet ja ;)

BTW: välkommen till wF :birp

EDIT:
Först lite css:

```
#t1{ 
position:absolute;
  
left:270px; 
top:10px; 
z-index:49; 
visibility:hidden;
background-color:#ffffff;
border:solid 3px #c0c0c0;}
```

Sedan lite html(den "stora" bilden): 

```
<div id="t1"><img src="img/thbigbild1.jpg" width="150px" height="113px" alt="bild 1 mellanstor"><span>Jag på hojen</span></div>
```

Sedan lite html+javascript(den lilla bilden):

```
<img src="img/thbild1.jpg" width="40px" height="40px" alt="bild 1 liten" class="link" onmouseout="document.getElementById ('t1').style.visibility='hidden'" onmouseover="document.getElementById ('t1').style.visibility='visible'">
```

Enkelt eller hur ;)

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

## #3 — Jepro, 2004-01-17T19:37Z

japp, det var så jag menade.. :)

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

## #4 — frankof, 2004-01-18T16:07Z

Det är inte poppis att lösa problen via PM ;)
Andra kan ju också ha nytta av det.
Här har du sidan du efterfrågade ;)

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 <html> 
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<title>Dinsida</title>
<style type="text/css">
#t1,#t2,#t3,#t4{ 
position:absolute;  
left:270px; 
top:10px; 
z-index:49; 
visibility:hidden;
background-color:#ffffff;
border:solid 3px #c0c0c0;}

.thumbs {position:absolute;  
left:270px; 
top:215px; 
z-index:49; 
}
</style>
</head> 
<body>
<div id="t1"><img src="img/thbigbild1.jpg" width="150px" height="113px" alt="bild 1 mellanstor"></div>
<div id="t2"><img src="img/thbigbild2.jpg" width="150px" height="113px" alt="bild 2 mellanstor"></div>
<div id="t3"><img src="img/thbigbild3.jpg" width="150px" height="156px" alt="bild 3 mellanstor"></div>
<div id="t4"><img src="img/thbigbild4.jpg" width="150px" height="200px" alt="bild 4 mellanstor"></div>
<div class="thumbs">
<img src="img/thbild1.jpg" width="40px" height="40px" alt="bild 1 liten" class="link" onmouseout="document.getElementById ('t1').style.visibility='hidden'" onmouseover="document.getElementById ('t1').style.visibility='visible'"><img src="img/thbild1.jpg" width="40px" height="40px" alt="bild 2 liten" class="link" onmouseout="document.getElementById ('t2').style.visibility='hidden'" onmouseover="document.getElementById ('t2').style.visibility='visible'"><img src="img/thbild3.jpg" width="40px" height="40px" alt="bild 3 liten" class="link" onmouseout="document.getElementById ('t3').style.visibility='hidden'" onmouseover="document.getElementById ('t3').style.visibility='visible'"><img src="img/thbild4.jpg" width="40px" height="40px" alt="bild 4 liten" class="link" onmouseout="document.getElementById ('t4').style.visibility='hidden'" onmouseover="document.getElementById ('t4').style.visibility='visible'">
</div>
</body>
</html>
```

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/95104-mouse-over
