nicht angemeldet
HTML: Mouseover-Effekt, Bild fixieren - Wie?
Hallo,
ich habe folgendes Problem.
Ich habe ein Hintergrundbild eingebunden
-> Code:
<style type="text/css">
<!--
body {
background-image: url(hintergrund.jpg); background-repeat:no-repeat; background-position:center; background-attachment:fixed;
}
-->
</style></head>
Also um es verständlich zu machen, gebe ich mal ein Bsp. an.
Z.B. bei diesem Bild hier:
http://www.iabeef.org/May/G.%20Beef%20Recipes%20&%20Photos%20from%202005%5CChili%20Beef%20Express%20-%20Color.JPG
Die Homepage sollte für 1024*768 optimiert werden.
Ich würde gerne auf eine Bohne zeigen, diese soll erst hervorkommen und bei klicken soll ein neues Fenster geöffnet werden.
Nun zu meinem Problem:
Wie schaffe ich es am besten dort ein "Rollover-Bild" einzufügen?
-> Wäre das mit eine Tabelle das einfachste?
Wie kann ich, falls ich das mit einer Tabelle lösen soll, die Tabelle/Rolloverbilder fixieren, so das sie bei einer anderen Auflösung sich nicht verschiebt?
Bitte um Hilfe.
Vielen Dank im voraus!
Max
-
Hallo nochmal,
ich habe folgendes probiert, doch so funktioniert es ja nicht.
Könntet ihr mir zu diesem Code eine Alternative sagen?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-image: url(hintergrund.jpg); background-repeat:no-repeat; background-position:center; background-attachment:fixed; usemap="#Map";}
-->
</style></head><body>
<map name="Map">
<area shape="rect" coords="1982,1171,2198,1334" href="#main.html" target="_blank"></body>
</html>-
Ok und noch einmal Hallo,
nun habe ich inzwischen eine möglichkeit herausgefunden.
Ich verwende eine Ebene.
Doch wie kann ich sie fixieren?
Ich habe sie schon "Absolute" gesetzt doch trotzdem verschiebt sie
dich, wieso das?Bitte helft mir.
Hier mein bisheriger Quelltext.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-image: url(hintergrund.jpg); background-repeat:no-repeat; background-position:center; background-attachment:fixed;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head><body>
<div id="Layer1" style="position:absolute; width:75px; height:58px; z-index:1; left: 541px; top: 98px;"><img src="gaestebuch.JPG" width="75" height="53"></div></body>
</html>
-
-
Hallo,
Also um es verständlich zu machen, gebe ich mal ein Bsp. an.
Z.B. bei diesem Bild hier:http://www.iabeef.org/May/G.%20Beef%20Recipes%20&%20Photos%20from%202005%5CChili%20Beef%20Express%20-%20Color.JPG
- 4.2 Mb für ein Bild?
- 2669 x 3379 Pixel
vielleicht geht's ne Nummer kleiner?
Gruß plan_B
--
*®*´¯`·.¸¸.·-
Hallo,
Also um es verständlich zu machen, gebe ich mal ein Bsp. an.
Z.B. bei diesem Bild hier:http://www.iabeef.org/May/G.%20Beef%20Recipes%20&%20Photos%20from%202005%5CChili%20Beef%20Express%20-%20Color.JPG
- 4.2 Mb für ein Bild?
- 2669 x 3379 Pixel
vielleicht geht's ne Nummer kleiner?
Gruß plan_B
Oh sorry.
Hier ein anderes bild, also angenommen, ich würde das als Hintergrundbild nehmen. so möchte ich das wenn ich mit der Maus auf eine Chilischote zeige, das sie größer wird (Mouseover)und dann z.B. "Gästebuch" erscheint. und wenn ich draufklicke soll in einem neuen Festern das Gästebuch erscheinen.
Das wäre ja alles kein Problem wenn ich das Bild einfach ganz normal als Bild einfügen würde (<img src="hintergrund.jpg">) und gerade ein paar Areas (Hotspots) auf das bild plazieren würde. Doch so wären oben am Fenster ja noch weiße Ränder, diese könnte ich natürlich auch wieder mit einer Farbe (background-colour) wegmacen, doch dann sieht das ja so abgeschnitten aus, was ich ja nicht möchte.
Und wenn ich es als Hintergrund bild einfüge
(background-image: url(hintergrund.jpg); background-repeat:no-repeat; background-position:center; background-attachment:fixed;)
dann ist das zwar so wie ich es möchte, aber ich kann keine Areas (Hotspots) einfügen.Da dachte ich mir, ich werde einfach ein paar neue Ebenen hinzufügen
(<div id="Layer1" style="position:absolute; width:75px; height:58px; z-index:1; left: 541px; top: 98px;"><img src="gaestebuch.JPG" width="75" height="53"></div>)doch diese verschieben sich einfach so und ich kann sie nicht fixieren.
Wisst ihr nun was ich für ein Problem hab?
Vielen Dank im voraus!
Max