stephan: Fehler im Quellcode?

Hallo Foristi,

habe leider keine Lösung für folgendes Problem finden können und bitte daher auf diesem Wege um Hilfe.

Vorab; meine HTML-Kenntnisse halten sich im Rahmen!

Problem:

Der folgende Quellcode stellt die Startseite einer Website dar, in welche 2 Grafiken eingebunden sind, welche mittels javascript bei klicken in neuem fenster geöffnet werden.

Bei der ersten Grafik gibt es auch keine Probleme. Beid er zweiten jedoch findet die maus den link nur am alleräußersten linken rand der grafik!?

Kann mir jemand sagen, was im Code zu ändern ist, damit der link regulär auf der ganzen grafik funktioniert?

(evtl. kurz den code kopieren und anzeigen lassen. dann wisst ihr, was ich mit "nur am rand" meine.)
Hier nun der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hip Hop Movement | Danceschool | Home</title>
<style type="text/css">

#body { background-image:url(bg_icarus.png);
       font-size:10px;
       font-family:Verdana, Arial, Helvetica, sans-serif;
       color:#FFFFFF;
}
#bg {
  width:650px;
  height:504px;
  margin:0px auto;
  padding:10px;
  text-align:left;
  background-image:url(bg.jpg);
  background-repeat:no-repeat;
}
#a {
  color:white;
  font-weight:600;
}
#pre {
  font-size:12px;
}
#Header{
    position:static;
 padding-left:7px;
 padding-right:7px;
 padding-top:25px;
 background-image:url(header_willkommen.jpg);
 background-repeat:no-repeat;
 height:94px;
 width:413px;
 text-align:left;
}
#Main{
 position:absolute;
 background-image:url(bg_main.gif);
 background-repeat:no-repeat;
 height:299px;
 width:416px;
 top:128.2px;
 left:auto;
 padding:5px;
}
#Text_Pics{
 position:absolute;
 background-image:url(text_pi3cs.gif);
 background-repeat:no-repeat;
 left:6px;
 top:8px;
 width:1px;
 height:174px;
 z-index:1;
}
#ueber_uns{
 position:absolute;
 background-image:url(home.jpg);
 background-repeat:no-repeat;
 left:9px;
 top:9px;
 width:86px;
 height:32px;
 z-index:1;
}
#content_text {
 position:absolute;
 left:9px;
 top:40px;
 width:271px;
 height:400px;
 z-index:1;
}
#linie{
 position:absolute;
 background-image:url(lin1ie.jpg);
 background-repeat:no-repeat;
 left:11px;
 top:189px;
 width:405px;
 height:4px;
 z-index:1;
}
#pics{
background-image:url(pic3s.jpg);
background-repeat:no-repeat;
 position:absolute;
 left:10px;
 top:198px;
 width:398px;
 height:95px;
 z-index:1;
}
#menu{
 background-image:url(bg_menu1.jpg);
 background-repeat:no-repeat;
 position:absolute;
 margin-right:auto;
 width:207px;
 height:483px;
 z-index:1;
 left: 422px;
 top: -99px;
}
#Coupon{
 background-image:url(coup1on.gif);
 background-repeat:no-repeat;
 height:81px;
 width:414px;
 position:absolute;
 top:431px;
 padding:5px;
 padding-left:115px;
}
.Text {
 font-size: 10px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color:#000;
 line-height:10px;
}
.Text_underline {
 font-size: 10px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 text-decoration:underline;
 color:#73523f;
 line-height:10px;
}
p {
margin-top: 10px;
margin-bottom: 10px;
}

