---
title: "mouseover --> bild och text i ruta"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/64183-mouseover-bild-och-text-i-ruta"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Deru"
published: "2003-01-08T19:54:07.000Z"
updated: "2003-01-10T11:56:34.000Z"
replies: 11
views: 374
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/64183-mouseover-bild-och-text-i-ruta"
---

# mouseover --> bild och text i ruta

## #1 — Deru, 2003-01-08T19:54Z

Jag har letat men inte hittat. Säkert på fel ställe. Någon här kanske vet.

Jag har en tabell med två kolumner. I den vänstra ligger en liten bild med ett *i*, d v s information. I den högra kolumnen står ett namn per rad. Det är alltså en namnlista.

Det jag vill är att då man för musen över *i*:et ska det öppnas en liten ruta där det dels finns en bild på personen, dels några ord om densamme (max 150 tecken).

Går det att göra?

Med "öppnas" ovan menar jag visas, d v s det gör inget om rutan stängs så fort musen förs förbi informationsbilden.

Jag hoppas jag gjort mig förstådd och att någon har ett listigt tips

/Deru

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

## #2 — Jesper T, 2003-01-08T21:39Z

Nåt sånt här:

```
 <script type="text/javascript">
<!--
var currentMenu=false;
var menues=new Array('sub1','sub2','sub3');
function sw(mnu){
 if(currentMenu){if(currentMenu==mnu){changeStyle(mnu,'display','none');currentMenu=false;
}else{
 changeStyle(currentMenu,'display','none');changeStyle(mnu,'display','block');currentMenu=mnu;}
} else {
changeStyle(mnu,'display','block');currentMenu=mnu;}
}
function changeStyle(Id,Property,Value){
	if (document.all){
eval('document.all[Id].style.'+Property+'="'+Value+'"');
	} else if (document.layers){
		eval('document.layers[Id].'+Property+'="'+Value+'"');
	} else if (document.getElementById){
		eval('document.getElementById(Id).style.'+Property+'="'+Value+'"');
	}
}
function initmenu(){
	for(var n=0;n<menues.length;n++){
		changeStyle(menues[n],'display','none');
	}
}
//-->
</script>
<body onLoad="initmenu();"> 
<table width="500" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td width="88"> 
<a href="#" onMouseOver="sw('sub1')" onMouseOut="sw('sub1')">Olle</a><br>
<a href="#" onMouseOver="sw('sub2')" onMouseOut="sw('sub2')">Kalle</a><br>
<a href="#" onMouseOver="sw('sub3')" onMouseOut="sw('sub3')">Britta</a>
</td>
    <td width="405">
<div id="sub1" style="width:200px; background:#eef;">Olle</div>
<div id="sub2" style="width:200px; background:#eef;">Kalle</div>
<div id="sub3" style="width:200px; background:#eef;">Britta</div>
 </td>
  </tr>
</table>
</body>
```

 
Det är jojoxx Dom1 meny som är lite omändrad bara. Verkar funka bra.
Bilderna kan du ju bara lägga till mellan \<divarna\>.

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

## #3 — Deru, 2003-01-08T22:24Z

Jag tackar! Ska testa, strular jag till det återkommer jag ...

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

## #4 — Deru, 2003-01-09T07:33Z

Jag får inte till det ...

Jag har alltså ett dokument. Nedan finns ett utdrag ur en tabell i det. Tabellen har två kolumner. I den vänstra finns en liten liten bild. I den högra finns ett personnamn samt telefonnummer och e-post till densamma. 

Det jag vill, men inte kan, är att då en besökare för sin markör över den bilden ska en ruta visas och försvinna vid mouse out. I den rutan vill jag att det dels ska visas en bild på personen, dels stå lite om henne. Typ som i en tabell, eller kanske i en tabell, bild till vänster och så texten till höger om den.

Jag får inte till det med scriptet ovan, men det behöver ju inte vara scriptets fel ...

```
<table width="95%">
<tr> 
    <td align="center" style="border-bottom: dashed 1px #000000"></td>
    <td align="center" colspan="2" style="border-bottom: dashed 1px #000000"> 
      <div align="left"><b>X:s kollegium i bokstavsordning <br>
        </b>(h&aring;ll mark&ouml;ren &ouml;ver <img src="Grafik/info.jpg" width="16" height="16" border="0"> 
        f&ouml;r mer information)</div>
    </td>
</tr>

<tr> 
    <td align="center" style="border-bottom: dashed 1px #000000"><img src="Grafik/info.jpg" width="16" height="16" border="0"></td>
    <td align="center" colspan="2" style="border-bottom: dashed 1px #000000"> 
      <div align="left"><div id="sub1" style="width:200px; background:#eef;">
<b><a href="mailto:fornamn.efternamn@benny.se">fornamn.efternamn</a></b></div>
        123 12 34 56, [email]fornamn.efternamn@benny.se[/email]</div>
    </td>
  </tr> 
</table>
```

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

## #5 — Jesper T, 2003-01-09T07:39Z

Vad blir fel då?

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

## #6 — Deru, 2003-01-09T08:17Z

bra fråga!

jag fattar inte riktigt hur jag ska göra. Det är nog basproblemet. När jag la in din kod fick jag liksom inte ordning på var divarna skulle ligga i förhållande till tabellkolumnerna och så var jag skulle peta in bilden och texten jag vill visa ...

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

## #7 — Jesper T, 2003-01-09T08:38Z

Mellan divarna kan du lägga in vad du vill tex. en tabell en bild text eller länkar.
Ex. 

```
 <div><img scr="bild.gif"></div>
eller <div><table><tr><td>tabell</td></tr></table></div>  
eller <div>Textrad1<br>Textrad2</div>
osv.
```

Jag skickade dig en början på något.

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

## #8 — Jesper T, 2003-01-09T14:25Z

Se till att det inte blir ofrivilliga radbrytningar i scriptet.

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

## #9 — Deru, 2003-01-09T14:31Z

Jag har löst det nu, sidan ligger ute och är helt ok. Men jag kan inte få det att funka med tabell i pop-upen, vilket är lite synd för det hade varit skönt med lite mer kontrollmöjlighet ... man kan inte få allt ...

Tack

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

## #10 — Jesper T, 2003-01-09T14:52Z

Det borde gå att få till. Kontrollmöjlighet kan du ha med dett stylesheet också. Man kan faktiskt skapa en sida som ser ut som att den är skapad i tabeller enbart med css.

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

## #11 — Peter S, 2003-01-09T15:36Z

Här är ett exempel på hur du kan göra:

```
<div id="sub1" style="background:#eef; border:1px solid black; width:250px">
	<table width="100%" border="0">
	<tr>
		<td><img src="bild.gif" height="50" width="50" border="0"></td>
		<td style="padding-left:5px">Olle heter Olle därför att Olles mamma Olla och pappa Olle, tyckte att Olle var...</td>
	</tr>
	</table>
</div>
```

 :)

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

## #12 — Deru, 2003-01-10T11:56Z

Jupp!

Tack

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/64183-mouseover-bild-och-text-i-ruta
