[CSS] Mouseover erstellen

**Thomas41587** · 01.02.12, 13:56

Hallo,

ich würde gerne bei meiner Homepgae einige Grafiken mit mouseover versehen. Hatte angefangen, es mit HTML zu machen, aber hab dann gelesen, dass es schöner über CSS wäre. Außerdem würde es so auch bei Browsern ohne Javasrcipt gehen.
Die Lösung für HTML:

Code:

<a href="index.html" onmouseover="home.src='img/home_aktiv.png';" onmouseout="home.src='img/home.png';">
<img src="/img/home.png" width="147" height="82" name="home"></a>

und im head bereich eben noch:

Code:

<script language="JavaScript">
button1= new Image();
button1.src = "img/home.png"
button2= new Image();
button2.src = "img/home_aktiv.png"
</script>

Der Lösungsansatz für CSS, den ich bisher gefunden habe ist im head bereich:

Code:

<style type="text/css">
.bildwechsel {width:147px; height:82px; background:url("img/home.png");}
.bildwechsel:hover {background:url("img/home_aktiv.png");}
</style>

und im body:

Code:

<div class="bildwechsel"></div>

Das Problem ist jetzt nur, dass die Grafiken jetzt immer in einer neuen Zeile sind und ich sie einfach nicht Zentriert bekomme! habe es schon mit "text-align: center;" probiert, zeigt aber null Wirkung. Ebenso hab ich für das Absatzproblem "<a class="bildwechsel"></a>" probiert, aber dann wird die Grafik gar nicht geladen....
Weiß jemand Rat?
Vielen Dank jetzt schon

**posixpascal** · 01.02.12, 20:37

Du willst es also über CSS machen? Dann entfern doch den Javascript Code.

Poste uns, nachdem du den Javascript Code entfernt hast, einfach mal die gesamte Seite, dann hab ich auch einen besseren Überblick.

**Thomas41587** · 01.02.12, 20:57

Der Javascript Code ist ja weg. Das war ja nur meine erste Idee, bis ich eben gelesen habe, dass es über CSS besser ist.
Meine HTML sieht so aus:

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" />
<link rel="SHORTCUT ICON" href="icon.png" type="image/x-icon">
<title>fr1edmann.de ComputerService</title>
<style type="text/css">
@import url("style.css");
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p align="center"><img src="/img/logo.png" width="254" height="44" /></p>
<p align="center"><img src="/img/computer-service.png" width="577" height="80" /></p>
<p align="center">&nbsp;</p>
<p align="center"><a href="index.html"><img src="/img/home_aktiv.png" width="147" height="82" /></a>
<a href="news.html"><img src="/img/news.png" width="147" height="82" /></a>
<a href="computer_reperatur.html"><img src="/img/computer_reperatur.png" width="147" height="81" /></a>
<a href="pc_zusammenstellung.html"><img src="/img/pc_zusammenstellung.png" width="147" height="81" /></a>
<a href="kontakt.html"><img src="/img/kontakt.png" width="147" height="82" /></a>
<a href="impressum.html"><img src="/img/impressum.png" width="147" height="82" /></a></p>
<p align="center">&nbsp;</p>
  <p class="Text" id="Text"><br />
    blablabla</p>
</body>
</html>

Meine CSS:

Code:

body {
	background-color: #ffffd2;
	text-align: center;
}
.Text {
	background-color: #ffffd2;
	text-align: center;
	max-width: 882px;
	margin:0 auto;
}

und der relevante Teil der HTML ist dieser:

Code:

<p align="center"><a href="index.html"><img src="/img/home_aktiv.png" width="147" height="82" /></a>
<a href="news.html"><img src="/img/news.png" width="147" height="82" /></a>
<a href="computer_reperatur.html"><img src="/img/computer_reperatur.png" width="147" height="81" /></a>
<a href="pc_zusammenstellung.html"><img src="/img/pc_zusammenstellung.png" width="147" height="81" /></a>
<a href="kontakt.html"><img src="/img/kontakt.png" width="147" height="82" /></a>
<a href="impressum.html"><img src="/img/impressum.png" width="147" height="82" /></a></p>