.links {font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight:bold; color: #fff; text-decoration:none}
.links:hover {font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:#000; text-decoration: none; font-weight:bold;}

a.NAV{
display:block;
width:203px;
height:33px;
color:#FF0000;
background:#fff;
text-align:center;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

a.NAV:hover{
color:#0066b2;
text-decoration:none;
background-color:#ff0000;
}
#Navigation {
 position:absolute;
 left:2px;
 top:76px;
 width:203px;
 height:112px;
 z-index:1;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">
<!--
function na_open_window(name, url, left, top, width, height, toolbar, menubar, statusbar, scrollbar, resizable)
{
  toolbar_str = toolbar ? 'yes' : 'no';
  menubar_str = menubar ? 'yes' : 'no';
  statusbar_str = statusbar ? 'yes' : 'no';
  scrollbar_str = scrollbar ? 'yes' : 'no';
  resizable_str = resizable ? 'yes' : 'no';

cookie_str = document.cookie;
  cookie_str.toString();

pos_start  = cookie_str.indexOf(name);
  pos_end    = cookie_str.indexOf('=', pos_start);

cookie_name = cookie_str.substring(pos_start, pos_end);

pos_start  = cookie_str.indexOf(name);
  pos_start  = cookie_str.indexOf('=', pos_start);
  pos_end    = cookie_str.indexOf(';', pos_start);

if (pos_end <= 0) pos_end = cookie_str.length;
  cookie_val = cookie_str.substring(pos_start + 1, pos_end);
  if (cookie_name == name && cookie_val  == "done")
    return;

window.open(url, name, 'left='+left+',top='+top+',width='+width+',height='+height+',toolbar='+toolbar_str+',menubar='+menubar_str+',status='+statusbar_str+',scrollbars='+scrollbar_str+',resizable='+resizable_str);
}

// -->
</script>

</head>
<body background="bg_grey1.gif">
<div id="bg">

<div class="Text" id="Header"></div>
  <div class="Text" id="Main">
  <div id="Text_Pics"></div>
  <div id="ueber_uns"></div>
  <div id="content_text">

<strong>Herzlich Willkommen bei<br>Hip-Hop Movement | Danceschool | Cologne</strong>
<br>
<p align="justify">
Wir feiern am <strong>Samstag, den 22.09.2007</strong> unsere Neueröffnung und wollen euch hiermit alle einladen! (für Großansicht auf Flyer klicken)
<br>
</p>

<a href="javascript:na_open_window('win', 'grafik1.jpg', 0, 0, 1024, 380, 0, 0, 0, 1, 1)" target="_self"><img src="grafik1.jpg" width="350" height="85"></a>
<br>
    <a href="javascript:na_open_window('win', 'grafik2.jpg', 0, 0, 1024, 380, 0, 0, 0, 1, 1)" target="_self"><img src="grafik2.jpg" width="350" height="85"></a>
<br>Euer Hip-Hop Movement-Team

</div>
  <div id="linie"></div>
  <div id="pics"></div>
  <div id="menu">
  <div class="NAV" id="Navigation">

<p>
<br><br><br>
  <a href="index.html" class="unsichtbar" class="NAV">_Home<br><br></a>
         <a href="news.html"  class="unsichtbar" class="NAV">_News<br><br></a>
  <a href="studio.html"  class="unsichtbar" class="NAV">_Studio<br></a>
  <a href="coaches.html" class="unsichtbar" class="NAV"><br>_Coaches<br></a>
  <a href="tanzstile.html" class="unsichtbar" class="NAV"><br>_Tanzstile<br></a>
  <a href="tanzkurse.html" class="unsichtbar" class="NAV"><br>_Tanzkurse<br></a>
  <a href="workshops.html" class="unsichtbar" class="NAV"><br>_Workshops<br></a>
  <a href="media.html" class="unsichtbar" class="NAV"><br>_Media<br></a>
  <a href="links.html" class="unsichtbar" class="NAV"><br>_Links<br></a>
  <a href="booking.html" class="unsichtbar" class="NAV"><br>_Booking<br></a>
  <a href="kontakt.html" class="unsichtbar" class="NAV"><br>_Kontakt<br></a>

</p>
</div>
</div>
</div>
<div class="links" id="Coupon"></div>
</div>

</body>
</html>

  1. Hallo Stephan

    dein

    <div id="pics"></div>

    überblendet den link auf das darunterliegende bild.

    1. Hallo Stephan

      dein

      <div id="pics"></div>

      überblendet den link auf das darunterliegende bild.

      alles klar.. funktioniert doch ;-)

      dank dir, stephan

  2. Hallo stephan,

    habe leider keine Lösung für folgendes Problem finden können und bitte daher auf diesem Wege um Hilfe.

    Tipp: Firefox benutzen und die "Web Developer Toolbar" installieren. Damit hast du allerlei Helferlein an der Hand, z.B. kannst du Elemente umrahmen lassen, um zu sehen, wo sie anfangen und enden (und sich ggf. überdecken) und vieles mehr. Für IE gibt's etwas vergleichbares mit der IE Toolbar.

    Gruß aus Köln-Ehrenfeld,

    Elya

    --
    1. Hallo stephan,

      habe leider keine Lösung für folgendes Problem finden können und bitte daher auf diesem Wege um Hilfe.

      Tipp: Firefox benutzen und die "Web Developer Toolbar" installieren. Damit hast du allerlei Helferlein an der Hand, z.B. kannst du Elemente umrahmen lassen, um zu sehen, wo sie anfangen und enden (und sich ggf. überdecken) und vieles mehr. Für IE gibt's etwas vergleichbares mit der IE Toolbar.

      Gruß aus Köln-Ehrenfeld,

      Elya

      danke aus der südstadt;-)