BekiffterHase: Bild auf Bild

Hallo liebe Community!
Für meine neue Homepage soll ein Imagemap mit einem Frame die Grundlage sein. Das Menü soll aus 5 Buttons bestehen, die sich bei Mouseover ändern und mit einem Unterpunkt verlinkt sind.
Soweit in der Therorie kein Problem, doch die Buttons müssen mittels z-index über dem Hintergrundbild des Imagemap liegen - aber das funktioniert nicht! Der Button wird einfach oben über dem Hintergrundbild angezeigt.
Was habe ich falsch gemacht?
(Mouseover und Verlinkung habe ich noch nicht hinzugefügt!)

<html>  
<head>  
  
</head>  
  
<body bgcolor="#FFFFFF">  
  
<img src="home1.png" top="266px" left="231px" z-index="1" width="125px" height="52px">  
  
<IMG USEMAP="#Design" SRC="layout.png" z-index="2" BORDER="0">  
<map name="Design">  
  <area shape="poly" coords="197,302,196,917,981,918,981,304" href="main.html" target="main">  
</map>  
  
</body>  
  
</html>  

  1. Grüße,
    dich zu wenig mit html, css und Positionierung auseinandergesetzt. wärst du bereit noch 2-3 Stunden in das lesen der tutorials und Beschreibungen von selfhtml zu lesen?

    positionierung is tmi left/top nich tgemacht, du soltlest noch explizit spezifizieren was der bezugspunkt ist (zB offsetparent oder "default position")
    z-index ist hier fehl am platz (bzw nicht dafür wie du es zu verwenden versuchst gedacht) und iframe als grundlage ist eine mäßig gute idee.
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth
  2. Hola!

    Hm. home1.png soll ein Hintergrundbild sein? Warum ist es dann keins? Das sollte doch Dein Problem lösen?

    --
    Vergesst Chuck Norris.
    Sponge Bob kann unter Wasser grillen!
  3. @@BekiffterHase:

    nuqneH

    Was habe ich falsch gemacht?

    Du sprachst davon, einen Frame verwenden zu wollen. Warum Frames out sind und was man stattdessen tun kann.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Nein, ich hab mich eben total vertan - sorry.
      Also das Frame ist jetzt nur später für den Seiteninhalt, nicht für die Buttons. Das funktioniert auch brav ;)

      Ich hab es jetzt alles schon selber geschafft "Bild auf Bild" zu coden, indem ich <div> verwendet habe. Mein nächstes Problem gestaltet sich allerdings schwieriger...
      Bei Mouseover soll nun ein anderer, insgesamt größerer Button angezeigt werden, doch ich weiß nicht wie ich das in den div-Tag einbinden soll und dabei auch die Größenveränderung berücksichtigen kann.

      Mit dem üblichen Mouseover

        
      <html>  
      <head>  
      <script  
      language="JavaScript">  
      button1= new Image();  
      button1.src = "knopf.jpg"  
      button2= new Image();  
      button2.src = "email.jpg"  
      </script>  
      </head>  
      <body>  
      <a href="mailto:deine.mail@gmx.de"  
      onmouseover="austausch1.src='email.jpg';"  
      onmouseout="austausch1.src='knopf.jpg';">  
      <img src="knopf.jpg"  
      border="0" width="71"height="60"  
      name="austausch1">  
      </a>  
      </body>  
      </html>  
      
      

      konnte ich es nicht lösen.

      Das hier ist mein Quelltext - bis jetzt

      <html>  
      <head>  
      <style type="text/css">  
      #bg  
      {  
         z-index:2;  
         background:url(layout.png);  
         position:fixed;  
         top  
         left  
         border: 0;  
      }  
        
      #home  
      {  
         z-index:1;  
         position:fixed;  
         top: 239px;  
         left: 188px;  
         border: 0;  
      }  
        
      #grafiken  
      {  
         z-index:1;  
         position:fixed;  
         top: 239px;  
         left: 315px;  
         border: 0;  
      }  
        
      #malen  
      {  
         z-index:1;  
         position:fixed;  
         top: 239px;  
         left: 442px;  
         border: 0;  
      }  
      #fotos  
      {  
         z-index:1;  
         position:fixed;  
         top: 239px;  
         left: 569px;  
         border: 0;  
      }  
      #imp  
      {  
         z-index:1;  
         position:fixed;  
         top: 239px;  
         left: 696px;  
         border: 0;  
      }  
      #main  
      {  
         z-index:1;  
         position:fixed;  
         left: 197px;  
         top: 299px;  
        
      }  
      #frame  
      {  
         z-index:1;  
         position:inherit;  
         width:801;  
         height:600;  
         frameborder: 0;  
         border:0;  
         scrolling:no;  
         noresize  
         FILTER:chroma (color=#FFFFFF);  
      }  
      </style>  
        
      </head>  
        
      <body id="bg" style="no-repeat">  
        
      <div id="home"><img src="home1.png"></div>  
      <div id="grafiken"> <img src="grafiken1.png"></div>  
      <div id="malen"> <img src="malen1.png"></div>  
      <div id="fotos"> <img src="fotos1.png"></div>  
      <div id="imp"> <img src="imp1.png"></div>  
        
      <div id="main">  
        <iframe id="frame" src="main.html" name="main";>  
        </iframe>  
      </div>  
        
      </body>  
      </html>  
      
      

      der Button home1.png (125x52px) soll nun bei Mouseover durch den Button home2.png (162x187px) ersetzt werden und einen Link zu home.html darstellen.

      Kann man verstehen was ich möchte :-P ?
      Hoffe man kann mir helfen...

      Liebe Grüße

      1. @@BekiffterHase:

        nuqneH

        Also das Frame ist jetzt nur später für den Seiteninhalt, nicht für die Buttons.

        Das war mir schon klar. Genau dafür solltest du keinen Frame verwenden.

        Das funktioniert auch brav ;)

        Eben nicht. Deeplinking, um nur ein Stichwort zu nennen.

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. Das war mir schon klar. Genau dafür solltest du keinen Frame verwenden.

          Das funktioniert auch brav ;)

          Eben nicht. Deeplinking, um nur ein Stichwort zu nennen.

          Achso... hm, also ich hatte bis jetzt noch nie ein Problem damit, aber danke - dann werde ich mir im Laufe des Tages mal Ihre verlinkte Website durchlsen.

          Und das Mouseover-Problem? :-)