---
title: "overLIB"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/109648-overlib"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Gabbe"
published: "2004-08-20T11:21:47.000Z"
updated: "2004-08-25T20:28:23.000Z"
replies: 5
views: 356
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/109648-overlib"
---

# overLIB

## #1 — Gabbe, 2004-08-20T11:21Z

**Tjenare!** 

Jag har ett stort (!) problem.  :r
Jag håller på att pilla lite med [overLIB](http://www.bosrup.com/web/overlib/), 
och behöver hjälp med att istället för att det ska vara text i rutan så vill jag att det ska vara en bild. 
Hoppas du förstår vad jag menar?

Kan du det, eller vet något annat script så svara gärna.
Tacksam för svar! :)

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

## #2 — bossse, 2004-08-21T17:04Z

Nu vet jag inte om du vill ha horizontell eller vertikal meny, men här är ett förslag!

```
<html> 
<head>
<style type="text/css"> 
p {cursor:hand;}
</style>
</head> 
<body bgcolor=lightblue> 
<DIV ID="lanktexten" STYLE="position: absolute; 
border:1px solid black; color:blue; visibility: hidden ;">
</DIV> 
<script language="javascript"> 
html_fore=""
html_efter=""
Xled=30 
Yled=-20 
divnamn="lanktexten"; 
function visa(txt) 
{ 
if (txt) 
{ 
txt=html_fore+txt+html_efter 
if (document.all) 
{ 
document.all[divnamn].innerHTML=txt; 
document.all[divnamn].style.visibility="visible"; 
} 
else if (document.layers) 
{ 
document[divnamn].document.open(); 
document[divnamn].document.write(txt); 
document[divnamn].document.close(); 
document.layers[divnamn].visibility="visible"; 
} } 
else 
{ 
if (document.all) 
{ 
document.all[divnamn].innerHTML=""; 
document.all[divnamn].style.visibility="hidden"; 
} 
else if (document.layers) 
{ 
document[divnamn].document.open(); 
document[divnamn].document.write(""); 
document[divnamn].document.close(); 
document.layers[divnamn].visibility="hidden"; 
} } } 
if (document.all) 
{ 
document.onmousemove = musen_flyttar; 
} 
else if (document.layers) 
{ 
window.captureEvents(Event.MOUSEMOVE); 
window.onMouseMove = musen_flyttar; 
} 
var Xmusposition, Ymusposition; 
function musen_flyttar(ev) 
{ 
if (document.all) 
{ 
Xmusposition = window.event.x; 
Ymusposition = window.event.y; 
} 
else if (document.layers) 
{ 
Xmusposition = ev.pageX; 
Ymusposition = ev.pageY; 
} 
flytta_lager(divnamn,Xmusposition+Xled,Ymusposition+Yled); 
} 
function flytta_lager(lagernamn,x,y) 
{ 
if (document.all) 
{ 
document.all[lagernamn].style.left = x+document.body.scrollLeft; 
document.all[lagernamn].style.top = y+document.body.scrollTop; 
} 
else if (document.layers) 
{ 
document.layers[lagernamn].left = x; 
document.layers[lagernamn].top = y; 
} } 
//--> 
</script> 
<p onMouseOver="visa('<img src=bild1.jpg width=50 height=50>');" onMouseOut="visa();">Länk ett</p>
<p onMouseOver="visa('<img src=bild2.jpg width=50 height=50>');" onMouseOut="visa();">Länk två</p>
<p onMouseOver="visa('<img src=bild3.jpg width=50 height=50><br> lite text kanske');" onMouseOut="visa();">Länk tre</p>
</body> 
</html>
```

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

## #3 — Gabbe, 2004-08-21T19:55Z

Perfekt, tack ska du ha!

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

## #4 — Gabbe, 2004-08-25T12:00Z

Tjenare igen...

Jo jag har ett litet problem med ditt script.
När man drar över musen på texten så kommer det som sagt upp
den bilden man vill, men om man drar den bredvid texten cirka
5cm så kommer bilden upp igen, fast man inte har musen på texten.

