Armin: Transparente Grafik über Button. Wie trotzdem klickbar machen?

Hallo.
Ich habe folgendes Problem... Ich habe eine hp in der ich als "maske" einen runden Bogen verwende... nun ist der transparente teil des bogens über dem text, der nichttransparente verdeckt ihn (was ich ja auch möchte)
dadurch hab ich aber nun folgendes Problem... die buttons können nicht mehr angeklickt werden... gibt es irgendeine lösung wie ich diese Buttons trotzdem klickbar machen kann?
oder kann ich es nur so machen dass ich sie mit z-index nach vorne hebe?

hier der src code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scrolling Relative-Positioned Layer Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "css/scroll-rel.css";
</style>
<style>
a{color:white;text-decoration:none;}
</style>
<script type="javascript">
function linkover(id){
    alert("Here");
    document.getElementById(id).style="text-decoration:underline;";
}

</script>
<script src="js/dw_scrollObj.js" type="text/javascript"></script>
<script src="js/dw_hoverscroll.js" type="text/javascript"></script>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_slidebar.js" type="text/javascript"></script>
<script src="js/dw_scroll_aux.js" type="text/javascript"></script>
<script type="text/javascript">

function initScrollLayer() {
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll,
  // if horizontal scrolling, id of element containing scrolling content (table?)
  var wndo = new dw_scrollObj('wn', 'lyr1');

// bSizeDragBar set true by default (explained at www.dyn-web.com/dhtml/scroll/ )
  // wndo.bSizeDragBar = false;

// arguments: dragBar id, track id, axis ("v" or "h"), x offset, y offset
  // (x/y offsets of dragBar in track)
  //wndo.setUpScrollbar("dragBar", "track", "v", 1, 1);

// pass id('s) of scroll area(s) if inside table(s)
  // i.e., if you have 3 (with id's wn1, wn2, wn3): dw_scrollObj.GeckoTableBugFix('wn1', 'wn2', 'wn3');
  dw_scrollObj.GeckoTableBugFix('wn');
}

</script>
</head>
<body onload="initScrollLayer()">
<div id="mask" style="background-image:url('divbg.gif');position:absolute;left:0px;top:0px;width:1024px;height:400px;z-index:998;"></div>
<table class="main" cellspacing="0" cellpadding="8" border="0">

<tr>
    <!--td class="navs">
      <!--ul>
      <!-- Links to load new layers in scroll area.
           Arguments: id of scroll area (first argument passed to constructor), id of layer to load,
           if scrolling horizontally, id of element containing scrolling content (table) >
       <li><a href="javascript:;" onclick="dw_scrollObj.loadLayer('wn','lyr1'); return false">Intro</a></li>
       <li><a href="javascript:;" onclick="dw_scrollObj.loadLayer('wn','lyr2'); return false">Set Up</a></li>
        <li><a href="javascript:;" onclick="dw_scrollObj.loadLayer('wn','lyr3'); return false">Scrollbars</a></li>
        <li><a href="javascript:;" onclick="dw_scrollObj.loadLayer('wn','lyr4'); return false">More</a></li>
      </ul>

</td-->
   <td>
<!-- relative positioned layer that contains scrolling layers -->
<div id="hold">
<div id="wn">
<!-- scrolling layers start here -->
<div id="lyr1" class="content">
    <div><img src="galleryhead.gif" style="position:relative;left:120px"></div>
    <br><br>
    <TABLE class="" cellSpacing=0 cellPadding=0 width=490 border=0>
    <TR>
        <TD><STRONG>Bollwerk Meckerkasten</STRONG></TD>
    </TR>
    <TR><TD height=15></TD></TR>
    <TR>
        <TD>Um Euch die Möglichkeit zu geben über Mißstände zu berichten und konstruktive Kritik zu äußern, haben wir diesen Meckerkasten eingerichtet.<BR>Wir möchten um korrekte Angaben des Namens, der Telefonnummer und der E-Mail-Adresse bitten. Eingänge ohne diese Angaben werden ohne Bearbeitung direkt gelöscht!<BR>
        </TD>
    </TR>
    </table>
    <br><br><br>
    <table>
    <tr>
    <form action="/cms/send_meckerkasten_mail.php" method="POST"><input type=hidden name=referer value="/cms/cms.php?pageId=96"></tr>
    <tr><td class=whiteBold>Nachricht:</td><td><textarea name=message cols=35 rows=7></textarea></td></tr>
    <tr><td class=whiteBold>Vorname:</td><td><input type=text name=first_name size=35 value=""></td></tr>
    <tr><td class=whiteBold>Nachname:</td><td><input type=text name=last_name size=35 value=""></td></tr>
    <tr><td class=whiteBold>Telefon:</td><td><input type=text name=fon size=35 value=""></td></tr>
    <tr><td class=whiteBold>Email:</td><td><input type=text name=email size=35 value=""></td></tr>
    <tr><td colspan=2><input type=checkbox name=antwort>Bitte um Rückantwort betreffend mein Anliegen!</td></tr>
    <tr><td colspan=2 align=center><input type=submit value="abschicken"></td></tr>
    </form></table>
<br>
<br>
<br>
</td></tr></table>
</div>  <!-- end wn  -->
</div> <!-- end hold (relative layer) -->
  </td>
  <td id="scrollLinks"><div id="scrollbar">
          <div id="up"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','up')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/btn-up.gif" width="11" height="11" alt="" /></a></div>
          <div id="down"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','down')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/btn-dn.gif" width="11" height="11" alt="" /></a></div>
      </div></td>
</tr>
<tr>
  <td class="text" colspan="3">
     <!--a href="http://www.dyn-web.com">www.dyn-web.com</a-->
  </td>
</tr>
</table>

</body>
</html>

  1. Hallo Armin,

    gibt es irgendeine lösung wie ich diese Buttons trotzdem klickbar machen kann?

    die Buttons vielleicht nicht, aber du könntest es mal mit Imagemaps (http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm) versuchen.

    Mit freundlichen Grüßen

    André

    1. komisch ist jedoch dass ich den "scrollbalken" benutzen kann, was 2 grafiken sind, also müsste "mouseover" funktionieren...