BekiffterHase: Bild auf Bild

Beitrag lesen

SELF-Forum

Bild auf Bild

BekiffterHase
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln