---
title: "Ett nytt lager ?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/89328-ett-nytt-lager"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "MickeA.com"
published: "2003-10-31T14:39:52.000Z"
updated: "2003-11-03T17:11:39.000Z"
replies: 11
views: 341
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/89328-ett-nytt-lager"
---

# Ett nytt lager ?

## #1 — MickeA.com, 2003-10-31T14:39Z

Hej

HAr en portfoliosida, där det jag gjort kommer som varsin bild. Nu vill jag att när man håller med musen \_över\_ vardera bild ska en liten ruta dyka upp bredvid eller under eller över eller whatever där en beskrivning för just det 'objektet'. När man sedan drar bort musen så ska den lilla rutan försvinna.

Nästan som här på wF, när man håller musen över en tråd, så kommer utdrag ut tråden upp i en 'alt'.

Kan tillägga att informationen, bilder, beskrivning mm. kommer hämtas från en db m.h.a ASP. Nu vet jag inte om jag är i rätt forum, men i viket fall som helst behöver jag hjälp med det här ;)

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

## #2 — dectgap, 2003-10-31T16:36Z

Du kan använda dig av *title*\-attributet om du bara ska visa en enkel text:

```
<img src="img1.png" title="Titta så tjusigt!" alt="En liten bild" />
```

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

## #3 — MickeA.com, 2003-10-31T18:01Z

HeHe, jag kollade hur det var här på wF alldeles efter jag postade tråden, kör med precis det där, funkar ju kanon ;) Man kan inte ändra utseende på den rutan va? Det tror jag inte, men värt att fråga ;)

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

## #4 — dectgap, 2003-10-31T19:22Z

Nej.

Om du vill ha ett annat utseende kan du använda dig av t ex <http://www.bosrup.com/web/overlib/>

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

## #5 — bossse, 2003-11-02T21:59Z

Ett annorlunda utseende va de, som man kan ändra som man vill!

```
<html> 
<head> 
<title>LänkBeskrivning</title> 
<style type="text/css"> 
<!-- 
.box1 { 
z-index: 1;
padding: 5px; 
height: 460px; 
width: 350px; 
} 
.box { 
z-index: -1;
padding: 5px; 
height: 100px; 
width: 200px;
background-color: lightgreen; 
border: 3px solid yellow; 
} 
--> 
</style> 

</head>
<BODY bgcolor=lightblue> 
<DIV ID="lanktexten" STYLE="position: relative; visibility: hidden ;"></DIV> 

<SCRIPT LANGUAGE="javascript"> 
html_fore="<TABLE CELLPADDING=3 BORDER=1 CELLSPACING=3><TR>
<TD STYLE='background-color: orange; font-family: arial, verdana; font-size:8pt; color:blue'>" 
html_efter="</TD></TR></TABLE>"

 
Xled=20 
Yled=-30 
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 class="box" style="position: absolute; top: 20; left: 5;">
<table width=150 height=150>
<tr>
<td>
<A HREF="dinsida1.htm" onMouseOver="visa('<B>
<FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut "this.style.backgroundColor='green';="visa();">Länk 1</A> 
</td>
</tr>
<tr>
<td>
<A HREF="dinsida2.htm" onMouseOver="visa('<B>
<FONT SIZE=2>Jag tror nästan det va</FONT> ');" onMouseOut="visa();">Länk 2</A> 
</td>
</tr>
<tr>
<td>
<A HREF="dinsida3.htm" onMouseOver="visa('<B>
<FONT SIZE=2>Går även bra med en bild 
<img src=dinbild.gif width=50 height=50></FONT> ');" onMouseOut="visa();"> 
<img src=dinbild.gif width=30 height=30></A> 
</td>
</tr>
<tr>
<td>
<A HREF="dinsida4.htm" onMouseOver="visa('<B>
<FONT SIZE=2>Radbrytning går också bra <BR> Va tycker du, Inte så illa va ? 
<BR> Rutan blir större, ju mer text den innehåller</FONT> ');" onMouseOut="visa();">Länk 4</A> 
</td>
</tr>
</table>
</body> 
</html>
```

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

## #6 — MickeA.com, 2003-11-02T22:26Z

Hmm, ser intressant ut ;) Ska kolla mer på det imorrn.

Förresten, är det ngn som kan lite mer om den där 'overLib'?? Har lite problem nämligen. På tre av mina nio lankar jag använder det där på, så \_måste\_ jag istället ha rutan på **vänster** sida av musen, så tre av rutorna måste jag ha ngra spec. inställningar för, vilket jag inte är med på huyr jag ska göra. Har ngn JS-Guru här tid att kolla lite på dess kod och hjälpa mig med det här?

Min kod för alla länkar ser nu ut såhär:

```
<a href="javascript:void(0);" onmouseover="return overlib('<%=pordran%>', CAPTION, 'http://www.Pordran.se', FGCOLOR, '#CCCCFF', BGCOLOR, '#333399', BORDER, 2, CAPTIONFONT, 'Verdana', TEXTFONT, 'Verdana', TEXTSIZE, 1);" onmouseout="nd();" class='portfolio'><img src='../pics/portfolio/pordran.png' border='0'></a>
```

Tack !!!

**\[redigerat\]Bossse =\> I Koden ovan dräller det av fel, får felmess efter felmess när jag kör den... ;)\[/redigerat\]**

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

## #7 — dectgap, 2003-11-02T22:48Z

Hur blir det om du skriver

```
onmouseover="return overlib('<%=pordran%>', LEFT, CAPTION, 'http://www.Pordran.se', FGCOLOR, '#CCCCFF', BGCOLOR, '#333399', BORDER, 2, CAPTIONFONT, 'Verdana', TEXTFONT, 'Verdana', TEXTSIZE, 1);"
```

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

## #8 — MickeA.com, 2003-11-03T06:16Z

Hmm...?

Tjaba, där här verkar helt sinnesjukt. Jag satt o läste den manual som finns på overLib's sida, där stod det att man kunde kombinera hur som helst, så igår (innan jag skrev mitt förra svar) så provade jag att lägga till LEFT, ABOVE i koden för varje länk, jag la detta mitt i strängen som redan finns. Då blev det toksyntaxfel stod det på denna rad, varför har jag ingen aning om, men den här gången när jag \_bara\_ la dit LEFT så funkar det ju alldeles **Ausgemärkt**. Är det ngn som vet hur det här har stöd i andra webläsare än IE ?! Det är ju Javascript, så de flest som stöder Javascript borde det funka för, va?!

TackTack !!!

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

## #9 — bossse, 2003-11-03T11:49Z

Ok, jag gjorde en del radbrytningar så att det skulle passa detta forum bättre, bara för att slippa scrolla i sidled.
Troligen var de det som gjorde att det blev massa felmeddelanden.
Lägger nu ut koden rakt av.
Har naturligtvis först kollat på min burk att det funkar.

```
<html> 
<head> 
<title>LänkBeskrivning</title> 
<style type="text/css"> 
<!-- 
.box1 { 
z-index: 1;
padding: 5px; 
height: 460px; 
width: 350px; 
} 
.box { 
z-index: -1;
padding: 5px; 
height: 100px; 
width: 200px;
background-color: lightgreen; 
border: 3px solid yellow; 
} 
--> 
</style> 

</head>
<BODY bgcolor=lightblue> 
<DIV ID="lanktexten" STYLE="position: relative; visibility: hidden ;"></DIV> 

<SCRIPT LANGUAGE="javascript"> 
html_fore="<TABLE CELLPADDING=3 BORDER=1 CELLSPACING=3><TR><TD STYLE='background-color: orange; font-family: arial, verdana; font-size:8pt; color:blue'>" 
html_efter="</TD></TR></TABLE>"

 
Xled=20 
Yled=-30 
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 class="box" style="position: absolute; top: 20; left: 5;">
<table width=150 height=150>
<tr>
<td>
<A HREF="dinsida1.htm" onMouseOver="visa('<B><FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut "this.style.backgroundColor='green';="visa();">Länk 1</A> 
</td>
</tr>
<tr>
<td>
<A HREF="dinsida2.htm" onMouseOver="visa('<B><FONT SIZE=2>Jag tror nästan det va</FONT> ');" onMouseOut="visa();">Länk 2</A> 
</td>
</tr>
<tr>
<td>
<A HREF="dinsida3.htm" onMouseOver="visa('<B><FONT SIZE=2>Går även bra med en bild <img src=dinbild.gif width=50 height=50></FONT> ');" onMouseOut="visa();"> <img src=dinbild.gif width=30 height=30></A> 
</td>
</tr>
<tr>
<td>
<A HREF="dinsida4.htm" onMouseOver="visa('<B><FONT SIZE=2>Radbrytning går också bra <BR> Va tycker du, Inte så illa va ? <BR> Rutan blir större, ju mer text den innehåller</FONT> ');" onMouseOut="visa();">Länk 4</A> 
</td>
</tr>
</table>
</body> 
</html>
```

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

