Bild auf Bild
BekiffterHase
- html
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>
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
Hola!
Hm. home1.png soll ein Hintergrundbild sein? Warum ist es dann keins? Das sollte doch Dein Problem lösen?
@@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'
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
@@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'
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? :-)