Som sagt vill bara att bilden ska dyka upp när man håller musen på själva texten. :)

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

## #5 — bossse, 2004-08-25T16:23Z

Ok, det kan man t.ex. fixa med lite css.
Finns säkert andra sätt också!

```
<html> 
<head>
<style type="text/css"> 
p {cursor:hand;}
body {background-color:green; margin:0}
.tabellen {width:100%; height:200%; border:1px solid black; position:absolute; left:10%; top:0%; z-index: -1;} 
.td2 { background-color:green; color:white; vertical-align:top; padding:10px;}
</style>
</head> 
<body> 
<DIV ID="lanktexten" STYLE="position: absolute; 
border:1px solid black; color:blue; visibility: hidden ;">
</DIV> 
<script language="javascript"> 
html_fore=""
html_efter=""
Xled=30 
Yled=-20 
divnamn="lanktexten"; 
function visa(txt) 
{ 
if (txt) 
{ 
txt=html_fore+txt+html_efter 
if (document.all) 
{ 
document.all[divnamn].innerHTML=txt; 
document.all[divnamn].style.visibility="visible"; 
} 
else if (document.layers) 
{ 
document[divnamn].document.open(); 
document[divnamn].document.write(txt); 
document[divnamn].document.close(); 
document.layers[divnamn].visibility="visible"; 
} } 
else 
{ 
if (document.all) 
{ 
document.all[divnamn].innerHTML=""; 
document.all[divnamn].style.visibility="hidden"; 
} 
else if (document.layers) 
{ 
document[divnamn].document.open(); 
document[divnamn].document.write(""); 
document[divnamn].document.close(); 
document.layers[divnamn].visibility="hidden"; 
} } } 
if (document.all) 
{ 
document.onmousemove = musen_flyttar; 
} 
else if (document.layers) 
{ 
window.captureEvents(Event.MOUSEMOVE); 
window.onMouseMove = musen_flyttar; 
} 
var Xmusposition, Ymusposition; 
function musen_flyttar(ev) 
{ 
if (document.all) 
{ 
Xmusposition = window.event.x; 
Ymusposition = window.event.y; 
} 
else if (document.layers) 
{ 
Xmusposition = ev.pageX; 
Ymusposition = ev.pageY; 
} 
flytta_lager(divnamn,Xmusposition+Xled,Ymusposition+Yled); 
} 
function flytta_lager(lagernamn,x,y) 
{ 
if (document.all) 
{ 
document.all[lagernamn].style.left = x+document.body.scrollLeft; 
document.all[lagernamn].style.top = y+document.body.scrollTop; 
} 
else if (document.layers) 
{ 
document.layers[lagernamn].left = x; 
document.layers[lagernamn].top = y; 
} } 
//--> 
</script>
<table class=tabellen>
<tr>
<td class=td2>
Övrigt innehåll här.
</td>
</tr>
</table>
<p class="box" style="position: absolute; top: 20; left: 5;">
<table width=8% >
<tr>
<td>
<p onMouseOver="visa('<img src=bild1.jpg width=50 height=50>');" onMouseOut="visa();">Länk ett</p>
</td>
</tr>
<tr>
<td>
<p onMouseOver="visa('<img src=bild2.jpg width=50 height=50>');" onMouseOut="visa();">Länk två</p>
</td>
</tr>
<tr>
<td>
<p onMouseOver="visa('<img src=bild3.jpg width=50 height=50><br> lite text kanske');" onMouseOut="visa();">Länk tre</p>
</td>
</tr>
</table>
</body> 
</html>
```

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

## #6 — Bosse168, 2004-08-25T20:28Z

Använd denna kod om du ska få fram en bild med hjälp av overLIB

```
<script language="JavaScript" type="text/JavaScript" src="overlib.js"></script>

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

<div onmouseover="return overlib('<IMG SRC=MIN_BILD.jpg BORDER=1 WIDTH=90 HEIGHT=110>',FULLHTML);" onmouseout="return nd();">MIN LÄNK / BILD</div>
```

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/109648-overlib