ich habe für jeden Link zwei Grafiken, eine "normale" und eine Farblich hervorgehobene. Die Seite auf der man gerade ist, ist Farblich hervorgehoben. Jetzt hätte ich gerne, dass man beim drüber fahren über eine Grafik, die aktive Grafik sieht ([name]_aktiv.png)
Hoffe, das ist verständlich verständlich ausgedrückt

**posixpascal** · 01.02.12, 21:16

Erstens: Du lädst die CSS-Datei zweimal.

Zitat:

Nimm nur <link>, denn Link ist besser. Also streiche den Part aus deiner Datei:

Zitat:

Du kannst das, so wie du das realisieren willst, nicht in CSS realisieren.
Du musst Javascript nehmen, es geht nicht anders.

Du könntest es mit CSS realisieren, wenn du Background-Images nutzen würdest, das bringt aber herzlich wenig, da du so nur mehr Chaos hast.

Kurz: Bleib beim Javascript. Die Leute die Javascript deaktiviert haben oder Mobil unterwegs sind, sehen eben nur das Originalbild.

Zitat:

Ist auch sehr billig gelöst & sieht grausam aus. Du solltest eventuell ein vorgefertigtes Javascript-Plugin nehmen oder jQuery.
Auch wichtig: Du solltest die Images preloaden, denn bei langsamen Verbindungen kann es vorkommen, dass der Button verschwindet beim Benutzer (da das Bild nachladen muss).

Dazu aber irgendwann anders mehr.
Mit CSS funktioniert der Kram aber nicht. Wenn es unbedingt doch CSS sein muss, dann musst du jedem A-Element eine Klasse/id zuweisen und dann anstatt des schicken <img> Tags, Background-Images nutzen.

CSS "OnmouseOver" triggerst du übrigens mit :hover.

Zitat:

a:hover { background-image: url('google.png'); }

Aber damit kannst du eben nur das Background-Image ändern, nichts am aktuellen Content.

**Thomas41587** · 01.02.12, 21:28

Zitat:

Zitat von posixpascal

Ist auch sehr billig gelöst & sieht grausam aus. Du solltest eventuell ein vorgefertigtes Javascript-Plugin nehmen oder jQuery.
Auch wichtig: Du solltest die Images preloaden, denn bei langsamen Verbindungen kann es vorkommen, dass der Button verschwindet beim Benutzer (da das Bild nachladen muss).

Danke für deine Antwort. Den doppelten import hatte ich noch drin weil ich testen wollte, wo der unterschied liegt. Kommt natürlich noch raus.
Schade irgendwie, dass es nicht mit CSS geht...
Was ist an dem Code billig bzw grauenhaft? Und wie sieht es denn "schön" aus?
Wo bekomm ich so ein Plugin her?
Die Bilder werden natürlich vorgeladen, siehe erster post (das ist ja der preload, oder?)

Mein eigentlicher Grund für die Suche nach einer alternative für den mouseover war eigentlich der, dass ich am anfang dann ewig viel von dem Javascript-preload-müll stehen habe, was mir einfach optisch überhaupt nicht gefallen hat (jaja, wer schaut sich später schon quelltexte an, aber trotzdem)

**posixpascal** · 02.02.12, 05:32

So, ich bin nun am PC.

Ich würde dir vorschlagen du nimmst jQuery als Javascript-Framework, es macht die Dinge wirklich einfach.
Mein Code hier ist nicht gerade ausgefeilt und durchgehend getestet.
Basiert größtenteils auf dem neuen HTML5-Data Attribut, aber auch alte Browser werden supported.

Ich habe mal eine Test-Seite angelegt hier:
http://pascalraszyk.de/boxxy_ho...xxy_hover/

Der folgende Code, ich habe die Stellen fett markiert die wichtig sind:

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>TestDokument</title>
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script>
	
			$(function(){
				// preload part
				var cache = [];
				$("img[data-preload=true]").each(function(){
					var cacheImage = document.createElement('img');
					cacheImage.src = $(this).data('mouseover');
					cache.push(cacheImage);
				});

				// Funktion zum Bilder-Wechsel
				function swap_images(){
					f = $(this);
					old_image = f.attr("src");
					f.attr("src", f.data('mouseover'));
					f.data('mouseover', old_image);
				}

				// Funktion zum Bilder Wechsel über <a> oder sonstiges:
				function swap_images_name(){
					f = $("img[data-name=" + $(this).data('target') + "]");
					
					old_image = f.attr("src");
					f.attr("src", f.data('mouseover'));
					f.data('mouseover', old_image);
				}
				
				$("a.mouseover")
					.on("mouseover", swap_images_name)
					.on("mouseout", swap_images_name);
				$("img.mouseover")
					.on("mouseover", swap_images)
					.on("mouseout", swap_images);
			});

		</script>
	</head>
	<body>
		<h1>Hover me please. :)</h1>
		<img src="bild1.jpeg" width="200" height="200" data-preload="true" class="mouseover" data-mouseover="bild2.gif" />
		<br /><br />
		<a href="#" class="mouseover" data-preload="true"  data-target="blubb">Hover me, to hover something else.</a>
		<br /><br />
		<img src="bild2.gif" data-preload="true" width="200" height="200" data-name="blubb" data-mouseover="bild1.jpeg" />
	</body>
</html>

Im Prinzip funktioniert die Hover-Funktion so:

Ein <img> hat folgende Attribute:

* class="mouseover" / Muss vorhanden sein damit MouseOver getriggert wird, lässt sich aber auch umgehen.. aber spielt nun keine Rolle.
* data-name="name" / Ein spezifischer Name, wird aber nur benötigt wenn du das Element "hovern" magst, wenn die Maus nicht direkt über dieses Element fährt.
* data-preload=true/false / Steht hier "true", so wird dieses Bild automatisch in den Zwischenspeicher geladen.
* data-mouseover="pfad zum hover bild" / Sobald das Element ausgelöst wird, wird das aktuelle SRC-Attribut mit dem DATA-MouseOver-Attribut getauscht.

Jedes andere Element (in meinem Fall nur <a>-Elemente (ist aber anpassbar)) kann noch folgendes Attribut haben:
* data-target="name" / Sobald die Maus über das <a>Element fährt, wird das Bild mit data-name="%target" gehovert.

<img src="bild1.jpg" data-mouseover="bild2.jpg" class="mouseover" />

Wenn du kein jQuery magst, müssen wir uns nochmal hinsetzen und den Kram in purem Javascript machen, das könnte aber länger dauern

.
Warum kompliziert, wenns auch einfach geht :o

Hoffe das entspricht erstmal deinen Erwartungen.

#####################
Bei deinem Code wäre es also so:

<p align="center"><img src="/img/logo.png" data-preload="true" data-mouseover="/img/logo_aktiv.png" class="mouseover" width="254" height="44" /></p>
<p align="center"><img src="/img/computer-service.png" data-preload="true" data-mouseover="/img/computer-service_aktiv.png" class="mouseover" width="577" height="80" /></p>

Hoffe ich habe dir geholfen

**Thomas41587** · 02.02.12, 17:57

ähm....hilfe!

das war mein erster Gedanke. Zweiter Gedanke: DANKE!
den teil der zwischen <script></script> steht, muss ich den anpassen in irgend einer weiße? Und muss ich ihn so komplett verstehen?

oder ist das einfach nur vorgefertigt und es müssen nur die jeweiligen img-tags angepasst werden?

sieht ja mal richtig lustig aus auf deiner homepage

und gibt es eine "quelle" für diese ganzen funktionen?

**posixpascal** · 02.02.12, 18:04

Du kannst die beiden Inhalte in <script> übernehmen. Da musst du nichts ändern.
Du musst lediglich deine Image-Tags anpassen.

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" /> <link rel="SHORTCUT ICON" href="icon.png" type="image/x-icon"> <title>fr1edmann.de ComputerService</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script>
	
			$(function(){
				// preload part
				var cache = [];
				$("img[data-preload=true]").each(function(){
					var cacheImage = document.createElement('img');
					cacheImage.src = $(this).data('mouseover');
					cache.push(cacheImage);
				});

				// Funktion zum Bilder-Wechsel
				function swap_images(){
					f = $(this);
					old_image = f.attr("src");
					f.attr("src", f.data('mouseover'));
					f.data('mouseover', old_image);
				}

				// Funktion zum Bilder Wechsel über <a> oder sonstiges:
				function swap_images_name(){
					f = $("img[data-name=" + $(this).data('target') + "]");
					
					old_image = f.attr("src");
					f.attr("src", f.data('mouseover'));
					f.data('mouseover', old_image);
				}
				
				$("a.mouseover")
					.on("mouseover", swap_images_name)
					.on("mouseout", swap_images_name);
				$("img.mouseover")
					.on("mouseover", swap_images)
					.on("mouseout", swap_images);
			});

		</script> </head> <body> <p align="center"><img src="/img/logo.png" data-preload="true" data-mouseover="/img/logo_aktiv.png" class="mouseover"  width="254" height="44" /></p> <p align="center"><img src="/img/computer-service.png" data-preload="true" data-mouseover="/img/computer-service_aktiv.png" class="mouseover" width="577" height="80" /></p> <p align="center">&nbsp;</p> <p align="center"><a href="index.html"><img data-preload="true" data-mouseover="/img/home_aktiv.png" class="mouseover"  src="/img/home_aktiv.png" width="147" height="82" /></a> <a href="news.html"><img src="/img/news.png" data-preload="true" data-mouseover="/img/newsaktiv.png" class="mouseover" width="147" height="82" /></a> <a href="computer_reperatur.html"><img src="/img/computer_reperatur.png" data-preload="true" data-mouseover="/img/computer_reperatur.png" class="mouseover" width="147" height="81" /></a> <a href="pc_zusammenstellung.html"><img src="/img/pc_zusammenstellung.png" data-preload="true" data-mouseover="/img/pc_zusammenstellung_aktiv.png" class="mouseover" width="147" height="81" /></a> <a href="kontakt.html"><img src="/img/kontakt.png" data-preload="true" data-mouseover="/img/kontakt.png" class="mouseover" width="147" height="82" /></a> <a href="impressum.html"><img src="/img/impressum.png" data-preload="true" data-mouseover="/img/impressum_aktiv.png" class="mouseover" width="147" height="82" /></a></p> <p align="center">&nbsp;</p> <p class="Text" id="Text"><br />
    blablabla</p> </body> </html> 

Ich weiß, es sieht ziemlich gruselig aus, ist es aber nicht.
Ich habe es nur in Chrome getestet, aber du kannst es auf der Test-Seite ja mit anderen Browsern testen.

