PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Ein Bild mit Menüs ausstatten



Pagan
23.06.2006, 00:58
Hallo,

folgendes ich habe ein normales png-Bild mit mehren "hotspots" versehen. Nun soll der Mauszeiger beim düberfahren (onmouseover) bei jeden "hotspot" ein Menü anzeigen (jedes unterschiedlich).

Wie macht man das? :confused:

MFG Pagan

Boothby
23.06.2006, 23:15
Ich würds mit Overlib (http://www.bosrup.com/web/overlib/) machen. Die overlib.js kannst du dort auch runterladen

Nachfolgendes Beispiel funktioniert und gibt dir einen Ansatz, wie man das mit dem Menü realisieren könnte.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>

<style type="text/css">
<!--
.menu
{
border: 1px solid blue;
padding: 0px;
}

.menu h1
{
display: block;
background: #ffcc00;
border-bottom: 1px solid blue;
font-size: small;
font-weight: bold;
margin: 0px;
}


.menu a, a:hover
{
display: block;
text-decoration: none;
border-bottom: 1px solid blue;
margin: 0px;
padding: 2px;
}

.menu a:hover
{
background: yellow;
}



-->
</style>
</head>
<body>
<script type="text/javascript">
function showmenu(id)
{
return '<div class="menu">' + document.getElementById(id).innerHTML + '</div>';
}
var ol_fgcolor = "white";
var ol_border="0";
var ol_textfont = "Verdana, Arial, Helvetica, sans-serif";
var ol_textcolor = "black";
var ol_textsize = "1";

</script>

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>

<div style="display: none">
<div id="menu1">
<h1>Menü 1 (rot)</h1>
<a href="link11.html">1.1</a>
<a href="link12.html">1.2</a>
</div>

<div id="menu2">
<h1>Menü 2 (schwarz)</h1>
<a href="link21.html">2.1</a>
<a href="link22.html">2.2</a>
</div>
</div>

<div>
<map name="Testbild">
<area shape="circle" coords="33,27,8" href="javascript:void(0);" onmouseover="return overlib(showmenu('menu1'),STICKY);" onmouseout="return nd();" onclick="return overlib(showmenu('menu1'),STICKY,CENTER,OFFSETY,-10,TIMEOUT,5000);">
<area shape="circle" coords="57,63,8" href="javascript:void(0);" onmouseover="return overlib(showmenu('menu2'),STICKY);" onmouseout="return nd();" onclick="return overlib(showmenu('menu2'),STICKY,CENTER,OFFSETY,-10,TIMEOUT,5000);">
</map>
</div>

<p><img src="bild.png" alt="Karte" usemap="#Testbild"></p>


</body>
</html>