Backround png mit Hotspots in Dreamweaver?

[Charon_Mc]

hi leute,

ich hab mal wieder ein wenig probiert

habe ein bild (mit PS bearbeitet) dann in Fireworks Hotspots eingefügt und als html mit bildern exportiert. schau ich mir des im browser an ist alles fein:-)

jetzt zu meinem problem. ich will die grafik eigentlich nur als hintergrund nutzen, damit ich noch ein player(flash), und text und bilder etc. einfügen kann. dies habe ich in dreamweaver probiert. geht aber nicht, da wenn das png einfach importiert ist, man nicht drüber schreiben etc. kann. oder wenn es als backround image ist, die hotspots weg sind. irgendwie schwierig. habs auch schon mit frames versucht, aber irgendwie zu viel für mich blutigen anfänger

hoff ihr könnt mir helfen,

gern auch per mail charonbeatz@gmx.de

lg
sash

PS: ich kann auch gern das png zukommen lassen, fals jemand möchte

[MichaelM]

Hallo,

das kannst Du per CSS machen.
Du musst dabei das Bild wirklich in den Hintergrund stellen um Informationen oder andere Bilder darüber legen zu können.

<style type="text/css">
<!--
body {
	background-image: url(dein_bild.jpg);
	background-repeat: no-repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>

Um diesen Code zu erzeugen gehst Du einfach in DW oben ins Menü
und wählst Modifizieren dann auf Seiteneigenschaften
dann Hintergrundbild jenachdem ob du das Bild wiederholen willst ja oder nein. Dann noch die Seitenränder auf Deine Bedürfnisse einstellen,
oder auf 0 stellen.

Das ganze aber auch mit CSS-Styles direkt in DW möglich und komfortabler.
Diesen Code habe ich mit CSS erzeugt

<style type="text/css">
<!--
body {
	background-attachment: scroll;
	background-image: url(dein_bild.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
-->
</style>

Dafür würde ich dir gerne den Link

Css4you empfehlen

[Charon_Mc]

hi,

vielen dank für die schnelle antwort, aber dann sind die hotspots weg oder ??

das sind bei mir halt navi links. und wenn das im backround ist (hab ich ja schon probiert) dann sind die hotspots inaktiv (weg).

gibts da ne möglichkeit die zu erhalten ?

denn in dw kann ich auf einem backround bild keine hotspots erstellen, oder ich raffs nicht.

lg
sash

[MichaelM]

Da musst Du wohl die Bilder auf denen die Hotspots liegen, auf das Hintergrundbild legen.
Also Bild slicen (zerschneiden, aufteilen) und die Teile in den Vordergrund stellen auf denen Hotspots liegen sollen.
Den Rest in den Hintergrund packen.
Anders gehts nicht..!

[Charon_Mc]

hi,

mit dem slicen und so bin ich nicht so fit, kann ich dir die png mal schicken ? würdest du mir das eventuell kurz machen können ? (fragen kostet ja nix)

slicen mit ps oder ?

[Charon_Mc]

hi, ich hab die slices mit photoshop hinbekommen und auch jetzt als einzlene jpg's.

habe das hintergrundbild eingefügt aber bekomme es nicht center, wenn ich css eingebe (das korrekte) dann verschiebt sich der hintergrund nach oben und ist oben abgeschnitten.

und ausserdem kann ich das hintergrundbild auch nicht tiefer setzten, alles komisch.

vielleicht weiß jemand weiter? css müsste doch mit dreamweaver ohne probleme funzen oder ?

[MichaelM]

Du solltest die Hintergrund Bilder in Divs (Ebenen) packen
und dann positionieren.
Hast Du Dir mal meinen Linkhinweis angeschaut und hast mal draufgeklickt?
In css4you findest Du die Lösung all Deiner Probleme.

[Charon_Mc]

danke erstmal , ich werde es probieren :-)

aber leider bekomm ich den backround nich center, das bild springt dann hoch wenn ich den center code eingebe. ich versuch halt noch irgend wie was.

danke

[Charon_Mc]

hi,

ich habs eben probiert, aber wenn ich es als div tag mache, kann ich nichts darüber schreiben

bitte um hilfe

[MichaelM]

Du kannst natürlich die Bilder auch in Divs in den Hintergrund stellen
und dann andere Informationen bzw. Inhalte auf Div-Hintergrundbilder legen.

Hier mal ein Bespiel:

Es handelt sich um ein Div mit Rahmen, Im Zentrum des Browsers platziert,
einem Hintergrundbild über dem andere Informationen gelegt werden können.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#divMitInhalten {
	background-attachment: scroll;
	background-image: url(Dein_Bild.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	height: 600px;
	width: 500px;
	padding: 10px;
	margin-right: auto;
	margin-left: auto;
	border: 1.0px solid #333333;
}
-->
</style>
</head>

<body>
<div id="divMitInhalten">Das ist ein Div mit Hintergrundbild<br />
und in der Mitte plaziert</div>
</body>
</html>

[Charon_Mc]

hi,

1000 dank, dass klappt schonmal super

sehr nice. jetzt wollte ich die slice jpg's einfügen und komme nicht an die korrekte position, bzw. kann das nicht einfach per "da hin schieben machen", weißt du dazu was ? hier mal die html im anhang (als txt, musst einfach umbenennen).

danke dir schonmal 1000 dank

lg
sash

[MichaelM]

Du mußst jetzt innerhalb des DIV-Containers
neue Divs mit Positionsangaben anlegen und darin deine
Slices aufteilen und positionieren.
Den Text den Du als Anhang zur Verfügung stellst ist doch
der Code den ich Dir als Beispiel gegeben hatte.
Damit kann ich natürlich nichts anfangen.

1. Habe ich Deine Bilder nicht,
2 weiß ich nicht was Du für Vorstellungen hast.
3. Eine fertige Lösung kann ich Dir auch nicht geben.

Einfach Bilder schieben geht nicht..!!

Schau doch einmal länger auf die Seite css4you.de und studiere mal.
Das hilft Dir sicherlich mehr als eine fertig zur Verfügung gestellte Lösung.

[Charon_Mc]

ok danke für deine geduld mit mir

ich werd es versuchen, vielen dank.

also mach ich neue divs in das div und gebe den position 0px damit ganz oben beginnt ;-) mals sehen obs klappt

danke

[Charon_Mc]

hiho,

ich muss sagen nach ein wenig schlau machen gehts vorran.

aber ein problem entsteht. ich habe das erste div in das backrounddiv eingefügt und platziert. dann kommt das zweite. dies hat aber einen anderen 0 punkt was den top wert angeht, ist also immer genau unter dem ersten eingefügten div. schwer zu sagen hier der eigentlich richtige code denk ich. :::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrackSack - Das Projekt</title>
<style type="text/css">
<!--
#divMitInhalten {
	background-attachment: scroll;
	background-image: url(img/Backround_rot.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 800px;
	width: 1066px;
	padding: 10px;
	margin-right: auto;
	margin-left: auto;
	border: 1.0px solid #333333;
}	
.Stil1 {color: #FFFFFF}
#infoButton {
	height: 27px;
	width: 67px;
	top: 0px;
	margin-left: 114px;
}
#BeatsButton {
	height: 27px;
	width: 67px;
	top: 0px;
	margin-left: 260px;
}
-->
</style>
</head>