## #10 — MickeA.com, 2003-11-03T13:30Z

Det här ser jättebra ut, nu när det funkar ;) Ska glo igenom koden lite närmare när jag kommer hem från jobbet.

Ta´ck !!!

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

## #11 — bossse, 2003-11-03T17:05Z

När jag ändå är i farten så!
Här har du en horizontell variant.

```
<html> 
<head> 
<title>LänkBeskrivning</title> 
<style type="text/css"> 
<!-- 
.box 
{ 
z-index: -1;
padding: 5px; 
height: 5%; 
width: 75%; 
background-color: #99CC99; 
border: 3px solid #006633; 
} 
--> 
</style> 

</head>
<BODY bgcolor=blue> 
<DIV ID="lanktexten" STYLE="position: relative; visibility: hidden ;"></DIV> 

<SCRIPT LANGUAGE="javascript"> 
html_fore="<TABLE CELLPADDING=2 BORDER=1 CELLSPACING=0><TR><TD STYLE='background-color: orange; font-family: arial, verdana; font-size: 8pt'>" 
html_efter="</TD></TR></TABLE>" 
Xled= -50 
Yled= 10 
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 class="box" style="position: absolute; top: 10; left: 5;">
&nbsp &nbsp
<a href="index.html" onMouseOver="visa('<B><FONT SIZE=2>Info om denna sida</FONT> ');" onMouseOut="visa();">Start</a> 
&nbsp &nbsp
<a href="nyheter.html" onMouseOver="visa('<B><FONT SIZE=2>Menade du så här kanske ? </FONT> ');" onMouseOut="visa();">Nyheter</A> 
&nbsp &nbsp
<a href="tavlingar.html" onMouseOver="visa('<B><FONT SIZE=2>Jag tror nästan det va</FONT> ');" onMouseOut="visa();">Tävlingar</A> 
&nbsp &nbsp
<a href="traningar.html" onMouseOver="visa('<B><FONT SIZE=2>Går även bra med en bild </FONT> ');" onMouseOut="visa();">Träningar</A> 
&nbsp &nbsp
<a href="lager.html" onMouseOver="visa('<B><FONT SIZE=2>Radbrytning går också bra <BR> Va tycker du, Inte så illa va ?</FONT> ');" onMouseOut="visa();">Läger</A> 
&nbsp &nbsp
<a href="lankar.html" onMouseOver="visa('<B><FONT SIZE=2>Info om länkar ? </FONT> ');" onMouseOut="visa();">Länkar</A> 
&nbsp &nbsp
<a href="bildarkiv.html" onMouseOver="visa('<B><FONT SIZE=2>Mina fina bilder</FONT> ');" onMouseOut="visa();">Bildarkiv</A> 
&nbsp &nbsp
<a href="kommitten.html" onMouseOver="visa('<B><FONT SIZE=2>Nytt från tävlingkommittén</FONT> ');" onMouseOut="visa();">Kommittén</A> 
</body> 
</html>
```

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

## #12 — MickeA.com, 2003-11-03T17:11Z

Tack !!!

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/89328-ett-nytt-lager
