mouseover --> bild och text i ruta

11 svar · 374 visningar · startad av Deru 8 jan. 2003

DeruMedlem sedan sep. 200219 inlägg

Trådstart8 jan. 2003 19:54#1

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

Jesper TMedlem sedan nov. 20017 144 inlägg

8 jan. 2003 21:39#2

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>.

DeruMedlem sedan sep. 200219 inlägg

8 jan. 2003 22:24#3

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

DeruMedlem sedan sep. 200219 inlägg

9 jan. 2003 07:33#4

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>

Jesper TMedlem sedan nov. 20017 144 inlägg

9 jan. 2003 07:39#5

Vad blir fel då?

DeruMedlem sedan sep. 200219 inlägg

9 jan. 2003 08:17#6

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 ...

Jesper TMedlem sedan nov. 20017 144 inlägg

9 jan. 2003 08:38#7

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.

Jesper TMedlem sedan nov. 20017 144 inlägg

9 jan. 2003 14:25#8

Se till att det inte blir ofrivilliga radbrytningar i scriptet.

DeruMedlem sedan sep. 200219 inlägg

9 jan. 2003 14:31#9

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

Jesper TMedlem sedan nov. 20017 144 inlägg

9 jan. 2003 14:52#10

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.

Peter SMedlem sedan dec. 20025 483 inlägg

9 jan. 2003 15:36#11

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>

DeruMedlem sedan sep. 200219 inlägg

10 jan. 2003 11:56#12

Jupp!

Tack