<body bgcolor="#000000">
<div id="divMitInhalten">
<div id="infoButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_02.jpg" alt="info" width="67" height="27" />
</div>
<div id="BeatsButton">

</div>

  <p class="Stil1">
  <br />
  Das ist ein Div mit Hintergrundbild
  <br />
  und in der Mitte plaziert dalkjdfk d</p>
  <p class="Stil1">dafjjka</p>
  <p>dafkj</p>
  <p align="center">&nbsp;</p>
</div>
</body>
</html>

[Charon_Mc]

hi,

ich hab jetzt alle buttons eingefügt aber bekomm sie nicht höher als so (siehe screenshot):



und dazu der code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TrackSack - Das Projekt</title>
<style type="text/css">
<!--
#divMitInhalten {
	background-attachment: scroll;
	background-image: url(img/Backround_rot.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 800px;
	width: 1066px;
	padding: 10px;
	margin-right: auto;
	margin-left: auto;
	border: 1.0px solid #333333;
}	
.Stil1 {color: #FFFFFF}
#infoButton {
	height: 27px;
	width: 67px;
	top: 0px;
	margin-left: 114px;
}
#BeatsButton {
	height: 27px;
	width: 74px;
	top: 0px;
	margin-left: 259px;
}
#TracksButton {
	height: 27px;
	width: 133px;
	top: 0px;
	margin-left: 406px;
}
#ActsButton {
	height: 27px;
	width: 152px;
	top: 0px;
	margin-left: 626px;
}
#KontaktButton {
	height: 27px;
	width: 108px;
	top: 0px;
	margin-left: 858px;
}
-->
</style>
</head>

<body bgcolor="#000000">
<div id="divMitInhalten">
<div id="infoButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_02.jpg" alt="info" width="67" height="27" />
</div>
<div id="BeatsButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_04.jpg" alt="Beats" />
</div>
<div id="TracksButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_06.jpg" alt="tracks" />
</div>
<div id="ActsButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_08.jpg" alt="acts" />
</div>
<div id="KontaktButton">
<img src="Slices_aus_Photoshop/Bilder/Backround_rot_SLICES_10.jpg" alt="kontakt" />
</div>
  <p class="Stil1">
  <br />
  Das ist ein Div mit Hintergrundbild
  <br />
  und in der Mitte plaziert dalkjdfk d</p>
  <p class="Stil1">dafjjka</p>
  <p>dafkj</p>
  <p align="center">&nbsp;</p>
</div>
</body>
</html>

ich bekomme einfach nicht alle buttons auf "top" oder "padding" = 0px , obwohl es so geschrieben ist.

danke

lg
sash