Das eigentliche was der Javascript Code macht ist folgender:
Sobald die Maus über ein Bild mit der Klasse (class

MouseOver fährt, tausche das aktuelle Bild mit dem Bild bei "data-mouseover=".
Sobald die Maus das Bild verlässt, mache dies wieder rückgängig.

**Thomas41587** · 02.02.12, 18:10

Der obere Teil ist echt verwirrend...wie soll man auch auf sowas kommen, bin froh wenn ich mit meinem html halbwegs klar komm

Aber das erleichtert einem die Arbeit doch echt um einiges....und vor allem ist es weniger arbeit als in html. Wobei ja beides den gleichen zweck erfüllt

**posixpascal** · 02.02.12, 18:19

Brauchst keine großen jQuery Kenntnisse. Das kleine Skript oben kannst du nach 3 Tagen auch schreiben.

Würden wir es ohne ein Javascript-Framework (in unserem Fall jQuery) machen, würde sich der Grad der Komplexitäts noch einmal ⁹ rechnen.

Vorallem ist dein Code vollends W3C-Konform & du zeigst allen dass du auf den HTML5-Zug aufspringst (höhö). Kannst gerne hier in der Börse paar Javascript-Geeks fragen ob die den Code noch optimieren, ist wirklich nur eine schnelle Lösung gewesen.

Wenns Probleme gibt, einfach melden ^^

**Thomas41587** · 03.02.12, 08:42

Vielen dank für deine Hilfe!

Werde den Code heute oder morgen mal auf allen Seiten einbinden. Wenn ich noch frag. Hab oder etwas nicht funktioniert, meld ich mich nochmal. Aber denke mal, dass alles funktioniert

**RealDealOne** · 03.02.12, 09:25

posixpascal,
dein erster Code war hervorragend !

ps:
Süßes Mädel

**Thomas41587** · 04.02.12, 11:45

So, habe es auf meiner Seite eingebaut...und was soll ich sagen außer: TOP! Es funktioniert genau so wie es soll, vielen Dank dafür!

Hätte aber jetzt noch eine Frage dazu: Da ich 6 Seiten habe, auf denen dieses Script mit dem mouseover eingebunden wird, wäre es doch von Vorteil das Script "zentral" abzulegen. Also in einer datei, die in der HMTL dann geladen wird (denke gerade ähnlich wie bei CSS: 1 Datei - alle HMTLs können drauf zurückgreifen). Oder liege ich mit meiner Idee falsch bzw macht man sowas nicht?

**posixpascal** · 04.02.12, 12:35

Natürlich macht man sowas. Das hat mehrere Vorteile, du kannst das Script zentral ändern und natürlich wird die Bandbreite reduziert da die Datei gecached wird.

Das realisierst du am Schönsten mit folgendem Snippet:

Zitat:

In die "hover.jquery.js" schreibst nun folgendes:

Code:

	$(function(){
				// preload part
				var cache = [];
				$("img[data-preload=true]").each(function(){
					var cacheImage = document.createElement('img');
					cacheImage.src = $(this).data('mouseover');
					cache.push(cacheImage);
				});

				// Funktion zum Bilder-Wechsel
				function swap_images(){
					f = $(this);
					old_image = f.attr("src");
					f.attr("src", f.data('mouseover'));
					f.data('mouseover', old_image);
				}

				// Funktion zum Bilder Wechsel über <a> oder sonstiges:
				function swap_images_name(){
					f = $("img[data-name=" + $(this).data('target') + "]");
					
					old_image = f.attr("src");
					f.attr("src", f.data('mouseover'));
					f.data('mouseover', old_image);
				}
				
				$("a.mouseover")
					.on("mouseover", swap_images_name)
					.on("mouseout", swap_images_name);
				$("img.mouseover")
					.on("mouseover", swap_images)
					.on("mouseout", swap_images);
			});

Danach sollte es ohne Probleme funktionieren.

Edit: Wenn du es noch schneller haben magst, kannst du das Script natürlich auch komprimieren. Aber das kannst du auch am Ende machen, wenn deine Seite produktiv geht.

**Thomas41587** · 04.02.12, 12:55

Okay, dann werd ich das direkt mal ändern, danke!
wieso fällt jetzt eig das "<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>" raus?

EDIT: Jetzt gehts nicht mehr

EDIT2: Okay, "<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>" fällt nicht raus. Das war der Fehler.
Dh. in der HTML muss das stehen:

Code:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/hover.jquery.js"></script>

**posixpascal** · 04.02.12, 13:24

Das <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> darf natürlich nicht rausfallen & muss als erstes eingebunden werden.

Dein Code sollte so aussehen:

Inhalt der hover.jquery.js Datei

PHP-Code:

  $(function(){
                // preload part
                var cache = [];
                $("img[data-preload=true]").each(function(){
                    var cacheImage = document.createElement('img');
                    cacheImage.src = $(this).data('mouseover');
                    cache.push(cacheImage);
                });

                // Funktion zum Bilder-Wechsel
                function swap_images(){
                    f = $(this);
                    old_image = f.attr("src");
                    f.attr("src", f.data('mouseover'));
                    f.data('mouseover', old_image);
                }

                // Funktion zum Bilder Wechsel über <a> oder sonstiges:
                function swap_images_name(){
                    f = $("img[data-name=" + $(this).data('target') + "]");
                    
                    old_image = f.attr("src");
                    f.attr("src", f.data('mouseover'));
                    f.data('mouseover', old_image);
                }
                
                $("a.mouseover")
                    .on("mouseover", swap_images_name)
                    .on("mouseout", swap_images_name);
                $("img.mouseover")
                    .on("mouseover", swap_images)
                    .on("mouseout", swap_images);
            });

Dann in jeder HTML Datei sollte es ungefähr so aussehen:

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" /> 
		<link rel="SHORTCUT ICON" href="icon.png" type="image/x-icon"> 
		<title>fr1edmann.de ComputerService</title> 
		<link href="style.css" rel="stylesheet" type="text/css" /> 
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
                 <!-- Bitte den Pfad in "src" anpassen, wo die Datei liegt. ok? -->
		<script type="text/javascript" src="hover.jquery.js"></script>
	</head> 
	<body> 
		<p align="center">
			<img src="/img/logo.png" data-preload="true" data-mouseover="/img/logo_aktiv.png" class="mouseover"  width="254" height="44" />
		</p> 
		<p align="center">
			<img src="/img/computer-service.png" data-preload="true" data-mouseover="/img/computer-service_aktiv.png" class="mouseover" width="577" height="80" />
		</p>
		<p align="center">&nbsp;</p>
		<p align="center">
			<a href="index.html">
				<img data-preload="true" data-mouseover="/img/home_aktiv.png" class="mouseover"  src="/img/home_aktiv.png" width="147" height="82" />
			</a> 
			<a href="news.html">
				<img src="/img/news.png" data-preload="true" data-mouseover="/img/newsaktiv.png" class="mouseover" width="147" height="82" />
			</a> 
			<a href="computer_reperatur.html">
				<img src="/img/computer_reperatur.png" data-preload="true" data-mouseover="/img/computer_reperatur.png" class="mouseover" width="147" height="81" />
			</a> 
			<a href="pc_zusammenstellung.html">
				<img src="/img/pc_zusammenstellung.png" data-preload="true" data-mouseover="/img/pc_zusammenstellung_aktiv.png" class="mouseover" width="147" height="81" />
			</a> 
			<a href="kontakt.html">
				<img src="/img/kontakt.png" data-preload="true" data-mouseover="/img/kontakt.png" class="mouseover" width="147" height="82" />
			</a> 
			<a href="impressum.html">
				<img src="/img/impressum.png" data-preload="true" data-mouseover="/img/impressum_aktiv.png" class="mouseover" width="147" height="82" />
			</a>
		</p> 
		<p align="center">&nbsp;</p> 
		<p class="Text" id="Text">
			<br />
			blablabla
		</p> 
	</body>
</html>

Wichtig ist nur, dass du erst jQuery einbindest & dann das andere Hover-Script, da dieses ohne jQuery nicht funktioniert.

Sollte nun funktionieren.

Edit: Wieso werden bei Börse eigentlich die Zeilenumbrüche bei [ HTML ] entfernt?

**Thomas41587** · 04.02.12, 14:00

Funktioniert alles bestens und gefällt mir auch sehr gut das Ergebnis. Danke!

ja ist mir auch aufgefallen dass die Zeilenumbrüche weg waren, aber ist ja nicht allzu schlimm

**dark_underground** · 07.02.12, 16:54

posixpascal

meinen Respekt...

ich wüsste jetzt auch nicht aus dem sStehgreif was an dem Code verbessert werden müsste oder sollte ...

Super Erklärung...

Für alles andere gibts Fachbücher ... *g*
OK... und YouTube...

**Kuscheltod** · 08.02.12, 17:43

Ich frage mich eigentlich eher nur "wieso"

Für ne private Seite sicher kk, willst du damit was anderes machen (bloggen zum Beispiel), solltest du beim einfachen html title tag beim image bleiben, da dir die Suchmaschinen sonst einen Strick drehen ^_^ - was sie auch auf privater Seite machen, aber da ist es dann ja eh egal

Und durchs neue Google Layout Algorythm Update wirst du mit solchen Spielereien, auch wenn sie nett sind, eher nicht gut abschneiden.

**Thomas41587** · 08.02.12, 17:55

Wie soll ich das jetzt verstehen? Google zeigt dann meine Seite nicht an bzw erst auf der X. Seite oder wie?
Zur Zeit ist die Seite ja noch im Aufbau, aber wenn sie irgendwann mal fertig ist, soll sie mich represäntieren, da ich auch über die Seite Geld machen möchte...

**posixpascal** · 08.02.12, 19:42

Google mag es generell nicht, wenn Images etc. keinen ALT-Tag haben. Jenachdem wie deine Seite aufgebaut ist, wird dein Content gewertet.

Beispiel ist da gerne Content welcher mit Javascript erstellt wird, da Googles Crawler kein Javascript drauf hat, ist es natürlich für das Ranking deiner Seite relativ schlecht.

Den Code, den du jetzt für deine Seite verwendest, ist hingegen ziemlich konform, da wir komplett auf Javascript nach dem </head>-Tag verzichten.

Es ist ein Unterschied ob du nun folgendest machst:

Zitat:

oder folgendes machst:

Zitat:

Erstens: Du hast keinen Javascript-Code.
Zweitens: Du hast ein ALT-Tag (für Browser die keine Bilder darstellen oder für lahme Internetverbindungen)

Man sollte auch bedenken, dass das ALT-Tag nur sinnvoll genutzt werden sollte..

<img src="bombe.jpg" alt="bombe" />

ist negativ. Dann lieber einfach einen leeren ALT="" Tag.

Das ganze nennt sich SEO-Optimierung und darauf musst du am Anfang erstmal keinen Wert drauf legen. Denn das kannst du am Ende noch machen. Würde mir dazu auch ein gutes Buch nehmen, was Google indexiert und wie es deinen Content bewertet.

Auch der Google Layout Algorithm bla bla bla, spielt in deinem Fall keine Rolle.....
Da das Bild so oder so angezeigt wird und sich vom Layout her nichts ändert.

Weiß nicht was das Kommentar von Kuscheltod bringen soll, aber naja.

Pushen wir den Beitrag eben noch mal nach oben.

Ich denke das ist geklärt hier.

@dark_underground: thx.....^^

**Thomas41587** · 08.02.12, 19:59

wuhee...nach einem quereinstieg in html und css jetzt also auch noch crashkurs in google-suchindexierung. Muss ich mich wohl echt mal damit befassen, aber das kann echt warten bis die homepage komplett fertig ist. Das optimieren wird ja denke ich nicht so arg viel aufwand sein und ist ja auch am anfang noch nicht ganz so wichtig?

Was ich nicht ganz verstehe, ist dein beispiel mit dem alt tag. wenn mein bild wirklich "bombe.jpg" heißt, wieso ist es dann besser gar nichts anzuzeigen als "bombe" wenn das bild nicht lädt? wenn ein bild nicht lädt, wüsste ich doch zumindest mal gerne, was das bild darstellt (zumindest ungefähr). oder liege ich da irgendwie falsch?

würde mich übrigens noch über eine antwort auf mein kleines problem freuen

aber wenn du zuviel stress hast dann sags

**posixpascal** · 08.02.12, 20:06

Naja, das mit dem leeren ALT-Tag klingt zwar erstmal falsch, aber es geht hier hauptsächlich um kleinere Icons oder sonstige Icons die erstmal nichts machen.

Transparente 1x1 Pixel Gifs beispielsweise. Google bewertet das ziemlich gleichwertig, haste n ALT-Tag bist du auf der sicheren Seite.

& ja, prinzipiell hast du recht.

Zu deinem Problem:
Ja, ich werde wahrscheinlich erst gegen Samstag wieder voll da sein, hab im Moment einigen Stress mit anderen Projekten. :/ Muss hier auch nen anderen Börsianer ziemlich hängen lassen. Entschuldige mich hier schon mal dafür ^^.

Ich werde mich bei dir melden wenn ich wieder Zeit habe und das Problem noch besteht.
Kannst auch hier einen Beitrag in der Börse auf machen. Ich bin auf dem Gebiet sicherlich kein Experte, andere Börsianer haben richtig viel drauf auf dem Gebiet hier.

Wenn sich keiner meldet, grabe ich den Thread am Samstag einfach aus

.

**Kuscheltod** · 09.02.12, 05:32

Uhm, da muss ich dir wiedersprechen, gerade 1x1 images sieht Google gar nicht gerne, denn damit kann man ganz viel böse Sachen machen - auch wenn ich das keinem unterstelle.

**posixpascal** · 09.02.12, 06:36

War auf den ALT Tag bezogen. Weiss nicht wie Google's Crawler tickt.