Texte mit Rollover über Bild - vorgehen ??

mv75 · 07.05.2008, 09:34

Hallo Zusammen
Ich bin neu hier im Forum und möchte Euch um einen Tipp bitten.

Ich habe schon vor etwas längerer Zeit einmal einen Dreamweaver Kurs gemacht. Seit dem gibt es aber eine neue Version und sicher auch neue Arbeitsmethoden.

Ich möchte auf meiner künftigen Homepage als Startseite einfach ein Bild einfügen und auf diesem Bild die Texte (Galerie Home Links usw) mit den entsprechenden Links auf die weiteren Seiten der Homepage. Das Bild sollte auswechselbar sein, ohne dass an diesen Texten, die ich gerne mit einem Rollover versehen möchte etwas zu ändern oder anpassen ist.

Gerne würde ich auch das Bild in einige Bildteile unterteilen, um dem Bilderklau etwas entgegen-zuwirken. Slices, hiess dies glaube ich ??

Ich dachte dabei an eine Tabelle und hinter dieser Tabelle befindet sich das Bild. In der Tabelle sind dann die Texte.

Nun meine Frage nach der besten Vorgehensweise. Ist dies Eurer Meinung nach der beste und einfachste Weg, oder gibt es da heute etwas anderes, besseres ???? Wie gehe ich da vor ? Angepasstes Bild einfügen im Dreamweawer oder zuerst über Photoshop ?? Ich wäre dankbar wenn mir jemand kurz die einzelnen Schritte / Reihenfolge nennen kann.

Ich würde im übrigen mit den neuen CS3 Versionen arbeiten.

Ich danke Euch im voraus für die Hilfe. Vielen Dank.

Viele Grüsse
mv75

webcreate · 07.05.2008, 10:22

Das mit dem Slice wegen Bilderklau würde ich ganz weglassen.
Wenn ich will, editiere ich lokal Dein HTML Code, so das der Text weg ist und mache dann einen Screenshot. Das kostet mich nur 10Sek. und ich habe die Grafik.
Es gibt keinen Schutz vor Bilderklau!

Was meinst Du mit einem RollOver? Das sich die Linkfarbe ändert? Das kannst Du ganz einfach mit CSS machen.

Ansonsten würde ich einfach einen DIV-Container erstellen, der dann eine Hintergrundgrafik hat, darin dann eine Liste (UL) die dann die Links beinhaltet.
Die Hintergrundgrafik kannst Du dann ja via JavaScript wechseln lassen. Entweder über einen Timer, oder via Zuffi beim Seitenaufruf.

mv75 · 07.05.2008, 11:02

Hallo Mark
Erst einmal vielen Dank für Deine schnelle Antwort.

Mit Rollover meine ich genau das wenn ich mit der Maus über den Text fahre, dieser dann die Farbe ändert. Das ist alles.

DIV- Container ?? Entschuldige meine Unwissenheit. Aber ist das eine neue Funktion im Dreamweaver CS3 ?
Ich werde mal in der Hilfe nachlesen, wobei es sich dabei handelt.
Ist das eine grosse Sache ??

Das Hintergrundbild muss sich in dem Sinne austauschen lassen, dass ich wenn ich diese eine Seite kopiere und für eine weitere Seite innerhalb der gesamten Homepage wiederverwenden möchte, einfach ein anderes Bild einfügbar sein soll.

Viele Grüsse und Danke
Mathias

webcreate · 07.05.2008, 11:50

Was DW da kann, kann ich Dir nicht sagen, ich arbeite nicht damit.
Aber DW ist auch nur ein Editor! Der macht nicht mehr, als Code zu schreiben.

Hier mal ein Ansatz, wie man es machen kann.

HTML-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>Wechselndes Hintergrundbild</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

	#linkbox{
		background: #eee;
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 1em;
		width: 500px;
		height: 150px;
		padding: 10px;
	}

	#linkbox li{
		float: left; 
		width: 50px;
		list-style: none; 
	}

	#linkbox li a{
		display: block;
		text-decoration: none;
		color: #f00;
	}

	#linkbox li a:hover, 
	#linkbox li a:active{
		color: #0f0;
		text-decoration: underline;
	}
</style>
<script type="text/javascript">
/*<![CDATA[*/
	var imgArray = new Array();
	// Array-Elemente
	imgArray[imgArray.length] = 'img/bild1.jpg';
	imgArray[imgArray.length] = 'img/bild2.jpg';
	imgArray[imgArray.length] = 'img/bild3.jpg';
	// Für weitere Bilder einfach die letzte Zeile duplizieren und ein neues Bild angeben.

	function changeBackground(imgNo)
	{
		document.getElementById('linkbox').style.backgroundImage = "url("+imgArray[imgNo]+")";
	}
/*<]]>*/
</script>
</head>
<!--
	ANWENDUNG:
	onload="changeBackground(0)" = Das erste Bild aus dem JavaScript Array
	onload="changeBackground(1)" = Das zweite Bild aus dem JavaScript Array
	onload="changeBackground(2)" = Das dritte Bild aus dem JavaScript Array
	usw.
-->
<body onload="changeBackground(1)">
	<div id="linkbox">
		<ul>
			<li><a href="#">link1</a></li>
			<li><a href="#">link2</a></li>
			<li><a href="#">link3</a></li>
		</ul>
	</div>
</body>
</html>

mv75 · 07.05.2008, 12:40

Hallo Mark
Vielen Dank für Deine Mühe.

Ich habe mir den Code einmal angesehen und in den DW kopiert um ihn zu testen. So wie es scheint kann ich den Code schon fast für meine HP gebrauchen.

Darf ich Dich noch etwas fragen ? Du hast wahrscheinlich für diese Änderung 5 Sekunden :-)

Der Code ist jetzt für drei zufällige Bilder. Wie würdest Du den Code schreiben, wenn ein fixes Bild verwendet wird ?

Ach ja... Oben und auf der linken Seite sollte noch ein Abstand oder Rand sein.

Ich werde heute Abend einmal eine Site bauen und das Bild da einfügen.
Vielleicht komme ich noch einmal um zu fragen wegen der Positionierung der Texte. Ich werde dies aber erst einmal versuchen selber zu machen.

Du hast mir sehr geholfen. Vielen Dank

Mathias

webcreate · 07.05.2008, 12:56

Nein nein, da ist kein zufälliges Bild bei.
Über den onload Befehl wird ja ganz klar definiert, welches Bild geladen werden soll.
Dazu doch extra der Anwendungskommentar.
Das was Du mit den Abständen haben willst lässt sich ja via CSS erreichen.
Dazu wahrscheinlich sehr nützlich: www.css4you.de